diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 7549a713..c9afc97a 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -575,6 +575,8 @@ export default Vue.extend({ this.player.dispose() this.player = null clearTimeout(this.mouseTimeout) + } else if (this.player.isInPictureInPicture()) { + this.player.play() } } }) diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index e5d4039d..ac85aaea 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -43,6 +43,7 @@ export default Vue.extend({ isUpcoming: false, upcomingTimestamp: null, activeFormat: 'legacy', + thumbnail: '', videoId: '', videoTitle: '', videoDescription: '', @@ -113,26 +114,6 @@ export default Vue.extend({ return this.$store.getters.getPlayNextVideo }, - thumbnail: function () { - let baseUrl - if (this.backendPreference === 'invidious') { - baseUrl = this.invidiousInstance - } else { - baseUrl = 'https://i.ytimg.com' - } - - switch (this.thumbnailPreference) { - case 'start': - return `${baseUrl}/vi/${this.videoId}/maxres1.jpg` - case 'middle': - return `${baseUrl}/vi/${this.videoId}/maxres2.jpg` - case 'end': - return `${baseUrl}/vi/${this.videoId}/maxres3.jpg` - default: - return `${baseUrl}/vi/${this.videoId}/maxresdefault.jpg` - } - }, - youtubeNoCookieEmbeddedFrame: function () { return `` } @@ -206,8 +187,23 @@ export default Vue.extend({ this.channelName = result.videoDetails.author.name this.channelThumbnail = result.videoDetails.author.avatar this.videoPublished = new Date(result.videoDetails.publishDate.replace('-', '/')).getTime() - this.videoDescription = - result.player_response.videoDetails.shortDescription + this.videoDescription = result.player_response.videoDetails.shortDescription + + switch (this.thumbnailPreference) { + case 'start': + this.thumbnail = `https://i.ytimg.com/vi/${this.videoId}/maxres1.jpg` + break + case 'middle': + this.thumbnail = `https://i.ytimg.com/vi/${this.videoId}/maxres2.jpg` + break + case 'end': + this.thumbnail = `https://i.ytimg.com/vi/${this.videoId}/maxres3.jpg` + break + default: + this.thumbnail = result.videoDetails.thumbnail.thumbnails[result.videoDetails.thumbnail.thumbnails.length - 1].url + break + } + this.recommendedVideos = result.related_videos.map((video) => { video.videoId = video.id video.authorId = video.ucid @@ -379,6 +375,21 @@ export default Vue.extend({ return caption }) + switch (this.thumbnailPreference) { + case 'start': + this.thumbnail = `${this.invidiousInstance}/vi/${this.videoId}/maxres1.jpg` + break + case 'middle': + this.thumbnail = `${this.invidiousInstance}/vi/${this.videoId}/maxres2.jpg` + break + case 'end': + this.thumbnail = `${this.invidiousInstance}/vi/${this.videoId}/maxres3.jpg` + break + default: + this.thumbnail = result.videoThumbnails[0].url + break + } + if (this.isLive) { this.showLegacyPlayer = true this.showDashPlayer = false @@ -651,6 +662,25 @@ export default Vue.extend({ console.log('update watch progress') this.updateWatchProgress(payload) } + + if (player.isInPictureInPicture()) { + setTimeout(() => { + player.play() + player.on('leavepictureinpicture', () => { + const watchTime = player.currentTime() + if (this.$route.fullPath.includes('/watch')) { + const routeId = this.$route.params.id + if (routeId === this.videoId) { + const activePlayer = $('.ftVideoPlayer video').get(0) + activePlayer.currentTime = watchTime + } + } + + player.pause() + player.dispose() + }) + }, 200) + } } },