From 4f04eb764048ceb87dca8e1ef8cc1063a87e52f5 Mon Sep 17 00:00:00 2001 From: Preston Date: Thu, 24 Sep 2020 22:35:13 -0400 Subject: [PATCH] Add better default quality logic --- .../components/ft-list-video/ft-list-video.js | 4 + .../ft-video-player/ft-video-player.js | 154 +++++++----------- src/renderer/views/Watch/Watch.js | 4 +- 3 files changed, 65 insertions(+), 97 deletions(-) diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js index cd252bab..ef02b6cb 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.js +++ b/src/renderer/components/ft-list-video/ft-list-video.js @@ -208,6 +208,10 @@ export default Vue.extend({ if (typeof lengthSeconds === 'string') { return lengthSeconds } + + if (typeof lengthSeconds === 'undefined') { + return '0:00' + } let durationText = '' let time = lengthSeconds let hours = 0 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 ef110b32..0fe0e503 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -50,6 +50,7 @@ export default Vue.extend({ player: null, useDash: false, useHls: false, + selectedDefaultQuality: '', activeSourceList: [], mouseTimeout: null, dataSetup: { @@ -110,80 +111,6 @@ export default Vue.extend({ autoplayVideos: function () { return this.$store.getters.getAutoplayVideos - }, - - selectedDefaultQuality: function () { - let selectedQuality = '' - - if (this.sourceList.length === 0) { - return '' - } - - if (typeof (this.sourceList[0].qualityLabel) === 'number') { - return '' - } - - const maxAvailableQuality = parseInt(this.sourceList[this.sourceList.length - 1].qualityLabel.replace(/p|k/, '')) - - switch (maxAvailableQuality) { - case 4: - if (this.defaultQuality >= 2160) { - return '4k' - } - break - case 8: - if (this.defaultQuality >= 4320) { - return '8k' - } - break - case 144: - if (this.defaultQuality >= 144) { - return '144p' - } - break - case 240: - if (this.defaultQuality >= 240) { - return '240p' - } - break - case 360: - if (this.defaultQuality >= 360) { - return '360p' - } - break - case 480: - if (this.defaultQuality >= 480) { - return '480p' - } - break - case 720: - if (this.defaultQuality >= 720) { - return '720p' - } - break - case 1080: - if (this.defaultQuality >= 1080) { - return '1080p' - } - break - case 1440: - if (this.defaultQuality >= 1440) { - return '1440p' - } - break - default: - return maxAvailableQuality + 'p' - } - - this.activeSourceList.forEach((source) => { - if (typeof (source.qualityLabel) !== 'undefined') { - if (this.determineDefaultQuality(source.qualityLabel)) { - selectedQuality = source.qualityLabel - } - } - }) - - return selectedQuality } }, watch: { @@ -215,11 +142,12 @@ export default Vue.extend({ } }, methods: { - initializePlayer: function () { + initializePlayer: async function () { const videoPlayer = document.getElementById(this.id) if (videoPlayer !== null) { if (!this.useDash) { qualitySelector(videojs, { showQualitySelectionLabelInControlBar: true }) + await this.determineDefaultQuality() } this.player = videojs(videoPlayer) @@ -227,10 +155,12 @@ export default Vue.extend({ this.player.volume(this.volume) this.player.playbackRate(this.defaultPlayback) - this.player.vttThumbnails({ - src: this.storyboardSrc, - showTimestamp: true - }) + if (this.storyboardSrc !== '') { + this.player.vttThumbnails({ + src: this.storyboardSrc, + showTimestamp: true + }) + } if (this.useDash) { this.dataSetup.plugins.httpSourceSelector = { @@ -284,26 +214,60 @@ export default Vue.extend({ determineDefaultQuality: function (label) { if (this.useDash) { - return false + return } - if (label.includes('p')) { - const selectedQuality = parseInt(label.replace('p', '')) - return this.defaultQuality === selectedQuality - } else if (label.includes('k')) { - const hdQuality = parseInt(label.replace('k', '')) + if (this.sourceList.length === 0) { + return '' + } - switch (hdQuality) { - case 4: - return this.defaultQuality === 2160 - case 8: - return this.defaultQuality === 4320 - default: - return false + if (typeof (this.sourceList[0].qualityLabel) === 'number') { + return '' + } + + let maxAvailableQuality = parseInt(this.sourceList[this.sourceList.length - 1].qualityLabel.replace(/p|k/, '')) + + if (maxAvailableQuality === 4) { + maxAvailableQuality = 2160 + } + + if (maxAvailableQuality === 8) { + maxAvailableQuality = 4320 + } + + if (maxAvailableQuality < this.defaultQuality) { + this.selectedDefaultQuality = this.sourceList[this.sourceList.length - 1].qualityLabel + } + + const reversedList = [].concat(this.sourceList).reverse() + + reversedList.forEach((source, index) => { + let qualityNumber = parseInt(source.qualityLabel.replace(/p|k/, '')) + if (qualityNumber === 4) { + qualityNumber = 2160 } - } else { - console.log('Invalid label') - return false + if (qualityNumber === 8) { + qualityNumber = 4320 + } + + if (index < (this.sourceList.length - 1)) { + let upperQualityNumber = parseInt(reversedList[index + 1].qualityLabel.replace(/p|k/, '')) + if (upperQualityNumber === 4) { + upperQualityNumber = 2160 + } + if (upperQualityNumber === 8) { + upperQualityNumber = 4320 + } + if (this.defaultQuality >= qualityNumber && this.defaultQuality < upperQualityNumber) { + this.selectedDefaultQuality = source.qualityLabel + } + } else if (qualityNumber === this.defaultQuality) { + this.selectedDefaultQuality = source.qualityLabel + } + }) + + if (this.selectedDefaultQuality === '') { + this.selectedDefaultQuality = this.sourceList[this.sourceList.length - 1].qualityLabel } }, diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index c07c1ae7..f60fc2ef 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -273,7 +273,7 @@ export default Vue.extend({ const qualityA = parseInt(a.qualityLabel.replace('p', '')) const qualityB = parseInt(b.qualityLabel.replace('p', '')) return qualityA - qualityB - }) + }).reverse() if (this.videoSourceList.length === 0) { this.activeSourceList = result.player_response.streamingData.formats @@ -285,7 +285,7 @@ export default Vue.extend({ this.upcomingTimestamp = upcomingTimestamp.toLocaleString() } else { this.videoLengthSeconds = parseInt(result.videoDetails.lengthSeconds) - this.videoSourceList = result.player_response.streamingData.formats + this.videoSourceList = result.player_response.streamingData.formats.reverse() if (typeof result.player_response.streamingData.adaptiveFormats !== 'undefined') { this.dashSrc = await this.createLocalDashManifest(result.player_response.streamingData.adaptiveFormats)