2022-04-15 14:24:30 +00:00
|
|
|
<template>
|
|
|
|
<section id="youtubeWrapper">
|
|
|
|
<screen-header>{{ title }}</screen-header>
|
|
|
|
|
|
|
|
<div id="player">
|
2022-04-21 18:12:11 +00:00
|
|
|
<ScreenEmptyState data-testid="youtube-placeholder">
|
2022-04-15 14:24:30 +00:00
|
|
|
<template v-slot:icon>
|
2022-07-15 07:23:55 +00:00
|
|
|
<icon :icon="faYoutube"/>
|
2022-04-15 14:24:30 +00:00
|
|
|
</template>
|
|
|
|
YouTube videos will be played here.
|
2022-04-23 22:10:46 +00:00
|
|
|
<span class="d-block instruction">Start a video playback from the right sidebar.</span>
|
2022-04-21 18:12:11 +00:00
|
|
|
</ScreenEmptyState>
|
2022-04-15 14:24:30 +00:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
<script lang="ts" setup>
|
2022-07-15 07:23:55 +00:00
|
|
|
import { faYoutube } from '@fortawesome/free-brands-svg-icons'
|
2022-04-23 22:10:46 +00:00
|
|
|
import createYouTubePlayer from 'youtube-player'
|
2022-07-07 18:05:46 +00:00
|
|
|
import { ref } from 'vue'
|
2022-06-10 10:47:46 +00:00
|
|
|
import type { YouTubePlayer } from 'youtube-player/dist/types'
|
2022-04-23 22:10:46 +00:00
|
|
|
import { eventBus, use } from '@/utils'
|
2022-04-24 08:50:45 +00:00
|
|
|
import { playbackService } from '@/services'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-07-07 18:05:46 +00:00
|
|
|
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
|
|
|
|
import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-07-07 18:05:46 +00:00
|
|
|
let player: YouTubePlayer | null = null
|
2022-04-15 17:00:08 +00:00
|
|
|
const title = ref('YouTube Video')
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-04-23 22:10:46 +00:00
|
|
|
const getPlayer = () => {
|
2022-04-15 17:00:08 +00:00
|
|
|
if (!player) {
|
|
|
|
player = createYouTubePlayer('player', {
|
|
|
|
width: '100%',
|
|
|
|
height: '100%'
|
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
// Pause song playback when video is played
|
2022-04-24 08:50:45 +00:00
|
|
|
player.on('stateChange', ({ data }) => data === 1 && playbackService.pause())
|
2022-04-15 17:00:08 +00:00
|
|
|
}
|
2022-04-23 22:10:46 +00:00
|
|
|
|
|
|
|
return player
|
2022-04-15 17:00:08 +00:00
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
eventBus.on({
|
2022-04-23 22:10:46 +00:00
|
|
|
PLAY_YOUTUBE_VIDEO (payload: { id: string, title: string }) {
|
2022-04-15 17:00:08 +00:00
|
|
|
title.value = payload.title
|
2022-04-23 22:10:46 +00:00
|
|
|
|
|
|
|
use(getPlayer(), player => {
|
|
|
|
player.loadVideoById(payload.id)
|
|
|
|
player.playVideo()
|
|
|
|
})
|
2022-04-15 17:00:08 +00:00
|
|
|
},
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
/**
|
|
|
|
* Stop video playback when a song is played/resumed.
|
|
|
|
*/
|
|
|
|
'SONG_STARTED': () => player && player.pauseVideo()
|
2022-04-15 14:24:30 +00:00
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#player {
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
.instruction {
|
|
|
|
font-size: 1.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|