diff --git a/package-lock.json b/package-lock.json index dabac799..731e0a00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2428,6 +2428,27 @@ "fastq": "^1.6.0" } }, + "@silvermine/videojs-quality-selector": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@silvermine/videojs-quality-selector/-/videojs-quality-selector-1.2.3.tgz", + "integrity": "sha512-votXSPzzydjZsBZT37589sTw31csgncWggaYPWKXTygCkzvc8V876iRNJiTykgaiZd/9qQn7pjwEJsOqnfp/pw==", + "requires": { + "class.extend": "0.9.1", + "underscore": "1.9.1" + }, + "dependencies": { + "class.extend": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/class.extend/-/class.extend-0.9.1.tgz", + "integrity": "sha1-tO5BfGk3QKRKkqbWTxyVQGQbCXo=" + }, + "underscore": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz", + "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==" + } + } + }, "@sindresorhus/is": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", @@ -6977,6 +6998,11 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "fast-xml-parser": { + "version": "3.16.0", + "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.16.0.tgz", + "integrity": "sha512-U+bpScacfgnfNfIKlWHDu4u6rtOaCyxhblOLJ8sZPkhsjgGqdZmVPBhdOyvdMGCDt8CsAv+cssOP3NzQptNt2w==" + }, "fastq": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz", @@ -14478,11 +14504,110 @@ "xhr": "2.4.0" } }, + "videojs-contrib-quality-levels": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.0.9.tgz", + "integrity": "sha512-HJeaJJQdSufi9Y5T7jlyyhkeq+mWPCog86q6ypoTi66boBMMJTo2abiOSHS9KaOGAJjH72gfvrjVY5FRdjlxYA==", + "requires": { + "global": "^4.3.2", + "video.js": "^6 || ^7" + } + }, "videojs-font": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz", "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==" }, + "videojs-frankly-ttml": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/videojs-frankly-ttml/-/videojs-frankly-ttml-1.0.1.tgz", + "integrity": "sha512-lmpTQA7q47V5S2ILpNhHbqOyWBebPGb3OGpTMXzUP1HkhA1ZdGSaBFLUG+manE9ZlONLu8FsoqrEFQoobCR4zA==", + "requires": { + "video.js": "^5.8.5" + }, + "dependencies": { + "global": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/global/-/global-4.3.0.tgz", + "integrity": "sha1-737EvurVebRU9evV5/MD21T0Kis=", + "requires": { + "min-document": "^2.6.1", + "process": "~0.5.1" + } + }, + "process": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz", + "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=" + }, + "video.js": { + "version": "5.20.5", + "resolved": "https://registry.npmjs.org/video.js/-/video.js-5.20.5.tgz", + "integrity": "sha1-RFza4gS85Fl4LYajGyWjKv1tjv8=", + "requires": { + "babel-runtime": "^6.9.2", + "global": "4.3.0", + "safe-json-parse": "4.0.0", + "tsml": "1.0.1", + "videojs-font": "2.0.0", + "videojs-ie8": "1.1.2", + "videojs-swf": "5.4.1", + "videojs-vtt.js": "0.12.6", + "xhr": "2.2.2" + } + }, + "videojs-font": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.0.0.tgz", + "integrity": "sha1-r3Rh751LleAzS/+3iy8v8DZKkDQ=" + }, + "videojs-vtt.js": { + "version": "0.12.6", + "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz", + "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==", + "requires": { + "global": "^4.3.1" + }, + "dependencies": { + "global": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "requires": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, + "process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" + } + } + }, + "xhr": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.2.2.tgz", + "integrity": "sha1-LuclcYafhobUFVmp6ihsGJcUNf8=", + "requires": { + "global": "~4.3.0", + "is-function": "^1.0.1", + "parse-headers": "^2.0.0", + "xtend": "^4.0.0" + } + } + } + }, + "videojs-http-source-selector": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/videojs-http-source-selector/-/videojs-http-source-selector-1.1.6.tgz", + "integrity": "sha512-6b5MmKTT2cVnrjtdNj4z1VO91udbXkZkTYA6LlD8WN2aHlG2rqFTmtMab4NK4nlkkkbRnm3c2q2IddL3jffLmg==", + "requires": { + "global": "^4.3.2", + "video.js": "^7.0.0", + "videojs-contrib-quality-levels": "^2.0.4" + } + }, "videojs-ie8": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz", @@ -14576,6 +14701,16 @@ "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.1.tgz", "integrity": "sha1-IHfvccdJ8seCPvSbq65N0qywj4c=" }, + "videojs-vtt-thumbnails": { + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/videojs-vtt-thumbnails/-/videojs-vtt-thumbnails-0.0.13.tgz", + "integrity": "sha512-7VGcpTRF+ppIss/NiZcDkVOE02k/GoMltxUumQ2jaTpR1ZieYTM+dPopmTXubLxOgUP3F71uTLMZVnWEtiHjVA==", + "requires": { + "global": "^4.3.2", + "request": "^2.83.0", + "video.js": "^5.19.2 || ^6.6.0 || ^7.2.0" + } + }, "videojs-vtt.js": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz", @@ -15661,6 +15796,14 @@ "node-fetch": "^2.6.0" } }, + "yt-xml2srt": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/yt-xml2srt/-/yt-xml2srt-1.1.0.tgz", + "integrity": "sha512-6JseclPTdiPEuXZ+cwiYl1xtqYDsyGfJqQfVSWmPXWT3bVEdAYPDXspMqQPRRXHdYEGaMD/oBz2mWMhXanKeOA==", + "requires": { + "fast-xml-parser": "^3.16.0" + } + }, "ytdl-core": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/ytdl-core/-/ytdl-core-1.0.7.tgz", diff --git a/package.json b/package.json index ae08f27f..7a8b001a 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/vue-fontawesome": "^0.1.9", + "@silvermine/videojs-quality-selector": "^1.2.3", "autolinker": "^3.11.1", "bulma-pro": "^0.1.8", "dateformat": "^3.0.3", @@ -22,7 +23,10 @@ "nedb": "^1.8.0", "opml-to-json": "0.0.3", "video.js": "^7.6.6", + "videojs-contrib-quality-levels": "^2.0.9", + "videojs-http-source-selector": "^1.1.6", "videojs-replay": "^1.1.0", + "videojs-vtt-thumbnails": "0.0.13", "vue": "^2.6.11", "vue-electron": "^1.0.6", "vue-router": "^3.1.5", @@ -32,6 +36,7 @@ "youtube-comments-fetch": "^1.0.1", "youtube-comments-task": "^1.3.14", "youtube-suggest": "^1.1.0", + "yt-xml2srt": "^1.1.0", "ytdl-core": "^1.0.7", "ytpl": "^0.1.20", "ytsr": "^0.1.10" diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css index 67f84ad7..0e9e0705 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.css +++ b/src/renderer/components/ft-video-player/ft-video-player.css @@ -5,4 +5,5 @@ .ftVideoPlayer { width: 85%; + max-height: 50vh; } 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 59144760..725a9928 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -4,6 +4,10 @@ import FtCard from '../ft-card/ft-card.vue' // I haven't decided which video player I want to use // Need to expirement with both of them to see which one will work best. import videojs from 'video.js' +import qualitySelector from '@silvermine/videojs-quality-selector' +import 'videojs-vtt-thumbnails' +import 'videojs-contrib-quality-levels' +import 'videojs-http-source-selector' // import mediaelement from 'mediaelement' export default Vue.extend({ @@ -12,21 +16,60 @@ export default Vue.extend({ 'ft-card': FtCard }, props: { - data: { + sourceList: { + type: Array, + required: true + }, + dashSrc: { + type: Object, + default: null + }, + hlsSrc: { + type: Object, + default: null + }, + captionList: { type: Array, default: () => { return [] } }, - src: { + storyboardSrc: { type: String, - required: true + default: '' } }, data: function () { return { id: '', player: null, + useDash: false, + useHls: false, + activeSourceList: [], dataSetup: { aspectRatio: '16:9', + nativeTextTracks: false, + plugins: {}, + controlBar: { + children: [ + 'playToggle', + 'volumePanel', + 'currentTimeDisplay', + 'timeDivider', + 'durationDisplay', + 'progressControl', + 'liveDisplay', + 'seekToLive', + 'remainingTimeDisplay', + 'customControlSpacer', + 'playbackRateMenuButton', + 'chaptersButton', + 'descriptionsButton', + 'subsCapsButton', + 'audioTrackButton', + 'QualitySelector', + 'pictureInPictureToggle', + 'fullscreenToggle' + ] + }, playbackRates: [ 0.25, 0.5, @@ -47,21 +90,79 @@ export default Vue.extend({ computed: { listType: function () { return this.$store.getters.getListType + }, + + videoFormatPreference: function () { + return this.$store.getters.getVideoFormatPreference } }, mounted: function () { this.id = this._uid - setTimeout(this.initializePlayer, 100) + + this.determineFormatType() }, methods: { initializePlayer: function () { - console.log(this.id) const videoPlayer = document.getElementById(this.id) - console.log(videoPlayer) if (videoPlayer !== null) { + if (!this.useDash && !this.useHls) { + qualitySelector(videojs, { showQualitySelectionLabelInControlBar: true }) + } + this.player = videojs(videoPlayer) - console.log(videojs.players) + + this.player.vttThumbnails({ + src: this.storyboardSrc + }) + + if (this.useDash) { + this.dataSetup.plugins.httpSourceSelector = { + default: 'auto' + } + + this.player.httpSourceSelector() + } } + }, + + determineFormatType: function () { + if (this.hlsSrc === null && this.dashSrc !== null && this.videoFormatPreference === 'dash') { + this.enableDashFormat() + } else { + this.enableLegacyFormat() + } + }, + + enableDashFormat: function () { + if (this.dashSrc === null) { + console.log('No dash format available.') + return + } + + console.log('using dash format') + + this.useDash = true + this.useHls = false + this.activeSourceList = this.dashSrc + + console.log(this.activeSourceList) + + setTimeout(this.initializePlayer, 1000) + }, + + enableLegacyFormat: function () { + if (this.sourceList.length === 0) { + console.log('No sources available') + return + } + + console.log('using legacy format') + + this.useDash = false + this.useHls = false + this.activeSourceList = this.sourceList + + setTimeout(this.initializePlayer, 100) } } }) diff --git a/src/renderer/components/ft-video-player/ft-video-player.vue b/src/renderer/components/ft-video-player/ft-video-player.vue index bc875c7e..e517b705 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.vue +++ b/src/renderer/components/ft-video-player/ft-video-player.vue @@ -3,15 +3,25 @@ diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css index d59defa7..27e1a6d7 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.css +++ b/src/renderer/components/watch-video-comments/watch-video-comments.css @@ -8,11 +8,22 @@ color: var(--title-color); } +.center { + text-align: center; +} + .comment { padding: 15px; position: relative; } +.hideComments { + font-size: 13px; + text-decoration: underline; + cursor: pointer; + color: var(--title-color); +} + .commentThumbnail { float: left; width: 60px; @@ -47,7 +58,7 @@ .commentMoreReplies { font-size: 11px; - margin-left: 110px; + margin-left: 120px; margin-top: -25px; text-decoration: underline; cursor: pointer; diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js index e023c021..9b686092 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.js +++ b/src/renderer/components/watch-video-comments/watch-video-comments.js @@ -18,6 +18,7 @@ export default Vue.extend({ data: function () { return { isLoading: false, + showComments: false, nextPageToken: null, commentData: [] } @@ -87,6 +88,7 @@ export default Vue.extend({ this.commentData = this.commentData.concat(commentData) this.nextPageToken = p.nextPageToken this.isLoading = false + this.showComments = true }) }, @@ -127,6 +129,7 @@ export default Vue.extend({ this.commentData = this.commentData.concat(commentData) this.nextPageToken = response.continuation this.isLoading = false + this.showComments = true }).catch((xhr) => { console.log('found an error') console.log(xhr) diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue index 3afb2d69..f9405921 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.vue +++ b/src/renderer/components/watch-video-comments/watch-video-comments.vue @@ -10,13 +10,26 @@ > Click to view comments +

