Skip to content

Instantly share code, notes, and snippets.

@AngelMunoz
Created June 19, 2018 16:56
Show Gist options
  • Save AngelMunoz/794c2e362e9d3b4033011d420a6b3f49 to your computer and use it in GitHub Desktop.
Save AngelMunoz/794c2e362e9d3b4033011d420a6b3f49 to your computer and use it in GitHub Desktop.
A sample using a Vue component of a small media toolbar
<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