00:00
+00:00
-00:00:00
/ {{ progressPercent }}%
@@ -106,17 +62,11 @@ export default { return { volume: 1, playbackRate: 1, - trackWidth: 0, - playedTrackWidth: 0, - bufferTrackWidth: 0, - readyTrackWidth: 0, audioEl: null, seekLoading: false, showChaptersModal: false, currentTime: 0, - trackOffsetLeft: 16, // Track is 16px from edge - duration: 0, - chapterTicks: [] + duration: 0 } }, computed: { @@ -153,24 +103,38 @@ export default { }, currentChapterName() { return this.currentChapter ? this.currentChapter.title : '' + }, + isFullscreen() { + return this.$store.state.playerIsFullscreen } }, methods: { + toggleFullscreen(isFullscreen) { + this.$store.commit('setPlayerIsFullscreen', isFullscreen) + + var videoPlayerEl = document.getElementById('video-player') + if (videoPlayerEl) { + if (isFullscreen) { + videoPlayerEl.style.width = '100vw' + videoPlayerEl.style.height = '100vh' + videoPlayerEl.style.top = '0px' + videoPlayerEl.style.left = '0px' + } else { + videoPlayerEl.style.width = '384px' + videoPlayerEl.style.height = '216px' + videoPlayerEl.style.top = 'unset' + videoPlayerEl.style.bottom = '80px' + videoPlayerEl.style.left = '16px' + } + } + }, setDuration(duration) { this.duration = duration - - this.chapterTicks = this.chapters.map((chap) => { - var perc = chap.start / this.duration - return { - title: chap.title, - left: perc * this.trackWidth - } - }) }, setCurrentTime(time) { this.currentTime = time this.updateTimestamp() - this.updatePlayedTrack() + if (this.$refs.trackbar) this.$refs.trackbar.setCurrentTime(time) }, playPause() { this.$emit('playPause') @@ -223,67 +187,11 @@ export default { seek(time) { this.$emit('seek', time) }, - playbackRateUpdated(playbackRate) { - this.setPlaybackRate(playbackRate) - }, - playbackRateChanged(playbackRate) { - this.setPlaybackRate(playbackRate) - this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => { - console.error('Failed to update settings', err) - }) - }, - mousemoveTrack(e) { - var offsetX = e.offsetX - var time = (offsetX / this.trackWidth) * this.duration - if (this.$refs.hoverTimestamp) { - var width = this.$refs.hoverTimestamp.clientWidth - this.$refs.hoverTimestamp.style.opacity = 1 - var posLeft = offsetX - width / 2 - if (posLeft + width + this.trackOffsetLeft > window.innerWidth) { - posLeft = window.innerWidth - width - this.trackOffsetLeft - } else if (posLeft < -this.trackOffsetLeft) { - posLeft = -this.trackOffsetLeft - } - this.$refs.hoverTimestamp.style.left = posLeft + 'px' - } - - if (this.$refs.hoverTimestampArrow) { - var width = this.$refs.hoverTimestampArrow.clientWidth - var posLeft = offsetX - width / 2 - this.$refs.hoverTimestampArrow.style.opacity = 1 - this.$refs.hoverTimestampArrow.style.left = posLeft + 'px' - } - if (this.$refs.hoverTimestampText) { - var hoverText = this.$secondsToTimestamp(time) - - var chapter = this.chapters.find((chapter) => chapter.start <= time && time < chapter.end) - if (chapter && chapter.title) { - hoverText += ` - ${chapter.title}` - } - this.$refs.hoverTimestampText.innerText = hoverText - } - if (this.$refs.trackCursor) { - this.$refs.trackCursor.style.opacity = 1 - this.$refs.trackCursor.style.left = offsetX - 1 + 'px' - } - }, - mouseleaveTrack() { - if (this.$refs.hoverTimestamp) { - this.$refs.hoverTimestamp.style.opacity = 0 - } - if (this.$refs.hoverTimestampArrow) { - this.$refs.hoverTimestampArrow.style.opacity = 0 - } - if (this.$refs.trackCursor) { - this.$refs.trackCursor.style.opacity = 0 - } - }, restart() { this.seek(0) }, setStreamReady() { - this.readyTrackWidth = this.trackWidth - this.$refs.readyTrack.style.width = this.trackWidth + 'px' + if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(1) }, setChunksReady(chunks, numSegments) { var largestSeg = 0 @@ -298,10 +206,7 @@ export default { } } var percentageReady = largestSeg / numSegments - var widthReady = Math.round(this.trackWidth * percentageReady) - if (this.readyTrackWidth === widthReady) return - this.readyTrackWidth = widthReady - this.$refs.readyTrack.style.width = widthReady + 'px' + if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(percentageReady) }, updateTimestamp() { var ts = this.$refs.currentTimestamp @@ -312,36 +217,9 @@ export default { var currTimeClean = this.$secondsToTimestamp(this.currentTime) ts.innerText = currTimeClean }, - updatePlayedTrack() { - var perc = this.currentTime / this.duration - var ptWidth = Math.round(perc * this.trackWidth) - if (this.playedTrackWidth === ptWidth) { - return - } - this.$refs.playedTrack.style.width = ptWidth + 'px' - this.playedTrackWidth = ptWidth - }, - clickTrack(e) { - if (this.loading) return - var offsetX = e.offsetX - var perc = offsetX / this.trackWidth - var time = perc * this.duration - if (isNaN(time) || time === null) { - console.error('Invalid time', perc, time) - return - } - this.seek(time) - }, setBufferTime(bufferTime) { - if (!this.audioEl) { - return - } - var bufferlen = (bufferTime / this.duration) * this.trackWidth - bufferlen = Math.round(bufferlen) - if (this.bufferTrackWidth === bufferlen || !this.$refs.bufferTrack) return - this.$refs.bufferTrack.style.width = bufferlen + 'px' - this.bufferTrackWidth = bufferlen + if (this.$refs.trackbar) this.$refs.trackbar.setBufferTime(bufferTime) }, showChapters() { if (!this.chapters.length) return @@ -350,14 +228,6 @@ export default { init() { this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1 this.$emit('setPlaybackRate', this.playbackRate) - this.setTrackWidth() - }, - setTrackWidth() { - if (this.$refs.track) { - this.trackWidth = this.$refs.track.clientWidth - } else { - console.error('Track not loaded', this.$refs) - } }, settingsUpdated(settings) { if (settings.playbackRate && this.playbackRate !== settings.playbackRate) { @@ -365,6 +235,11 @@ export default { } }, closePlayer() { + if (this.isFullscreen) { + this.toggleFullscreen(false) + return + } + if (this.loading) return this.$emit('close') }, @@ -379,19 +254,14 @@ export default { else if (action === this.$hotkeys.AudioPlayer.INCREASE_PLAYBACK_RATE) this.increasePlaybackRate() else if (action === this.$hotkeys.AudioPlayer.DECREASE_PLAYBACK_RATE) this.decreasePlaybackRate() else if (action === this.$hotkeys.AudioPlayer.CLOSE) this.closePlayer() - }, - windowResize() { - this.setTrackWidth() } }, mounted() { - window.addEventListener('resize', this.windowResize) this.$store.commit('user/addSettingsListener', { id: 'audioplayer', meth: this.settingsUpdated }) this.init() this.$eventBus.$on('player-hotkey', this.hotkey) }, beforeDestroy() { - window.removeEventListener('resize', this.windowResize) this.$store.commit('user/removeSettingsListener', 'audioplayer') this.$eventBus.$off('player-hotkey', this.hotkey) } diff --git a/client/players/LocalVideoPlayer.js b/client/players/LocalVideoPlayer.js index d3bad912..128f070b 100644 --- a/client/players/LocalVideoPlayer.js +++ b/client/players/LocalVideoPlayer.js @@ -29,8 +29,11 @@ export default class LocalVideoPlayer extends EventEmitter { var videoEl = document.createElement('video') videoEl.id = 'video-player' // videoEl.style.display = 'none' - videoEl.className = 'absolute bottom-20 left-4 w-96 bg-black z-50' + videoEl.className = 'absolute bg-black z-50' videoEl.style.height = '216px' + videoEl.style.width = '384px' + videoEl.style.bottom = '80px' + videoEl.style.left = '16px' document.body.appendChild(videoEl) this.player = videoEl diff --git a/client/store/index.js b/client/store/index.js index dd02f575..2f5ce23d 100644 --- a/client/store/index.js +++ b/client/store/index.js @@ -8,6 +8,7 @@ export const state = () => ({ streamLibraryItem: null, streamEpisodeId: null, streamIsPlaying: false, + playerIsFullscreen: false, editModalTab: 'details', showEditModal: false, showEReader: false, @@ -80,6 +81,9 @@ export const mutations = { setSource(state, source) { state.Source = source }, + setPlayerIsFullscreen(state, val) { + state.playerIsFullscreen = val + }, setLastBookshelfScrollData(state, { scrollTop, path, name }) { state.lastBookshelfScrollData[name] = { scrollTop, path } },