mirror of
https://github.com/mmjee/Piped-Material.git
synced 2024-12-06 19:26:36 +01:00
Reformat
This commit is contained in:
root
@@ -47,50 +47,50 @@
|
||||
import { AuthenticationError } from '@/store/authentication-store'
|
||||
|
||||
export default {
|
||||
name: 'AuthenticationModal',
|
||||
props: ['listMode'],
|
||||
data: () => ({
|
||||
error: null,
|
||||
requestInProgress: false,
|
||||
dialogOpen: false,
|
||||
username: '',
|
||||
password: ''
|
||||
}),
|
||||
methods: {
|
||||
async doCall (path) {
|
||||
this.error = null
|
||||
try {
|
||||
this.requestInProgress = true
|
||||
await this.$store.dispatch('auth/loginOrRegister', {
|
||||
path,
|
||||
username: this.username,
|
||||
password: this.password
|
||||
})
|
||||
this.dialogOpen = false
|
||||
} catch (e) {
|
||||
if (!(e instanceof AuthenticationError)) {
|
||||
throw e
|
||||
}
|
||||
name: 'AuthenticationModal',
|
||||
props: ['listMode'],
|
||||
data: () => ({
|
||||
error: null,
|
||||
requestInProgress: false,
|
||||
dialogOpen: false,
|
||||
username: '',
|
||||
password: ''
|
||||
}),
|
||||
methods: {
|
||||
async doCall (path) {
|
||||
this.error = null
|
||||
try {
|
||||
this.requestInProgress = true
|
||||
await this.$store.dispatch('auth/loginOrRegister', {
|
||||
path,
|
||||
username: this.username,
|
||||
password: this.password
|
||||
})
|
||||
this.dialogOpen = false
|
||||
} catch (e) {
|
||||
if (!(e instanceof AuthenticationError)) {
|
||||
throw e
|
||||
}
|
||||
|
||||
this.error = e.message
|
||||
} finally {
|
||||
this.requestInProgress = false
|
||||
}
|
||||
},
|
||||
this.error = e.message
|
||||
} finally {
|
||||
this.requestInProgress = false
|
||||
}
|
||||
},
|
||||
|
||||
logOut () {
|
||||
this.$store.commit('auth/deleteAuthToken', {
|
||||
apiURL: this.$store.getters['prefs/apiUrl']
|
||||
})
|
||||
},
|
||||
logOut () {
|
||||
this.$store.commit('auth/deleteAuthToken', {
|
||||
apiURL: this.$store.getters['prefs/apiUrl']
|
||||
})
|
||||
},
|
||||
|
||||
login () {
|
||||
return this.doCall('login')
|
||||
},
|
||||
login () {
|
||||
return this.doCall('login')
|
||||
},
|
||||
|
||||
register () {
|
||||
return this.doCall('register')
|
||||
}
|
||||
}
|
||||
register () {
|
||||
return this.doCall('register')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
error: String,
|
||||
message: String
|
||||
},
|
||||
data: () => ({
|
||||
showStacktrace: false
|
||||
})
|
||||
props: {
|
||||
error: String,
|
||||
message: String
|
||||
},
|
||||
data: () => ({
|
||||
showStacktrace: false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,16 +13,16 @@
|
||||
import { LibPiped } from '@/tools/libpiped'
|
||||
|
||||
export default {
|
||||
name: 'ExpandableDate',
|
||||
props: ['date'],
|
||||
computed: {
|
||||
timeAgo () {
|
||||
return LibPiped.timeAgo(this.date)
|
||||
},
|
||||
name: 'ExpandableDate',
|
||||
props: ['date'],
|
||||
computed: {
|
||||
timeAgo () {
|
||||
return LibPiped.timeAgo(this.date)
|
||||
},
|
||||
|
||||
formattedDate () {
|
||||
return LibPiped.formatFullDate(this.date)
|
||||
}
|
||||
}
|
||||
formattedDate () {
|
||||
return LibPiped.formatFullDate(this.date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -22,16 +22,16 @@
|
||||
import { isNumber } from 'lodash-es'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
item: Object,
|
||||
height: Number,
|
||||
width: Number,
|
||||
hideChannel: Boolean
|
||||
},
|
||||
methods: {
|
||||
isNumber (...args) {
|
||||
return isNumber(...args)
|
||||
}
|
||||
}
|
||||
props: {
|
||||
item: Object,
|
||||
height: Number,
|
||||
width: Number,
|
||||
hideChannel: Boolean
|
||||
},
|
||||
methods: {
|
||||
isNumber (...args) {
|
||||
return isNumber(...args)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+271
-271
@@ -43,310 +43,310 @@ import { setupKeybindings } from '@/plugins/keybindings'
|
||||
window.muxjs = muxjs
|
||||
|
||||
export default {
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
skipToTime: Number,
|
||||
selectedAutoLoop: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
$player: null,
|
||||
$ui: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldAutoPlay () {
|
||||
return this.$store.getters['prefs/getPreferenceBoolean']('playerAutoPlay', true)
|
||||
},
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
skipToTime: Number,
|
||||
selectedAutoLoop: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
$player: null,
|
||||
$ui: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldAutoPlay () {
|
||||
return this.$store.getters['prefs/getPreferenceBoolean']('playerAutoPlay', true)
|
||||
},
|
||||
|
||||
preferredVideoCodecs () {
|
||||
const preferredVideoCodecs = []
|
||||
if (this.$refs.videoEl.canPlayType('video/mp4; codecs="av01.0.08M.08"') !== '') { preferredVideoCodecs.push('av01') }
|
||||
if (this.$refs.videoEl.canPlayType('video/webm; codecs="vp9"') !== '') preferredVideoCodecs.push('vp9')
|
||||
if (this.$refs.videoEl.canPlayType('video/mp4; codecs="avc1.4d401f"') !== '') { preferredVideoCodecs.push('avc1') }
|
||||
return preferredVideoCodecs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentTime () {
|
||||
// UNCLEAN
|
||||
return this.$refs.videoEl ? this.$refs.videoEl.currentTime : undefined
|
||||
},
|
||||
preferredVideoCodecs () {
|
||||
const preferredVideoCodecs = []
|
||||
if (this.$refs.videoEl.canPlayType('video/mp4; codecs="av01.0.08M.08"') !== '') { preferredVideoCodecs.push('av01') }
|
||||
if (this.$refs.videoEl.canPlayType('video/webm; codecs="vp9"') !== '') preferredVideoCodecs.push('vp9')
|
||||
if (this.$refs.videoEl.canPlayType('video/mp4; codecs="avc1.4d401f"') !== '') { preferredVideoCodecs.push('avc1') }
|
||||
return preferredVideoCodecs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentTime () {
|
||||
// UNCLEAN
|
||||
return this.$refs.videoEl ? this.$refs.videoEl.currentTime : undefined
|
||||
},
|
||||
|
||||
async loadVideo () {
|
||||
console.log('PIPED | LOADING VIDEO')
|
||||
const component = this
|
||||
const videoEl = this.$refs.videoEl
|
||||
async loadVideo () {
|
||||
console.log('PIPED | LOADING VIDEO')
|
||||
const component = this
|
||||
const videoEl = this.$refs.videoEl
|
||||
|
||||
videoEl.setAttribute('poster', this.video.thumbnailUrl)
|
||||
videoEl.setAttribute('poster', this.video.thumbnailUrl)
|
||||
|
||||
if (this.skipToTime != null) videoEl.currentTime = this.skipToTime
|
||||
if (this.skipToTime != null) videoEl.currentTime = this.skipToTime
|
||||
|
||||
const noPrevPlayer = !this.$player
|
||||
const noPrevPlayer = !this.$player
|
||||
|
||||
const streams = []
|
||||
const streams = []
|
||||
|
||||
streams.push(...this.video.audioStreams)
|
||||
streams.push(...this.video.videoStreams)
|
||||
streams.push(...this.video.audioStreams)
|
||||
streams.push(...this.video.videoStreams)
|
||||
|
||||
const MseSupport = window.MediaSource !== undefined
|
||||
const lbry = this.$store.getters['prefs/getPreferenceBoolean']('disableLBRY', true)
|
||||
? null
|
||||
: this.video.videoStreams.filter(stream => stream.quality === 'LBRY')[0]
|
||||
let uri, mime
|
||||
const MseSupport = window.MediaSource !== undefined
|
||||
const lbry = this.$store.getters['prefs/getPreferenceBoolean']('disableLBRY', true)
|
||||
? null
|
||||
: this.video.videoStreams.filter(stream => stream.quality === 'LBRY')[0]
|
||||
let uri, mime
|
||||
|
||||
if (this.video.livestream) {
|
||||
uri = this.video.hls
|
||||
mime = 'application/x-mpegURL'
|
||||
} else if (this.video.audioStreams.length > 0 && !lbry && MseSupport) {
|
||||
if (!this.video.dash) {
|
||||
const dash = DashUtils.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration
|
||||
)
|
||||
uri = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash)
|
||||
} else {
|
||||
uri = this.video.dash
|
||||
}
|
||||
mime = 'application/dash+xml'
|
||||
} else if (lbry) {
|
||||
uri = lbry.url
|
||||
if (this.$store.getters['prefs/getPreferenceBoolean']('proxyLBRY', true)) {
|
||||
const url = new URL(uri)
|
||||
url.searchParams.set('host', url.host)
|
||||
url.host = new URL(this.video.proxyUrl).host
|
||||
uri = url.toString()
|
||||
}
|
||||
mime = await fetch(uri, {
|
||||
method: 'HEAD'
|
||||
}).then(response => response.headers.get('Content-Type'))
|
||||
} else if (this.video.hls) {
|
||||
uri = this.video.hls
|
||||
mime = 'application/x-mpegURL'
|
||||
} else {
|
||||
uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url
|
||||
}
|
||||
if (this.video.livestream) {
|
||||
uri = this.video.hls
|
||||
mime = 'application/x-mpegURL'
|
||||
} else if (this.video.audioStreams.length > 0 && !lbry && MseSupport) {
|
||||
if (!this.video.dash) {
|
||||
const dash = DashUtils.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration
|
||||
)
|
||||
uri = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash)
|
||||
} else {
|
||||
uri = this.video.dash
|
||||
}
|
||||
mime = 'application/dash+xml'
|
||||
} else if (lbry) {
|
||||
uri = lbry.url
|
||||
if (this.$store.getters['prefs/getPreferenceBoolean']('proxyLBRY', true)) {
|
||||
const url = new URL(uri)
|
||||
url.searchParams.set('host', url.host)
|
||||
url.host = new URL(this.video.proxyUrl).host
|
||||
uri = url.toString()
|
||||
}
|
||||
mime = await fetch(uri, {
|
||||
method: 'HEAD'
|
||||
}).then(response => response.headers.get('Content-Type'))
|
||||
} else if (this.video.hls) {
|
||||
uri = this.video.hls
|
||||
mime = 'application/x-mpegURL'
|
||||
} else {
|
||||
uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url
|
||||
}
|
||||
|
||||
if (noPrevPlayer) {
|
||||
shaka.polyfill.installAll()
|
||||
if (noPrevPlayer) {
|
||||
shaka.polyfill.installAll()
|
||||
|
||||
const localPlayer = new shaka.Player(videoEl)
|
||||
const proxyHost = new URL(component.video.proxyUrl).host
|
||||
const localPlayer = new shaka.Player(videoEl)
|
||||
const proxyHost = new URL(component.video.proxyUrl).host
|
||||
|
||||
localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
|
||||
const uri = request.uris[0]
|
||||
const url = new URL(uri)
|
||||
const headers = request.headers
|
||||
if (
|
||||
url.host.endsWith('.googlevideo.com') ||
|
||||
localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
|
||||
const uri = request.uris[0]
|
||||
const url = new URL(uri)
|
||||
const headers = request.headers
|
||||
if (
|
||||
url.host.endsWith('.googlevideo.com') ||
|
||||
(url.host.endsWith('.lbryplayer.xyz') && (this.$store.getters['prefs/getPreferenceBoolean']('proxyLBRY', true) || headers.Range))
|
||||
) {
|
||||
url.searchParams.set('host', url.host)
|
||||
url.host = proxyHost
|
||||
request.uris[0] = url.toString()
|
||||
}
|
||||
) {
|
||||
url.searchParams.set('host', url.host)
|
||||
url.host = proxyHost
|
||||
request.uris[0] = url.toString()
|
||||
}
|
||||
|
||||
if (url.pathname === '/videoplayback') {
|
||||
if (headers.Range) {
|
||||
url.searchParams.set('range', headers.Range.split('=')[1])
|
||||
request.headers = {}
|
||||
request.uris[0] = url.toString()
|
||||
}
|
||||
}
|
||||
})
|
||||
if (url.pathname === '/videoplayback') {
|
||||
if (headers.Range) {
|
||||
url.searchParams.set('range', headers.Range.split('=')[1])
|
||||
request.headers = {}
|
||||
request.uris[0] = url.toString()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
localPlayer.configure(
|
||||
'streaming.bufferingGoal',
|
||||
this.$store.getters['prefs/getPreferenceNumber']('bufferGoal', 10)
|
||||
)
|
||||
localPlayer.configure(
|
||||
'streaming.bufferingGoal',
|
||||
this.$store.getters['prefs/getPreferenceNumber']('bufferGoal', 10)
|
||||
)
|
||||
|
||||
this.setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka)
|
||||
} else this.setPlayerAttrs(this.$player, videoEl, uri, mime, shaka)
|
||||
this.setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka)
|
||||
} else this.setPlayerAttrs(this.$player, videoEl, uri, mime, shaka)
|
||||
|
||||
if (noPrevPlayer) {
|
||||
videoEl.addEventListener('timeupdate', (ev) => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = videoEl.currentTime
|
||||
this.sponsors.segments.forEach(segment => {
|
||||
if (!segment.skipped || this.selectedAutoLoop) {
|
||||
const end = segment.segment[1]
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
console.log('Skipped segment at ' + time)
|
||||
videoEl.currentTime = end
|
||||
segment.skipped = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$emit('timeupdate', ev)
|
||||
})
|
||||
if (noPrevPlayer) {
|
||||
videoEl.addEventListener('timeupdate', (ev) => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = videoEl.currentTime
|
||||
this.sponsors.segments.forEach(segment => {
|
||||
if (!segment.skipped || this.selectedAutoLoop) {
|
||||
const end = segment.segment[1]
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
console.log('Skipped segment at ' + time)
|
||||
videoEl.currentTime = end
|
||||
segment.skipped = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$emit('timeupdate', ev)
|
||||
})
|
||||
|
||||
videoEl.addEventListener('volumechange', () => {
|
||||
this.$store.commit('prefs/setPrefs', {
|
||||
id: 'volume',
|
||||
value: videoEl.volume
|
||||
})
|
||||
})
|
||||
videoEl.addEventListener('volumechange', () => {
|
||||
this.$store.commit('prefs/setPrefs', {
|
||||
id: 'volume',
|
||||
value: videoEl.volume
|
||||
})
|
||||
})
|
||||
|
||||
videoEl.addEventListener('ratechange', () => {
|
||||
this.$store.commit('prefs/setPrefs', {
|
||||
id: 'rate',
|
||||
value: videoEl.playbackRate
|
||||
})
|
||||
})
|
||||
videoEl.addEventListener('ratechange', () => {
|
||||
this.$store.commit('prefs/setPrefs', {
|
||||
id: 'rate',
|
||||
value: videoEl.playbackRate
|
||||
})
|
||||
})
|
||||
|
||||
videoEl.addEventListener('ended', () => {
|
||||
this.$emit('videoEnded')
|
||||
})
|
||||
}
|
||||
videoEl.addEventListener('ended', () => {
|
||||
this.$emit('videoEnded')
|
||||
})
|
||||
}
|
||||
|
||||
// TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
},
|
||||
setPlayerAttrs (localPlayer, videoEl, uri, mime, shaka) {
|
||||
if (!this.$ui) {
|
||||
this.$ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
|
||||
// TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
},
|
||||
setPlayerAttrs (localPlayer, videoEl, uri, mime, shaka) {
|
||||
if (!this.$ui) {
|
||||
this.$ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: ['quality', 'captions', 'picture_in_picture', 'playback_rate'],
|
||||
seekBarColors: {
|
||||
base: 'rgba(255, 255, 255, 0.3)',
|
||||
buffered: 'rgba(255, 255, 255, 0.54)',
|
||||
played: 'rgb(255, 0, 0)'
|
||||
}
|
||||
}
|
||||
const config = {
|
||||
overflowMenuButtons: ['quality', 'captions', 'picture_in_picture', 'playback_rate'],
|
||||
seekBarColors: {
|
||||
base: 'rgba(255, 255, 255, 0.3)',
|
||||
buffered: 'rgba(255, 255, 255, 0.54)',
|
||||
played: 'rgb(255, 0, 0)'
|
||||
}
|
||||
}
|
||||
|
||||
this.$ui.configure(config)
|
||||
}
|
||||
this.$ui.configure(config)
|
||||
}
|
||||
|
||||
const player = this.$ui.getControls().getPlayer()
|
||||
const player = this.$ui.getControls().getPlayer()
|
||||
|
||||
this.$player = player
|
||||
this.$player = player
|
||||
|
||||
const disableVideo = this.$store.getters['prefs/getPreferenceBoolean']('listen', false) && !this.video.livestream
|
||||
const disableVideo = this.$store.getters['prefs/getPreferenceBoolean']('listen', false) && !this.video.livestream
|
||||
|
||||
this.$player.configure({
|
||||
preferredVideoCodecs: this.preferredVideoCodecs,
|
||||
preferredAudioCodecs: ['opus', 'mp4a'],
|
||||
manifest: {
|
||||
disableVideo: disableVideo,
|
||||
hls: {
|
||||
useFullSegmentsForStartTime: true
|
||||
}
|
||||
},
|
||||
streaming: {
|
||||
useNativeHlsOnSafari: false
|
||||
}
|
||||
})
|
||||
this.$player.configure({
|
||||
preferredVideoCodecs: this.preferredVideoCodecs,
|
||||
preferredAudioCodecs: ['opus', 'mp4a'],
|
||||
manifest: {
|
||||
disableVideo: disableVideo,
|
||||
hls: {
|
||||
useFullSegmentsForStartTime: true
|
||||
}
|
||||
},
|
||||
streaming: {
|
||||
useNativeHlsOnSafari: false
|
||||
}
|
||||
})
|
||||
|
||||
const quality = this.$store.getters['prefs/getPreferenceNumber']('quality', 0)
|
||||
const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
|
||||
if (qualityConds) this.$player.configure('abr.enabled', false)
|
||||
const quality = this.$store.getters['prefs/getPreferenceNumber']('quality', 0)
|
||||
const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
|
||||
if (qualityConds) this.$player.configure('abr.enabled', false)
|
||||
|
||||
player.load(uri, 0, mime).then(() => {
|
||||
if (qualityConds) {
|
||||
let leastDiff = Number.MAX_VALUE
|
||||
let bestStream = null
|
||||
player
|
||||
.getVariantTracks()
|
||||
.sort((a, b) => a.bandwidth - b.bandwidth)
|
||||
.forEach(stream => {
|
||||
const diff = Math.abs(quality - stream.height)
|
||||
if (diff < leastDiff) {
|
||||
leastDiff = diff
|
||||
bestStream = stream
|
||||
}
|
||||
})
|
||||
player.selectVariantTrack(bestStream)
|
||||
}
|
||||
player.load(uri, 0, mime).then(() => {
|
||||
if (qualityConds) {
|
||||
let leastDiff = Number.MAX_VALUE
|
||||
let bestStream = null
|
||||
player
|
||||
.getVariantTracks()
|
||||
.sort((a, b) => a.bandwidth - b.bandwidth)
|
||||
.forEach(stream => {
|
||||
const diff = Math.abs(quality - stream.height)
|
||||
if (diff < leastDiff) {
|
||||
leastDiff = diff
|
||||
bestStream = stream
|
||||
}
|
||||
})
|
||||
player.selectVariantTrack(bestStream)
|
||||
}
|
||||
|
||||
this.video.subtitles.forEach(subtitle => {
|
||||
player.addTextTrackAsync(
|
||||
subtitle.url,
|
||||
subtitle.code,
|
||||
'SUBTITLE',
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
subtitle.name
|
||||
)
|
||||
})
|
||||
videoEl.volume = this.$store.getters['prefs/getPreferenceNumber']('volume', 1)
|
||||
player.trickPlay(this.$store.getters['prefs/getPreferenceNumber']('rate', 1))
|
||||
})
|
||||
}
|
||||
},
|
||||
this.video.subtitles.forEach(subtitle => {
|
||||
player.addTextTrackAsync(
|
||||
subtitle.url,
|
||||
subtitle.code,
|
||||
'SUBTITLE',
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
subtitle.name
|
||||
)
|
||||
})
|
||||
videoEl.volume = this.$store.getters['prefs/getPreferenceNumber']('volume', 1)
|
||||
player.trickPlay(this.$store.getters['prefs/getPreferenceNumber']('rate', 1))
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'video.videoId' () {
|
||||
this.loadVideo()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'video.videoId' () {
|
||||
this.loadVideo()
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.loadVideo()
|
||||
const self = this
|
||||
const videoEl = self.$refs.videoEl
|
||||
const onSpace = (e) => {
|
||||
if (videoEl.paused) videoEl.play()
|
||||
else videoEl.pause()
|
||||
e.preventDefault()
|
||||
}
|
||||
mounted () {
|
||||
this.loadVideo()
|
||||
const self = this
|
||||
const videoEl = self.$refs.videoEl
|
||||
const onSpace = (e) => {
|
||||
if (videoEl.paused) videoEl.play()
|
||||
else videoEl.pause()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
this.unsubToKeybindings = setupKeybindings(window, {
|
||||
f (e) {
|
||||
if (document.fullscreenElement) document.exitFullscreen()
|
||||
else self.$refs.container.requestFullscreen()
|
||||
e.preventDefault()
|
||||
},
|
||||
m (e) {
|
||||
videoEl.muted = !videoEl.muted
|
||||
e.preventDefault()
|
||||
},
|
||||
j (e) {
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0)
|
||||
e.preventDefault()
|
||||
},
|
||||
l (e) {
|
||||
videoEl.currentTime = videoEl.currentTime + 15
|
||||
e.preventDefault()
|
||||
},
|
||||
c (e) {
|
||||
self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible())
|
||||
e.preventDefault()
|
||||
},
|
||||
Space: onSpace,
|
||||
k: onSpace,
|
||||
ArrowUp (e) {
|
||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1)
|
||||
e.preventDefault()
|
||||
},
|
||||
ArrowDown (e) {
|
||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0)
|
||||
e.preventDefault()
|
||||
},
|
||||
ArrowLeft (e) {
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0)
|
||||
e.preventDefault()
|
||||
},
|
||||
ArrowRight (e) {
|
||||
videoEl.currentTime = videoEl.currentTime + 5
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
},
|
||||
this.unsubToKeybindings = setupKeybindings(window, {
|
||||
f (e) {
|
||||
if (document.fullscreenElement) document.exitFullscreen()
|
||||
else self.$refs.container.requestFullscreen()
|
||||
e.preventDefault()
|
||||
},
|
||||
m (e) {
|
||||
videoEl.muted = !videoEl.muted
|
||||
e.preventDefault()
|
||||
},
|
||||
j (e) {
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0)
|
||||
e.preventDefault()
|
||||
},
|
||||
l (e) {
|
||||
videoEl.currentTime = videoEl.currentTime + 15
|
||||
e.preventDefault()
|
||||
},
|
||||
c (e) {
|
||||
self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible())
|
||||
e.preventDefault()
|
||||
},
|
||||
Space: onSpace,
|
||||
k: onSpace,
|
||||
ArrowUp (e) {
|
||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1)
|
||||
e.preventDefault()
|
||||
},
|
||||
ArrowDown (e) {
|
||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0)
|
||||
e.preventDefault()
|
||||
},
|
||||
ArrowLeft (e) {
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0)
|
||||
e.preventDefault()
|
||||
},
|
||||
ArrowRight (e) {
|
||||
videoEl.currentTime = videoEl.currentTime + 5
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
if (this.$ui) {
|
||||
this.$ui.destroy()
|
||||
this.$ui = undefined
|
||||
this.$player = undefined
|
||||
}
|
||||
if (this.$player) {
|
||||
this.$player.destroy()
|
||||
this.$player = undefined
|
||||
}
|
||||
this.unsubToKeybindings()
|
||||
this.$refs.container.querySelectorAll('div').forEach(node => node.remove())
|
||||
}
|
||||
beforeDestroy () {
|
||||
if (this.$ui) {
|
||||
this.$ui.destroy()
|
||||
this.$ui = undefined
|
||||
this.$player = undefined
|
||||
}
|
||||
if (this.$player) {
|
||||
this.$player.destroy()
|
||||
this.$player = undefined
|
||||
}
|
||||
this.unsubToKeybindings()
|
||||
this.$refs.container.querySelectorAll('div').forEach(node => node.remove())
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -9,52 +9,52 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['channelId'],
|
||||
data: () => ({
|
||||
showButtons: false,
|
||||
subscribed: false
|
||||
}),
|
||||
props: ['channelId'],
|
||||
data: () => ({
|
||||
showButtons: false,
|
||||
subscribed: false
|
||||
}),
|
||||
|
||||
methods: {
|
||||
async checkStatus () {
|
||||
this.showButtons = false
|
||||
if (!(this.channelId && this.isAuthenticated)) {
|
||||
return
|
||||
}
|
||||
methods: {
|
||||
async checkStatus () {
|
||||
this.showButtons = false
|
||||
if (!(this.channelId && this.isAuthenticated)) {
|
||||
return
|
||||
}
|
||||
|
||||
const resp = await this.$store.dispatch('auth/makeRequest', {
|
||||
path: '/subscribed',
|
||||
params: {
|
||||
channelId: this.channelId
|
||||
}
|
||||
})
|
||||
const resp = await this.$store.dispatch('auth/makeRequest', {
|
||||
path: '/subscribed',
|
||||
params: {
|
||||
channelId: this.channelId
|
||||
}
|
||||
})
|
||||
|
||||
this.subscribed = resp.subscribed
|
||||
this.showButtons = true
|
||||
},
|
||||
this.subscribed = resp.subscribed
|
||||
this.showButtons = true
|
||||
},
|
||||
|
||||
async subscribeHandler () {
|
||||
await this.$store.dispatch('auth/makeRequest', {
|
||||
method: 'POST',
|
||||
path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
|
||||
data: {
|
||||
channelId: this.channelId
|
||||
}
|
||||
})
|
||||
this.subscribed = !this.subscribed
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isAuthenticated () {
|
||||
return this.$store.getters['auth/isCurrentlyAuthenticated']
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkStatus()
|
||||
},
|
||||
watch: {
|
||||
channelId: 'checkStatus',
|
||||
isAuthenticated: 'checkStatus'
|
||||
}
|
||||
async subscribeHandler () {
|
||||
await this.$store.dispatch('auth/makeRequest', {
|
||||
method: 'POST',
|
||||
path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
|
||||
data: {
|
||||
channelId: this.channelId
|
||||
}
|
||||
})
|
||||
this.subscribed = !this.subscribed
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isAuthenticated () {
|
||||
return this.$store.getters['auth/isCurrentlyAuthenticated']
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkStatus()
|
||||
},
|
||||
watch: {
|
||||
channelId: 'checkStatus',
|
||||
isAuthenticated: 'checkStatus'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -37,47 +37,47 @@ import { LibPiped } from '@/tools/libpiped'
|
||||
import marked from 'marked'
|
||||
|
||||
export default {
|
||||
name: 'VideoComment',
|
||||
props: ['comment', 'video', 'subComment'],
|
||||
data: () => ({
|
||||
requestInProgress: false,
|
||||
showChildComments: true,
|
||||
childComments: []
|
||||
}),
|
||||
methods: {
|
||||
numberFormat (...args) {
|
||||
return LibPiped.numberFormat(...args)
|
||||
},
|
||||
async loadReplies () {
|
||||
let nextpage = null
|
||||
this.requestInProgress = true
|
||||
name: 'VideoComment',
|
||||
props: ['comment', 'video', 'subComment'],
|
||||
data: () => ({
|
||||
requestInProgress: false,
|
||||
showChildComments: true,
|
||||
childComments: []
|
||||
}),
|
||||
methods: {
|
||||
numberFormat (...args) {
|
||||
return LibPiped.numberFormat(...args)
|
||||
},
|
||||
async loadReplies () {
|
||||
let nextpage = null
|
||||
this.requestInProgress = true
|
||||
|
||||
while (true) {
|
||||
const replies = await this.$store.dispatch('auth/makeRequest', {
|
||||
method: 'GET',
|
||||
path: '/nextpage/comments/' + this.video.videoId,
|
||||
params: {
|
||||
nextpage: nextpage || this.comment.repliesPage
|
||||
}
|
||||
})
|
||||
while (true) {
|
||||
const replies = await this.$store.dispatch('auth/makeRequest', {
|
||||
method: 'GET',
|
||||
path: '/nextpage/comments/' + this.video.videoId,
|
||||
params: {
|
||||
nextpage: nextpage || this.comment.repliesPage
|
||||
}
|
||||
})
|
||||
|
||||
this.childComments = this.childComments.concat(replies.comments)
|
||||
if (replies.nextpage) {
|
||||
nextpage = replies.nextpage
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
this.requestInProgress = false
|
||||
}
|
||||
},
|
||||
this.childComments = this.childComments.concat(replies.comments)
|
||||
if (replies.nextpage) {
|
||||
nextpage = replies.nextpage
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
this.requestInProgress = false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
renderedCommentTxt () {
|
||||
return LibPiped.purifyHTML(marked.parseInline(this.comment.commentText, {
|
||||
breaks: true
|
||||
}))
|
||||
}
|
||||
}
|
||||
computed: {
|
||||
renderedCommentTxt () {
|
||||
return LibPiped.purifyHTML(marked.parseInline(this.comment.commentText, {
|
||||
breaks: true
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -26,62 +26,62 @@ import { LibPiped } from '@/tools/libpiped'
|
||||
import { findLastWatch } from '@/store/watched-videos-db'
|
||||
|
||||
export default {
|
||||
name: 'VideoItem',
|
||||
props: {
|
||||
video: Object,
|
||||
height: Number,
|
||||
width: Number,
|
||||
hideChannel: Boolean,
|
||||
maxHeight: Boolean,
|
||||
srcProgress: Number
|
||||
},
|
||||
data: () => ({
|
||||
alreadyWatched: false,
|
||||
progress: 0
|
||||
}),
|
||||
mounted () {
|
||||
this.findIfVideoWatched()
|
||||
},
|
||||
watch: {
|
||||
'video.videoId': 'findIfVideoWatched',
|
||||
'video.url': 'findIfVideoWatched',
|
||||
srcProgress: 'findIfVideoWatched'
|
||||
},
|
||||
name: 'VideoItem',
|
||||
props: {
|
||||
video: Object,
|
||||
height: Number,
|
||||
width: Number,
|
||||
hideChannel: Boolean,
|
||||
maxHeight: Boolean,
|
||||
srcProgress: Number
|
||||
},
|
||||
data: () => ({
|
||||
alreadyWatched: false,
|
||||
progress: 0
|
||||
}),
|
||||
mounted () {
|
||||
this.findIfVideoWatched()
|
||||
},
|
||||
watch: {
|
||||
'video.videoId': 'findIfVideoWatched',
|
||||
'video.url': 'findIfVideoWatched',
|
||||
srcProgress: 'findIfVideoWatched'
|
||||
},
|
||||
|
||||
methods: {
|
||||
async findIfVideoWatched () {
|
||||
// if it has source progress, it's already seen
|
||||
if (this.srcProgress) {
|
||||
this.alreadyWatched = true
|
||||
this.progress = this.srcProgress
|
||||
return
|
||||
}
|
||||
methods: {
|
||||
async findIfVideoWatched () {
|
||||
// if it has source progress, it's already seen
|
||||
if (this.srcProgress) {
|
||||
this.alreadyWatched = true
|
||||
this.progress = this.srcProgress
|
||||
return
|
||||
}
|
||||
|
||||
let videoId
|
||||
if (this.video.videoId) {
|
||||
videoId = this.video.videoId
|
||||
} else {
|
||||
videoId = LibPiped.determineVideoIdFromPath(this.video.url)
|
||||
}
|
||||
let videoId
|
||||
if (this.video.videoId) {
|
||||
videoId = this.video.videoId
|
||||
} else {
|
||||
videoId = LibPiped.determineVideoIdFromPath(this.video.url)
|
||||
}
|
||||
|
||||
if (videoId) {
|
||||
const lastVideo = await findLastWatch(videoId)
|
||||
if (lastVideo != null) {
|
||||
this.alreadyWatched = true
|
||||
this.progress = lastVideo.progressPcnt
|
||||
} else {
|
||||
this.alreadyWatched = false
|
||||
}
|
||||
}
|
||||
},
|
||||
if (videoId) {
|
||||
const lastVideo = await findLastWatch(videoId)
|
||||
if (lastVideo != null) {
|
||||
this.alreadyWatched = true
|
||||
this.progress = lastVideo.progressPcnt
|
||||
} else {
|
||||
this.alreadyWatched = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
numberFormat (...args) {
|
||||
return LibPiped.numberFormat(...args)
|
||||
},
|
||||
numberFormat (...args) {
|
||||
return LibPiped.numberFormat(...args)
|
||||
},
|
||||
|
||||
timeFormat (...args) {
|
||||
return LibPiped.timeFormat(...args)
|
||||
}
|
||||
}
|
||||
timeFormat (...args) {
|
||||
return LibPiped.timeFormat(...args)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted () {
|
||||
const videoId = this.$route.params.videoId
|
||||
if (videoId) {
|
||||
this.$router.replace({
|
||||
path: '/watch',
|
||||
query: { v: videoId }
|
||||
})
|
||||
}
|
||||
}
|
||||
mounted () {
|
||||
const videoId = this.$route.params.videoId
|
||||
if (videoId) {
|
||||
this.$router.replace({
|
||||
path: '/watch',
|
||||
query: { v: videoId }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user