Created
June 19, 2018 16:56
-
-
Save AngelMunoz/794c2e362e9d3b4033011d420a6b3f49 to your computer and use it in GitHub Desktop.
A sample using a Vue component of a small media toolbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<v-toolbar dark> | |
<v-btn icon @click="pickAudio"> | |
<v-icon>library_music</v-icon> | |
</v-btn> | |
<v-btn icon v-if="file.isAvailable && !isPlaying" @click="play"> | |
<v-icon>play_arrow</v-icon> | |
</v-btn> | |
<v-btn icon v-else-if="file.isAvailable && isPlaying" @click="pause"> | |
<v-icon>pause</v-icon> | |
</v-btn> | |
<v-toolbar-title>{{ file.displayName }} - {{file.displayType}}</v-toolbar-title> | |
</v-toolbar> | |
</template> | |
<script> | |
export default { | |
name: 'UwpMediaToolbar', | |
data() { | |
return { | |
isPlaying: false, | |
file: { | |
displayName: "Choose a File", | |
displayType: 'Click on the left button', | |
isAvailable: false | |
}, | |
mediaSource: null, | |
player: null, | |
picker: null | |
} | |
}, | |
beforeMount() { | |
this.player = new Windows.Media.Playback.MediaPlayer(); | |
this.player.onmediaended = this.resetControls.bind(this) | |
this.picker = new Windows.Storage.Pickers.FileOpenPicker(); | |
this.picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; | |
this.picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary; | |
this.picker.fileTypeFilter.replaceAll([".mp3"]); | |
}, | |
methods: { | |
async pickAudio() { | |
try { | |
const file = await this.picker.pickSingleFileAsync(); | |
if (file) { this.file = file } | |
console.log(file); | |
} catch (e) { | |
console.error(e); | |
} | |
}, | |
play() { | |
if (!this.player || !this.player.source || !this.mediaSource) { | |
this.mediaSource = Windows.Media.Core.MediaSource.createFromStorageFile(this.file); | |
this.player.source = this.mediaSource; | |
} | |
this.player.play(); | |
this.isPlaying = true | |
}, | |
pause() { | |
this.player.pause(); | |
this.isPlaying = false; | |
}, | |
resetControls() { | |
this.isPlaying = false; | |
} | |
} | |
} | |
</script> | |
<style></style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment