mirror of
https://github.com/koel/koel
synced 2025-01-09 19:28:44 +00:00
67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
||
<section id="youTubePlayer">
|
||
<h1 class="heading"><span>YouTube Video</span></h1>
|
||
<div id="player">
|
||
<p class="none">Your YouTube video will be played here.<br/>
|
||
You can start a video playback from the right sidebar. When a song is playing, that is.<br>
|
||
It might also be worth noting that video’s volume, progress and such are controlled from within
|
||
the video itself, and not via Koel’s controls.</p>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import { event } from '../../../utils';
|
||
import { playback } from '../../../services';
|
||
import YouTubePlayer from 'youtube-player';
|
||
|
||
let player;
|
||
|
||
export default {
|
||
name: 'main-wrapper--main-content--youtube-player',
|
||
|
||
methods: {
|
||
/**
|
||
* Initialize the YouTube player. This should only be called once.
|
||
*/
|
||
initPlayer() {
|
||
if (!player) {
|
||
player = YouTubePlayer('player', {
|
||
width: '100%',
|
||
height: '100%',
|
||
});
|
||
|
||
player.on('stateChange', event => {
|
||
// Pause song playback when video is played
|
||
event.data === 1 && playback.pause();
|
||
});
|
||
}
|
||
},
|
||
},
|
||
|
||
created() {
|
||
event.on({
|
||
'youtube:play': id => {
|
||
this.initPlayer();
|
||
player.loadVideoById(id);
|
||
player.playVideo();
|
||
},
|
||
|
||
/**
|
||
* Stop video playback when a song is played/resumed.
|
||
*/
|
||
'song:played': () => player && player.pauseVideo(),
|
||
});
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
@import "../../../../sass/partials/_vars.scss";
|
||
@import "../../../../sass/partials/_mixins.scss";
|
||
|
||
.none {
|
||
color: $color2ndText;
|
||
padding: 16px 24px;
|
||
}
|
||
</style>
|