Skip to content

Add autoplay toggle to the video player #5866

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FreeTubeBot merged 10 commits into from
Jan 14, 2025
Merged

Add autoplay toggle to the video player #5866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6f7795d
Add autoplay toggle to the video player
kommunarr Oct 14, 2024
d246be7
Fix (pre-existing) bug where mobile Shaka overflow menu overflows int…
kommunarr Oct 14, 2024
4317f3e
Update confusing autoplay labels to use consistent language
kommunarr Oct 14, 2024
5c5349e
Update src/renderer/components/ft-shaka-video-player/player-component…
kommunarr Oct 14, 2024
dba83e3
Have autoplay toggle value update when setting updates elsewhere, e.g…
kommunarr Oct 14, 2024
01c693d
Merge branch 'feat/autoplay-in-media-player' of github.com:kommunarr/…
kommunarr Oct 14, 2024
2b17208
Apply suggestions from code review
kommunarr Oct 14, 2024
3a55565
Remove now-redundant playlist pause feature
kommunarr Oct 14, 2024
1daad86
Merge branch 'development' of github.com:FreeTubeApp/FreeTube into fe…
kommunarr Dec 29, 2024
1f2369a
Update overflow width threshold
kommunarr Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@
grid-gap: 8px;
}

.autoPlayToggle {
display: flex;
justify-content: flex-end;
align-items: center;
}

