mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2024-12-28 04:55:06 +01:00
Allow Switching between Dash and Legacy formats
This commit is contained in:
parent
4dc8eab9b8
commit
06f3839515
124
package-lock.json
generated
124
package-lock.json
generated
@ -3692,8 +3692,7 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.0.tgz",
|
||||
"integrity": "sha512-OElxJ1lUSinuoUnkpOgLmxp0DC4ytEhODEL6QJU0NpxE/mI4rUSh8h1P1Wkvfi3xQEBcxXR2gBIPNYNuaFcAbQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"boxen": {
|
||||
"version": "4.2.0",
|
||||
@ -7477,8 +7476,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -7499,14 +7497,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -7521,20 +7517,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -7651,8 +7644,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -7664,7 +7656,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -7679,7 +7670,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -7687,14 +7677,12 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -7713,7 +7701,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -7794,8 +7781,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -7807,7 +7793,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -7893,8 +7878,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -7930,7 +7914,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -7950,7 +7933,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -7994,14 +7976,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -14518,86 +14498,6 @@
|
||||
"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",
|
||||
|
@ -16,16 +16,20 @@ export default Vue.extend({
|
||||
'ft-card': FtCard
|
||||
},
|
||||
props: {
|
||||
sourceList: {
|
||||
type: Array,
|
||||
format: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
sourceList: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
dashSrc: {
|
||||
type: Object,
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
hlsSrc: {
|
||||
type: Object,
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
captionList: {
|
||||
@ -126,7 +130,7 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
determineFormatType: function () {
|
||||
if (this.hlsSrc === null && this.dashSrc !== null && this.videoFormatPreference === 'dash') {
|
||||
if (this.format === 'dash') {
|
||||
this.enableDashFormat()
|
||||
} else {
|
||||
this.enableLegacyFormat()
|
||||
@ -139,14 +143,10 @@ export default Vue.extend({
|
||||
return
|
||||
}
|
||||
|
||||
console.log('using dash format')
|
||||
|
||||
this.useDash = true
|
||||
this.useHls = false
|
||||
this.activeSourceList = this.dashSrc
|
||||
|
||||
console.log(this.activeSourceList)
|
||||
|
||||
setTimeout(this.initializePlayer, 1000)
|
||||
},
|
||||
|
||||
@ -156,8 +156,6 @@ export default Vue.extend({
|
||||
return
|
||||
}
|
||||
|
||||
console.log('using legacy format')
|
||||
|
||||
this.useDash = false
|
||||
this.useHls = false
|
||||
this.activeSourceList = this.sourceList
|
||||
|
@ -125,6 +125,20 @@ export default Vue.extend({
|
||||
console.log('TODO: Handle subscription logic')
|
||||
},
|
||||
|
||||
handleFormatChange: function (format) {
|
||||
console.log('Handling share')
|
||||
console.log(this)
|
||||
|
||||
switch (format) {
|
||||
case 'dash':
|
||||
this.$parent.enableDashFormat()
|
||||
break
|
||||
case 'legacy':
|
||||
this.$parent.enableLegacyFormat()
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
handleShare: function (method) {
|
||||
console.log('Handling share')
|
||||
|
||||
|
@ -37,6 +37,7 @@
|
||||
:label-names="formatTypeNames"
|
||||
:label-values="formatTypeValues"
|
||||
class="formatTypeDropdown"
|
||||
@click="handleFormatChange"
|
||||
/>
|
||||
<ft-list-dropdown
|
||||
:title="shareLabel"
|
||||
|
@ -10,7 +10,7 @@ const settingsDb = new Datastore({
|
||||
const state = {
|
||||
listType: 'grid',
|
||||
invidiousInstance: 'https://invidio.us',
|
||||
backendPreference: 'invidious',
|
||||
backendPreference: 'local',
|
||||
useClickBaitRemover: true,
|
||||
clickBaitRemoverPreference: '',
|
||||
backendFallback: true,
|
||||
|
@ -29,6 +29,8 @@ export default Vue.extend({
|
||||
showLegacyPlayer: false,
|
||||
showYouTubeNoCookieEmbed: false,
|
||||
proxyVideos: false,
|
||||
hidePlayer: false,
|
||||
activeFormat: 'legacy',
|
||||
videoId: '',
|
||||
videoTitle: '',
|
||||
videoDescription: '',
|
||||
@ -61,6 +63,10 @@ export default Vue.extend({
|
||||
return this.$store.getters.getInvidiousInstance
|
||||
},
|
||||
|
||||
videoFormatPreference: function () {
|
||||
return this.$store.getters.getVideoFormatPreference
|
||||
},
|
||||
|
||||
videoDashUrl: function () {
|
||||
return `${this.invidiousInstance}/api/manifest/dash/id/${this.videoId}.mpd`
|
||||
},
|
||||
@ -70,11 +76,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
dashSrc: function () {
|
||||
return {
|
||||
return [{
|
||||
url: `${this.invidiousInstance}/api/manifest/dash/${this.videoId}.mpd`,
|
||||
type: 'application/dash+xml',
|
||||
label: 'Dash'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -98,6 +104,8 @@ export default Vue.extend({
|
||||
this.videoId = this.$route.params.id
|
||||
this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90`
|
||||
|
||||
this.activeFormat = this.videoFormatPreference
|
||||
|
||||
if (this.proxyVideos) {
|
||||
this.dashSrc = this.dashSrc + '?local=true'
|
||||
}
|
||||
@ -223,6 +231,20 @@ export default Vue.extend({
|
||||
// TODO: Show toast with error message
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
enableDashFormat: function () {
|
||||
this.activeFormat = 'dash'
|
||||
this.hidePlayer = true
|
||||
|
||||
setTimeout(() => { this.hidePlayer = false }, 100)
|
||||
},
|
||||
|
||||
enableLegacyFormat: function () {
|
||||
this.activeFormat = 'legacy'
|
||||
this.hidePlayer = true
|
||||
|
||||
setTimeout(() => { this.hidePlayer = false }, 100)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -5,13 +5,15 @@
|
||||
:fullscreen="true"
|
||||
/>
|
||||
<ft-video-player
|
||||
v-if="!isLoading"
|
||||
v-if="!isLoading && !hidePlayer"
|
||||
:dash-src="dashSrc"
|
||||
:source-list="videoSourceList"
|
||||
:caption-list="captionSourceList"
|
||||
:storyboard-src="videoStoryboardSrc"
|
||||
:format="activeFormat"
|
||||
class="videoPlayer"
|
||||
:class="{ theatrePlayer: useTheatreMode }"
|
||||
ref="videoPlayer"
|
||||
/>
|
||||
<watch-video-info
|
||||
v-if="!isLoading"
|
||||
|
Loading…
Reference in New Issue
Block a user