+ Click to view comments +

Comments + + Hide Comments +

+
+

+ There are no comments available for this video. +

+

diff --git a/src/renderer/components/watch-video-info/watch-video-info.css b/src/renderer/components/watch-video-info/watch-video-info.css index de41a9e5..54da2bc7 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.css +++ b/src/renderer/components/watch-video-info/watch-video-info.css @@ -83,7 +83,14 @@ position: absolute; right: 15px; top: 20px; - width: 350px; + width: 550px; +} + +.theatreModeButton { + height: 30px; + line-height: 10px; + position: relative; + bottom: 5px; } .formatTypeDropdown { @@ -93,3 +100,13 @@ .shareDropdown { width: 175px; } + +@media only screen and (max-width: 1700px) { + .theatreModeButton { + display: none; + } + + .videoOptions { + width: 350px; + } +} diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue index f126a831..a918e28f 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.vue +++ b/src/renderer/components/watch-video-info/watch-video-info.vue @@ -27,6 +27,11 @@ /> + { return state.clickBaitRemoverPreference + }, + + getVideoFormatPreference: () => { + return state.videoFormatPreference } } diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css index 472a148e..fa02056f 100644 --- a/src/renderer/videoJS.css +++ b/src/renderer/videoJS.css @@ -890,7 +890,7 @@ body.vjs-full-window { position: absolute; top: -3.4em; visibility: hidden; - z-index: 1; + z-index: 2; } .video-js .vjs-progress-holder:focus .vjs-time-tooltip { @@ -1292,7 +1292,7 @@ video::-webkit-media-text-track-display { .vjs-playback-rate > .vjs-menu-button, .vjs-playback-rate .vjs-playback-rate-value { position: absolute; - top: 0; + top: 30%; left: 0; width: 100%; height: 100%; @@ -1301,7 +1301,6 @@ video::-webkit-media-text-track-display { .vjs-playback-rate .vjs-playback-rate-value { pointer-events: none; font-size: 1.2em; - line-height: 2.8; text-align: center; } @@ -1895,7 +1894,7 @@ video::-webkit-media-text-track-display { background-color: transparent; width: 5.5em; left: 1.5em; - padding-bottom: .5em + padding-bottom: .5em; } .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title { @@ -1943,3 +1942,42 @@ video::-webkit-media-text-track-display { .video-js .vjs-load-progress { background: rgba(255,255,255,0.3); } + +.vjs-quality-selector .vjs-menu-button { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +.vjs-quality-selector .vjs-quality-selector-icon { + font-family: 'VideoJS'; + font-weight: normal; + font-style: normal; +} + +.vjs-quality-selector .vjs-quality-selector-icon:before { + content: '\f110'; +} + +.vjs-quality-changing .vjs-big-play-button { + display: none; +} + +.vjs-quality-changing .vjs-control-bar { + display: flex; + visibility: visible; + opacity: 1; +} + +.video-js .vjs-vtt-thumbnails { + display: block; +} + +.video-js .vjs-vtt-thumbnail-display { + position: absolute; + transition: transform .1s, opacity .2s; + bottom: 20px; + pointer-events: none; + box-shadow: 0 0 7px rgba(0,0,0,.6); +} diff --git a/src/renderer/views/Watch/Watch.css b/src/renderer/views/Watch/Watch.css index 86605b47..91c99dec 100644 --- a/src/renderer/views/Watch/Watch.css +++ b/src/renderer/views/Watch/Watch.css @@ -5,6 +5,13 @@ margin-bottom: 10px; } +.theatreWatchVideo { + float: none; + margin: 0 auto; + width: 85%; + margin-bottom: 10px; +} + .videoPlayer { width: calc(65% + 30px); float: left; @@ -13,6 +20,13 @@ margin-bottom: 10px; } +.theatrePlayer { + width: calc(85% + 30px); + float: none; + margin: 0 auto; + margin-bottom: 10px; +} + .watchVideoRecommendations { width: 27%; max-width: 425px; @@ -23,6 +37,14 @@ right: 10px; } +.theatreRecommendations { + float: none; + margin: 0 auto; + width: 85%; + max-width: none; + position: static; +} + @media only screen and (max-width: 1700px) { .watchVideo { float: none; diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index b27f4ad2..06921f82 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -24,9 +24,11 @@ export default Vue.extend({ return { isLoading: false, firstLoad: true, + useTheatreMode: true, showDashPlayer: true, showLegacyPlayer: false, showYouTubeNoCookieEmbed: false, + proxyVideos: false, videoId: '', videoTitle: '', videoDescription: '', @@ -39,9 +41,10 @@ export default Vue.extend({ channelId: '', channelSubscriptionCountText: '', videoPublished: 0, - videoUrl360p: '', - videoUrl720p: '', + videoStoryboardSrc: '', audioUrl: '', + videoSourceList: [], + captionSourceList: [], recommendedVideos: [] } }, @@ -64,6 +67,14 @@ export default Vue.extend({ youtubeNoCookieEmbeddedFrame: function () { return `` + }, + + dashSrc: function () { + return { + url: `${this.invidiousInstance}/api/manifest/dash/${this.videoId}.mpd`, + type: 'application/dash+xml', + label: 'Dash' + } } }, watch: { @@ -85,6 +96,11 @@ export default Vue.extend({ }, mounted: function () { this.videoId = this.$route.params.id + this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90` + + if (this.proxyVideos) { + this.dashSrc = this.dashSrc + '?local=true' + } switch (this.backendPreference) { case 'local': @@ -96,6 +112,10 @@ export default Vue.extend({ } }, methods: { + toggleTheatreMode: function () { + this.useTheatreMode = !this.useTheatreMode + }, + getVideoInformationLocal: function () { if (this.firstLoad) { this.isLoading = true @@ -112,8 +132,45 @@ export default Vue.extend({ this.videoPublished = result.published this.videoDescription = result.player_response.videoDetails.shortDescription this.recommendedVideos = result.related_videos + this.videoSourceList = result.player_response.streamingData.formats - this.videoUrl720p = result.player_response.streamingData.formats[1].url + // The response provides a storyboard, however it returns a 403 error. + // Uncomment this line if that ever changes. + // this.videoStoryboardSrc = result.player_response.storyboards.playerStoryboardSpecRenderer.spec + + this.captionSourceList = result.player_response.captions.playerCaptionsTracklistRenderer.captionTracks + this.captionSourceList = this.captionSourceList.map((caption) => { + caption.baseUrl = `${this.invidiousInstance}/api/v1/captions/${this.videoId}?label=${encodeURI(caption.name.simpleText)}` + + return caption + }) + + // TODO: The response returns the captions of the video, however they're returned + // in XML / TTML. I haven't found a way to properly convert this for use. + // There may be another URL that we can use to grab an appropriate format as well. + // Video.js requires that the captions are returned in .vtt format. The below code + // Converts it to .srt which may work, but I can't get the player to accept the data. + + // this.captionSourceList = this.captionSourceList.map((caption) => { + // caption.type = 'application/ttml+xml' + // caption.dataSource = 'local' + // + // $.get(caption.baseUrl, (response) => { + // console.log('response') + // console.log(response) + // console.log() + // xml2srt.Parse(new XMLSerializer().serializeToString(response)) + // .then(srt => { + // caption.track = srt + // }).catch(err => console.log(`Error while converting XML to SRT : ${err}`)) + // }).fail((xhr, textStatus, error) => { + // console.log(xhr) + // console.log(textStatus) + // console.log(error) + // }) + // + // return caption + // }) this.isLoading = false }).catch((err) => { @@ -147,8 +204,13 @@ export default Vue.extend({ this.videoPublished = result.published * 1000 this.videoDescriptionHtml = result.descriptionHtml this.recommendedVideos = result.recommendedVideos - - this.videoUrl720p = result.formatStreams[0].url + this.videoSourceList = result.formatStreams.reverse() + this.captionSourceList = result.captions.map((caption) => { + caption.url = this.invidiousInstance + caption.url + caption.type = '' + caption.dataSource = 'invidious' + return caption + }) this.isLoading = false }).catch((err) => { diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue index a53d29e0..adb1ce62 100644 --- a/src/renderer/views/Watch/Watch.vue +++ b/src/renderer/views/Watch/Watch.vue @@ -6,8 +6,12 @@ />