mirror of https://github.com/FreeTubeApp/FreeTube
128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
import { defineComponent } from 'vue'
|
|
import FtShareButton from '../ft-share-button/ft-share-button.vue'
|
|
import { copyToClipboard, formatNumber, openExternalLink } from '../../helpers/utils'
|
|
|
|
export default defineComponent({
|
|
name: 'PlaylistInfo',
|
|
components: {
|
|
'ft-share-button': FtShareButton
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
id: '',
|
|
firstVideoId: '',
|
|
playlistThumbnail: '',
|
|
title: '',
|
|
channelThumbnail: '',
|
|
channelName: '',
|
|
channelId: null,
|
|
videoCount: 0,
|
|
viewCount: 0,
|
|
lastUpdated: '',
|
|
description: '',
|
|
infoSource: ''
|
|
}
|
|
},
|
|
computed: {
|
|
hideSharingActions: function() {
|
|
return this.$store.getters.getHideSharingActions
|
|
},
|
|
|
|
currentInvidiousInstance: function () {
|
|
return this.$store.getters.getCurrentInvidiousInstance
|
|
},
|
|
|
|
thumbnailPreference: function () {
|
|
return this.$store.getters.getThumbnailPreference
|
|
},
|
|
|
|
blurThumbnails: function () {
|
|
return this.$store.getters.getBlurThumbnails
|
|
},
|
|
|
|
blurThumbnailsStyle: function () {
|
|
return this.blurThumbnails ? 'blur(20px)' : null
|
|
},
|
|
|
|
backendPreference: function () {
|
|
return this.$store.getters.getBackendPreference
|
|
},
|
|
|
|
hideViews: function () {
|
|
return this.$store.getters.getHideVideoViews
|
|
},
|
|
|
|
thumbnail: function () {
|
|
if (this.thumbnailPreference === 'hidden') {
|
|
return require('../../assets/img/thumbnail_placeholder.svg')
|
|
}
|
|
let baseUrl
|
|
if (this.backendPreference === 'invidious') {
|
|
baseUrl = this.currentInvidiousInstance
|
|
} else {
|
|
return this.data.playlistThumbnail
|
|
}
|
|
|
|
switch (this.thumbnailPreference) {
|
|
case 'start':
|
|
return `${baseUrl}/vi/${this.firstVideoId}/mq1.jpg`
|
|
case 'middle':
|
|
return `${baseUrl}/vi/${this.firstVideoId}/mq2.jpg`
|
|
case 'end':
|
|
return `${baseUrl}/vi/${this.firstVideoId}/mq3.jpg`
|
|
default:
|
|
return `${baseUrl}/vi/${this.firstVideoId}/mqdefault.jpg`
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.id = this.data.id
|
|
this.firstVideoId = this.data.firstVideoId
|
|
this.title = this.data.title
|
|
this.channelName = this.data.channelName
|
|
this.channelThumbnail = this.data.channelThumbnail
|
|
this.channelId = this.data.channelId
|
|
this.uploadedTime = this.data.uploaded_at
|
|
this.description = this.data.description
|
|
this.infoSource = this.data.infoSource
|
|
|
|
// Causes errors if not put inside of a check
|
|
if (typeof (this.data.viewCount) !== 'undefined' && !isNaN(this.data.viewCount)) {
|
|
this.viewCount = this.hideViews ? null : formatNumber(this.data.viewCount)
|
|
}
|
|
|
|
if (typeof (this.data.videoCount) !== 'undefined' && !isNaN(this.data.videoCount)) {
|
|
this.videoCount = formatNumber(this.data.videoCount)
|
|
}
|
|
|
|
this.lastUpdated = this.data.lastUpdated
|
|
},
|
|
methods: {
|
|
sharePlaylist: function (method) {
|
|
const youtubeUrl = `https://youtube.com/playlist?list=${this.id}`
|
|
const invidiousUrl = `${this.currentInvidiousInstance}/playlist?list=${this.id}`
|
|
|
|
switch (method) {
|
|
case 'copyYoutube':
|
|
copyToClipboard(youtubeUrl, { messageOnSuccess: this.$t('Share.YouTube URL copied to clipboard') })
|
|
break
|
|
case 'openYoutube':
|
|
openExternalLink(youtubeUrl)
|
|
break
|
|
case 'copyInvidious':
|
|
copyToClipboard(invidiousUrl, { messageOnSuccess: this.$t('Share.Invidious URL copied to clipboard') })
|
|
break
|
|
case 'openInvidious':
|
|
openExternalLink(invidiousUrl)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
})
|