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

Integrated autoplay button in video player #4335

Closed
wants to merge 10 commits into from
Closed

Integrated autoplay button in video player #4335

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
0c0de7f
adding new branch for integrated autoplay
ubello64 Oct 25, 2023
4dd75f1
autoplaybutton added in ft-video-player.js.
ubello64 Oct 26, 2023
d7bcc80
Merge pull request #1 from ubello64/Development
ubello64 Oct 27, 2023
bade982
including test functions
ubello64 Nov 7, 2023
983d4ff
pushing skeleton code to change from button to
ubello64 Nov 7, 2023
9549623
Merge branch 'FreeTubeApp:development' into development
ubello64 Nov 9, 2023
66ba396
changed size of spinner icon
ubello64 Nov 14, 2023
d4dd82a
finalized spinner icon format
ubello64 Nov 14, 2023
faffda4
added shortcut label to autoplay button
ubello64 Nov 14, 2023
9b800ac
small edit to videoJS.css
ubello64 Nov 14, 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
29 changes: 29 additions & 0 deletions src/renderer/components/ft-video-player/ft-video-player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ export default defineComponent({
'remainingTimeDisplay',
'customControlSpacer',
'screenshotButton',
'autoPlayToggleButton',
'playbackRateMenuButton',
'loopButton',
'audioTrackButton',
Expand Down Expand Up @@ -390,6 +391,7 @@ export default defineComponent({
this.determineDefaultQualityDash()
}

this.createAutoPlayToggleButton()
this.createFullWindowButton()
this.createLoopButton()
this.createToggleTheatreModeButton()
Expand Down Expand Up @@ -1493,7 +1495,34 @@ export default defineComponent({

videojs.registerComponent('fullWindowButton', fullWindowButton)
},
createAutoPlayToggleButton: function () {
const toggleAutoPlay = this.toggleAutoPlay

const VjsButton = videojs.getComponent('Button')
class autoPlayToggleButton extends VjsButton {
handleClick() {
toggleAutoPlay()
}

createControlTextEl(button) {
button.classList.add('vjs-button-spinner')
button.title = 'Auto Play (a)'

const div = document.createElement('div')
div.id = 'autoPlay'
div.className = 'vjs-icon-spinner vjs-button'

button.appendChild(div)

return div
}
}

videojs.registerComponent('autoPlayToggleButton', autoPlayToggleButton)
},
toggleAutoPlay: function () {
this.$store.dispatch('updatePlayNextVideo', !this.$store.getters.getPlayNextVideo)
},
createToggleTheatreModeButton: function () {
if (!this.theatrePossible) {
return
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/videoJS.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,14 @@
font-family: VideoJS;
font-weight: normal;
font-style: normal;
margin-top: 9px;
}
.vjs-icon-spinner:before {
content: "\f10b";
}
.vjs-button > .vjs-icon-spinner:before {
font-size: 1.66666666667em;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Minor indent issue but you should use an editor/update the editor you are using to read and enforce rules in https://github.com/FreeTubeApp/FreeTube/blob/development/.editorconfig file
See https://editorconfig.org

Suggested change
font-size: 1.66666666667em;
font-size: 1.66666666667em;

}

.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
Expand Down
Loading