tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added yt-xml2vtt and did the corresponding implementation

This commit is contained in:
Aasim-A 2020-02-28 06:29:30 +03:00
parent 1d3915b3d2
commit 4fedadcd75
No known key found for this signature in database
GPG Key ID: 9B25F35EE596D8BD
4 changed files with 3615 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@ -33,10 +33,12 @@ module.exports = {
plugins: ['vue'],
rules: {
'vue/no-v-html': "off",
'space-before-function-paren': 0,
'comma-dangle': 0,
'vue/no-v-html': 'off',
'no-console': 0,
'no-unused-vars': 1,
'no-undef': 1,
'vue/no-template-key': 1
'vue/no-template-key': 1,
},
}

3487
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -37,7 +37,7 @@
"youtube-comments-fetch": "^1.0.1",
"youtube-comments-task": "^1.3.14",
"youtube-suggest": "^1.1.0",
"yt-xml2srt": "^1.1.0",
"yt-xml2vtt": "^1.0.0",
"ytdl-core": "^2.0.0",
"ytpl": "^0.1.20",
"ytsr": "^0.1.10"
@ -73,6 +73,7 @@
"fast-glob": "^3.2.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^25.1.0",
"mini-css-extract-plugin": "^0.9.0",
"node-loader": "^0.6.0",
"npm-run-all": "^4.1.5",

119
src/renderer/views/Watch/Watch.js
View File

@ -1,4 +1,6 @@
import Vue from 'vue'
import xml2vtt from 'yt-xml2vtt'
import $ from 'jquery'
import FtLoader from '../../components/ft-loader/ft-loader.vue'
import FtCard from '../../components/ft-card/ft-card.vue'
import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
@ -18,7 +20,7 @@ export default Vue.extend({
'watch-video-info': WatchVideoInfo,
'watch-video-description': WatchVideoDescription,
'watch-video-comments': WatchVideoComments,
'watch-video-recommendations': WatchVideoRecommendations
'watch-video-recommendations': WatchVideoRecommendations,
},
data: function() {
return {
@ -47,7 +49,7 @@ export default Vue.extend({
audioUrl: '',
videoSourceList: [],
captionSourceList: [],
recommendedVideos: []
recommendedVideos: [],
}
},
computed: {
@ -76,12 +78,14 @@ export default Vue.extend({
},
dashSrc: function() {
return [{
return [
{
url: `${this.invidiousInstance}/api/manifest/dash/${this.videoId}.mpd`,
type: 'application/dash+xml',
label: 'Dash'
}]
}
label: 'Dash',
},
]
},
},
watch: {
$route() {
@ -98,7 +102,7 @@ export default Vue.extend({
this.getVideoInformationInvidious(this.videoId)
break
}
}
},
},
mounted: function() {
this.videoId = this.$route.params.id
@ -129,16 +133,20 @@ export default Vue.extend({
this.isLoading = true
}
this.$store.dispatch('ytGetVideoInformation', this.videoId).then((result) => {
console.log(result)
this.$store
.dispatch('ytGetVideoInformation', this.videoId)
.then(result => {
this.videoTitle = result.title
this.videoViewCount = parseInt(result.player_response.videoDetails.viewCount)
this.videoViewCount = parseInt(
result.player_response.videoDetails.viewCount,
10
)
this.channelId = result.author.id
this.channelName = result.author.name
this.channelThumbnail = result.author.avatar
this.videoPublished = result.published
this.videoDescription = result.player_response.videoDetails.shortDescription
this.videoDescription =
result.player_response.videoDetails.shortDescription
this.recommendedVideos = result.related_videos
this.videoSourceList = result.player_response.streamingData.formats
this.videoLikeCount = result.likes
@ -148,48 +156,44 @@ export default Vue.extend({
// 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 =
result.player_response.captions &&
result.player_response.captions.playerCaptionsTracklistRenderer
.captionTracks
if (typeof (this.captionSourceList) !== 'undefined') {
this.captionSourceList = this.captionSourceList.map((caption) => {
caption.baseUrl = `${this.invidiousInstance}/api/v1/captions/${this.videoId}?label=${encodeURI(caption.name.simpleText)}`
if (typeof this.captionSourceList !== 'undefined') {
this.captionSourceList = this.captionSourceList.map(caption => {
caption.type = 'text/vtt'
caption.charset = 'charset=utf-8'
caption.dataSource = 'local'
$.get(caption.baseUrl, response => {
xml2vtt
.Parse(new XMLSerializer().serializeToString(response))
.then(vtt => {
caption.baseUrl = `data:${caption.type};${caption.charset},${vtt}`
})
.catch(err =>
console.log(`Error while converting XML to VTT : ${err}`)
)
}).fail((xhr, textStatus, error) => {
console.log(xhr)
console.log(textStatus)
console.log(error)
})
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) => {
})
.catch(err => {
console.log(err)
if (this.backendPreference === 'local' && this.backendFallback) {
console.log('Error getting data with local backend, falling back to Invidious')
console.log(
'Error getting data with local backend, falling back to Invidious'
)
this.getVideoInformationInvidious()
} else {
this.isLoading = false
@ -203,7 +207,9 @@ export default Vue.extend({
this.isLoading = true
}
this.$store.dispatch('invidiousGetVideoInformation', this.videoId).then((result) => {
this.$store
.dispatch('invidiousGetVideoInformation', this.videoId)
.then(result => {
console.log(result)
this.videoTitle = result.title
@ -218,7 +224,7 @@ export default Vue.extend({
this.videoDescriptionHtml = result.descriptionHtml
this.recommendedVideos = result.recommendedVideos
this.videoSourceList = result.formatStreams.reverse()
this.captionSourceList = result.captions.map((caption) => {
this.captionSourceList = result.captions.map(caption => {
caption.url = this.invidiousInstance + caption.url
caption.type = ''
caption.dataSource = 'invidious'
@ -226,10 +232,13 @@ export default Vue.extend({
})
this.isLoading = false
}).catch((err) => {
})
.catch(err => {
console.log(err)
if (this.backendPreference === 'invidious' && this.backendFallback) {
console.log('Error getting data with Invidious, falling back to local backend')
console.log(
'Error getting data with Invidious, falling back to local backend'
)
this.getVideoInformationLocal()
} else {
this.isLoading = false
@ -246,7 +255,9 @@ export default Vue.extend({
this.activeFormat = 'dash'
this.hidePlayer = true
setTimeout(() => { this.hidePlayer = false }, 100)
setTimeout(() => {
this.hidePlayer = false
}, 100)
},
enableLegacyFormat: function() {
@ -266,12 +277,14 @@ export default Vue.extend({
console.log(error)
if (error.code === 4) {
if (this.activeFormat === 'dash') {
console.log('Unable to play dash formats. Reverting to legacy formats...')
console.log(
'Unable to play dash formats. Reverting to legacy formats...'
)
this.enableLegacyFormat()
} else {
this.enableDashFormat()
}
}
}
}
},
},
})