.VideoRecommendationsTopBar {
display: flex;
justify-content: space-between;
Expand Down
28 changes: 0 additions & 28 deletions src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,6 @@
<h3>
{{ $t("Up Next") }}
</h3>
<FtToggleSwitch
v-if="showAutoplay"
class="autoPlayToggle"
:label="$t('Video.Autoplay')"
:compact="true"
:default-value="playNextVideo"
@change="updatePlayNextVideo"
/>
</div>
<FtListVideoLazy
v-for="(video, index) in data"
Expand All @@ -27,36 +19,16 @@
</template>

<script setup>
import { computed } from 'vue'

import FtCard from '../ft-card/ft-card.vue'
import FtListVideoLazy from '../ft-list-video-lazy/ft-list-video-lazy.vue'
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'

import store from '../../store/index'

defineProps({
data: {
type: Array,
required: true
},
showAutoplay: {
type: Boolean,
default: false
}
})

/** @type {import('vue').ComputedRef<boolean>} */
const playNextVideo = computed(() => {
return store.getters.getPlayNextVideo
})

/**
* @param {boolean} value
*/
function updatePlayNextVideo(value) {
store.dispatch('updatePlayNextVideo', value)
}
</script>

<style scoped src="./WatchVideoRecommendations.css" />
2 changes: 2 additions & 0 deletions src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@
:deep(.shaka-overflow-menu),
:deep(.shaka-settings-menu) {
background: var(--card-bg-color) !important;
max-height: 200px;

}

:deep(.shaka-overflow-menu button),
Expand Down
50 changes: 49 additions & 1 deletion src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { LegacyQualitySelection } from './player-components/LegacyQualitySelecti
import { ScreenshotButton } from './player-components/ScreenshotButton'
import { StatsButton } from './player-components/StatsButton'
import { TheatreModeButton } from './player-components/TheatreModeButton'
import { AutoplayToggle } from './player-components/AutoplayToggle'
import {
findMostSimilarAudioBandwidth,
getSponsorBlockSegments,
Expand All @@ -34,7 +35,7 @@ import { pathExists } from '../../helpers/filesystem'
// The UTF-8 characters "h", "t", "t", and "p".
const HTTP_IN_HEX = 0x68747470

const USE_OVERFLOW_MENU_WIDTH_THRESHOLD = 600
const USE_OVERFLOW_MENU_WIDTH_THRESHOLD = 634

const RequestType = shaka.net.NetworkingEngine.RequestType
const AdvancedRequestType = shaka.net.NetworkingEngine.AdvancedRequestType
Expand Down Expand Up @@ -119,6 +120,14 @@ export default defineComponent({
type: Boolean,
default: false
},
autoplayPossible: {
type: Boolean,
default: false
},
autoplayEnabled: {
type: Boolean,
default: false
},
vrProjection: {
type: String,
default: null
Expand All @@ -133,6 +142,7 @@ export default defineComponent({
'loaded',
'ended',
'timeupdate',
'toggle-autoplay',
'toggle-theatre-mode',
'playback-rate-updated'
],
Expand Down Expand Up @@ -751,6 +761,7 @@ export default defineComponent({
if (useOverFlowMenu.value) {
uiConfig.overflowMenuButtons = [
'ft_screenshot',
'ft_autoplay_toggle',
'playback_rate',
'loop',
'ft_audio_tracks',
Expand All @@ -770,6 +781,7 @@ export default defineComponent({
'recenter_vr',
'toggle_stereoscopic',
'ft_screenshot',
'ft_autoplay_toggle',
'playback_rate',
'loop',
'ft_audio_tracks',
Expand Down Expand Up @@ -798,6 +810,11 @@ export default defineComponent({
}
}

if (!props.autoplayPossible) {
const index = elementList.indexOf('ft_autoplay_toggle')
elementList.splice(index, 1)
}

if (props.format === 'audio') {
const index = elementList.indexOf('picture_in_picture')
elementList.splice(index, 1)
Expand Down Expand Up @@ -975,6 +992,14 @@ export default defineComponent({
}
})

watch(() => props.autoplayEnabled, (newValue, oldValue) => {
if (newValue !== oldValue) {
events.dispatchEvent(new CustomEvent('setAutoplay', {
detail: newValue
}))
}
})

/** @type {ResizeObserver|null} */
let resizeObserver = null

Expand Down Expand Up @@ -1643,6 +1668,24 @@ export default defineComponent({
shakaOverflowMenu.registerElement('ft_audio_tracks', new AudioTrackSelectionFactory())
}

function registerAutoplayToggle() {
events.addEventListener('toggleAutoplay', () => {
emit('toggle-autoplay')
})

/**
* @implements {shaka.extern.IUIElement.Factory}
*/
class AutoplayToggleFactory {
create(rootElement, controls) {
return new AutoplayToggle(props.autoplayEnabled, events, rootElement, controls)
}
}

shakaControls.registerElement('ft_autoplay_toggle', new AutoplayToggleFactory())
shakaOverflowMenu.registerElement('ft_autoplay_toggle', new AutoplayToggleFactory())
}

function registerTheatreModeButton() {
events.addEventListener('toggleTheatreMode', () => {
emit('toggle-theatre-mode')
Expand Down Expand Up @@ -1772,6 +1815,9 @@ export default defineComponent({
shakaControls.registerElement('ft_audio_tracks', null)
shakaOverflowMenu.registerElement('ft_audio_tracks', null)

shakaControls.registerElement('ft_autoplay_toggle', null)
shakaOverflowMenu.registerElement('ft_autoplay_toggle', null)

shakaControls.registerElement('ft_theatre_mode', null)
shakaOverflowMenu.registerElement('ft_theatre_mode', null)

Expand Down Expand Up @@ -2375,6 +2421,8 @@ export default defineComponent({

registerScreenshotButton()
registerAudioTrackSelection()
registerAutoplayToggle()

registerTheatreModeButton()
registerFullWindowButton()
registerLegacyQualitySelection()
Expand Down
79 changes: 79 additions & 0 deletions src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import shaka from 'shaka-player'

import i18n from '../../../i18n/index'

export class AutoplayToggle extends shaka.ui.Element {
/**
* @param {boolean} autoplayEnabled
* @param {EventTarget} events
* @param {HTMLElement} parent
* @param {shaka.ui.Controls} controls
*/
constructor(autoplayEnabled, events, parent, controls) {
super(parent, controls)

/** @private */
this.button_ = document.createElement('button')
this.button_.classList.add('autoplay-toggle')
this.button_.classList.add('shaka-tooltip')

/** @private */
this.icon_ = document.createElement('i')
this.icon_.classList.add('material-icons-round')
this.icon_.textContent = 'pause_circle'

this.button_.appendChild(this.icon_)

const label = document.createElement('label')
label.classList.add('shaka-overflow-button-label')
label.classList.add('shaka-overflow-menu-only')

/** @private */
this.nameSpan_ = document.createElement('span')
label.appendChild(this.nameSpan_)

/** @private */
this.currentState_ = document.createElement('span')
this.currentState_.classList.add('shaka-current-selection-span')
label.appendChild(this.currentState_)

this.button_.appendChild(label)

this.parent.appendChild(this.button_)

/** @private */
this.autoplayEnabled_ = autoplayEnabled

// listeners

this.eventManager.listen(this.button_, 'click', () => {
events.dispatchEvent(new CustomEvent('toggleAutoplay', {
detail: !this.autoplayEnabled_
}))
})

const handleAutoplayValueChange = (/** @type {CustomEvent} */ event) => {
this.autoplayEnabled_ = event.detail
this.updateLocalisedStrings_()
}

this.eventManager.listen(events, 'setAutoplay', handleAutoplayValueChange)

this.eventManager.listen(events, 'localeChanged', () => {
this.updateLocalisedStrings_()
})

this.updateLocalisedStrings_()
}

/** @private */
updateLocalisedStrings_() {
this.nameSpan_.textContent = i18n.t('Video.Autoplay')

this.icon_.textContent = this.autoplayEnabled_ ? 'play_circle' : 'pause_circle'

this.currentState_.textContent = this.localization.resolve(this.autoplayEnabled_ ? 'ON' : 'OFF')

this.button_.ariaLabel = this.autoplayEnabled_ ? i18n.t('Video.Player.Autoplay is on') : i18n.t('Video.Player.Autoplay is off')
}
}
14 changes: 7 additions & 7 deletions src/renderer/components/player-settings/player-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,11 @@
</div>
<div class="switchColumn">
<ft-toggle-switch
:label="$t('Settings.Player Settings.Autoplay Videos')"
:label="$t('Settings.Player Settings.Play Next Video')"
:compact="true"
:default-value="autoplayVideos"
@change="updateAutoplayVideos"
:disabled="hideRecommendedVideos"
:default-value="playNextVideo"
@change="updatePlayNextVideo"
/>
<ft-toggle-switch
:label="$t('Settings.Player Settings.Autoplay Playlists')"
Expand All @@ -61,11 +62,10 @@
@change="updateAutoplayPlaylists"
/>
<ft-toggle-switch
:label="$t('Settings.Player Settings.Play Next Video')"
:label="$t('Settings.Player Settings.Autoplay Videos')"
:compact="true"
:disabled="hideRecommendedVideos"
:default-value="playNextVideo"
@change="updatePlayNextVideo"
:default-value="autoplayVideos"
@change="updateAutoplayVideos"
/>
<ft-toggle-switch
:label="$t('Settings.Player Settings.Display Play Button In Video Player')"
Expand Down
11 changes: 0 additions & 11 deletions src/renderer/components/watch-video-playlist/watch-video-playlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export default defineComponent({
shuffleEnabled: false,
loopEnabled: false,
reversePlaylist: false,
pauseOnCurrentVideo: false,
prevVideoBeforeDeletion: null,
channelName: '',
channelId: '',
Expand Down Expand Up @@ -294,16 +293,6 @@ export default defineComponent({
})
},

togglePauseOnCurrentVideo: function () {
if (this.pauseOnCurrentVideo) {
this.pauseOnCurrentVideo = false
showToast(this.$t('Playlist will not pause when current video is finished'))
} else {
this.pauseOnCurrentVideo = true
showToast(this.$t('Playlist will pause when current video is finished'))
}
},

playNextVideo: function () {
const playlistInfo = {
playlistId: this.playlistId,
Expand Down
12 changes: 0 additions & 12 deletions src/renderer/components/watch-video-playlist/watch-video-playlist.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,18 +105,6 @@
@keydown.enter.prevent="playNextVideo"
@keydown.space.prevent="playNextVideo"
/>
<font-awesome-icon
class="playlistIcon"
:class="{ playlistIconActive: pauseOnCurrentVideo }"
:icon="['fas', 'pause']"
:title="$t('Video.Pause on Current Video')"
role="button"
tabindex="0"
:aria-pressed="pauseOnCurrentVideo"
@click="togglePauseOnCurrentVideo"
@keydown.enter.prevent="togglePauseOnCurrentVideo"
@keydown.space.prevent="togglePauseOnCurrentVideo"
/>
</p>
<div
v-if="!isLoading"
Expand Down
2 changes: 0 additions & 2 deletions src/renderer/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ import {
faNetworkWired,
faNewspaper,
faPalette,
faPause,
faPhotoFilm,
faPlay,
faPlus,
Expand Down Expand Up @@ -199,7 +198,6 @@ library.add(
faNetworkWired,
faNewspaper,
faPalette,
faPause,
faPhotoFilm,
faPlay,
faPlus,
Expand Down
Loading
Loading