Skip to content
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

Add button to pause playlist after current video #3938

Merged
merged 3 commits into from
Sep 7, 2023
Merged

Add button to pause playlist after current video #3938

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77d3dc9
Rounded playlist buttons to circles
Benjababe Aug 24, 2023
082ec12
Add pause button for playlists
Benjababe Aug 24, 2023
ec6dd92
reverted en_GB changes
Benjababe Aug 28, 2023
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
2 changes: 2 additions & 0 deletions src/renderer/components/watch-video-playlist/watch-video-playlist.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
}

.playlistIcon {
height: 20px;
width: 20px;
font-size: 20px;
padding: 10px;
margin-top: -25px;
Expand Down
17 changes: 14 additions & 3 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 @@ -34,6 +34,7 @@ export default defineComponent({
shuffleEnabled: false,
loopEnabled: false,
reversePlaylist: false,
pauseOnCurrentVideo: false,
channelName: '',
channelId: '',
playlistTitle: '',
Expand Down Expand Up @@ -73,7 +74,7 @@ export default defineComponent({
return !this.loopEnabled
},

videoIsLastInInPlaylistItems: function() {
videoIsLastInInPlaylistItems: function () {
if (this.shuffleEnabled) {
return this.videoIndexInPlaylistItems === this.randomizedPlaylistItems.length - 1
} else {
Expand Down Expand Up @@ -111,7 +112,7 @@ export default defineComponent({
}
}
},
watchViewLoading: function(newVal, oldVal) {
watchViewLoading: function (newVal, oldVal) {
// This component is loaded/rendered before watch view loaded
if (oldVal && !newVal) {
// Scroll after watch view loaded, otherwise doesn't work
Expand All @@ -120,7 +121,7 @@ export default defineComponent({
this.scrollToCurrentVideo()
}
},
isLoading: function(newVal, oldVal) {
isLoading: function (newVal, oldVal) {
// This component is loaded/rendered before watch view loaded
if (oldVal && !newVal) {
// Scroll after this component loaded, otherwise doesn't work
Expand Down Expand Up @@ -194,6 +195,16 @@ export default defineComponent({
}, 1)
},

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
11 changes: 11 additions & 0 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 @@ -92,6 +92,17 @@
@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"
@click="togglePauseOnCurrentVideo"
@keydown.enter.prevent="togglePauseOnCurrentVideo"
@keydown.space.prevent="togglePauseOnCurrentVideo"
/>
</p>
<div
v-if="!isLoading"
Expand Down
2 changes: 2 additions & 0 deletions src/renderer/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
faLanguage,
faList,
faNewspaper,
faPause,
faPlay,
faQuestionCircle,
faRandom,
Expand Down Expand Up @@ -103,6 +104,7 @@ library.add(
faLanguage,
faList,
faNewspaper,
faPause,
faPlay,
faQuestionCircle,
faRandom,
Expand Down
23 changes: 21 additions & 2 deletions src/renderer/views/Watch/Watch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export default defineComponent({
hideVideoDescription: function () {
return this.$store.getters.getHideVideoDescription
},
showFamilyFriendlyOnly: function() {
showFamilyFriendlyOnly: function () {
return this.$store.getters.getShowFamilyFriendlyOnly
},
hideChannelSubscriptions: function () {
Expand Down Expand Up @@ -1079,6 +1079,10 @@ export default defineComponent({
},

checkIfPlaylist: function () {
// On the off chance that user selected pause on current video
// Then clicks on another video in the playlist
this.disablePlaylistPauseOnCurrent()

if (typeof (this.$route.query) !== 'undefined') {
this.playlistId = this.$route.query.playlistId

Expand Down Expand Up @@ -1210,6 +1214,11 @@ export default defineComponent({
return
}

if (this.watchingPlaylist && this.getPlaylistPauseOnCurrent()) {
this.disablePlaylistPauseOnCurrent()
return
}

if (this.watchingPlaylist && this.$refs.watchVideoPlaylist.shouldStopDueToPlaylistEnd) {
// Let `watchVideoPlaylist` handle end of playlist, no countdown needed
this.$refs.watchVideoPlaylist.playNextVideo()
Expand Down Expand Up @@ -1392,7 +1401,7 @@ export default defineComponent({
]
},

getAdaptiveFormatsInvidious: async function(existingInfoResult = null) {
getAdaptiveFormatsInvidious: async function (existingInfoResult = null) {
let result
if (existingInfoResult) {
result = existingInfoResult
Expand Down Expand Up @@ -1561,6 +1570,16 @@ export default defineComponent({
return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.loopEnabled : false
},

getPlaylistPauseOnCurrent: function () {
return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.pauseOnCurrentVideo : false
},

disablePlaylistPauseOnCurrent: function () {
if (this.$refs.watchVideoPlaylist) {
this.$refs.watchVideoPlaylist.pauseOnCurrentVideo = false
}
},

updateTitle: function () {
document.title = `${this.videoTitle} - FreeTube`
},
Expand Down
3 changes: 3 additions & 0 deletions static/locales/en-US.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,7 @@ Video:
Reverse Playlist: Reverse Playlist
Play Next Video: Play Next Video
Play Previous Video: Play Previous Video
Pause on Current Video: Pause on Current Video
# Context is "X People Watching"
Watching: Watching
Watched: Watched
Expand Down Expand Up @@ -886,6 +887,8 @@ Shuffle is now enabled: Shuffle is now enabled
The playlist has been reversed: The playlist has been reversed
Playing Next Video: Playing Next Video
Playing Previous Video: Playing Previous Video
Playlist will not pause when current video is finished: Playlist will not pause when current video is finished
Playlist will pause when current video is finished: Playlist will pause when current video is finished
Playing Next Video Interval: Playing next video in no time. Click to cancel. | Playing next video in {nextVideoInterval} second. Click to cancel. | Playing next video in {nextVideoInterval} seconds. Click to cancel.
Canceled next video autoplay: Canceled next video autoplay

Expand Down
3 changes: 3 additions & 0 deletions static/locales/en_GB.yaml
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Benjababe there is nothing wrong with the changes in this file but we like to only add the en-US translations and leave the rest to the other translators. Could u revert the changes u made to this file.

See #3938 (comment)

Original file line number Diff line number Diff line change
Expand Up @@ -656,6 +656,7 @@ Video:
Reverse Playlist: 'Reverse Playlist'
Play Next Video: 'Play Next Video'
Play Previous Video: 'Play Previous Video'
Pause on Current Video: 'Pause on Current Video'
# Context is "X People Watching"
Watching: 'Watching'
Watched: 'Watched'
Expand Down Expand Up @@ -870,6 +871,8 @@ Shuffle is now enabled: 'Shuffle is now enabled'
The playlist has been reversed: 'The playlist has been reversed'
Playing Next Video: 'Playing Next Video'
Playing Previous Video: 'Playing Previous Video'
Playlist will not pause when current video is finished: 'Playlist will not pause when current video is finished'
Playlist will pause when current video is finished: 'Playlist will pause when current video is finished'
Canceled next video autoplay: 'Cancelled next video autoplay'
'The playlist has ended. Enable loop to continue playing': 'The playlist has ended. Enable
loop to continue playing'
Expand Down