Hi, I am looking to contribute , I have the development environment set up - how do I get started with possibly implementing this feature? For starters, I already set up a branch on my local end.

@ubello64
You can start by finding related code first

1. Any button on mediaplayer (so you can a random button to play with)
   e.g. If I right click screenshot button, I see vjs-icon-screenshot, then search vjs-icon-screenshot in code
2. Autoplay button in Up Next (so you know what it does)

Make it work somehow first (even partially working), think about the UI later? (Or make UI first then the actual function, the order is up to you)
Feel free to share your code (e.g. pasting link to your branch) & ask questions if you are stuck

@PikachuEXE Ive noticed that the file "ft-video-player.js" contains references to some of the objects found inside the video player such as "playback speed". For example this snippet:

createFullWindowButton: function () {
const toggleFullWindow = this.toggleFullWindow

  const VjsButton = videojs.getComponent('Button')
  class fullWindowButton extends VjsButton {
    handleClick() {
      toggleFullWindow()
    }

    createControlTextEl(button) {
      // Add class name to button to be able to target it with CSS selector
      button.classList.add('vjs-button-fullwindow')
      button.title = 'Full Window'

      const div = document.createElement('div')
      div.id = 'fullwindow'
      div.className = 'vjs-icon-fullwindow-enter vjs-button'

      button.appendChild(div)

      return div
    }
  }

  videojs.registerComponent('fullWindowButton', fullWindowButton)
},

Am I on the right path in assuming that code I implement will follow a similar format to the code listed above?

I guess so
Copy the code and make a new button & make it work somehow (even just print a message in console) to verify

@PikachuEXE I have followed your suggestion to understand the behavior of 'up next', is this line : "return this.$store.getters.getPlayNextVideo" what causes 'autoplay'?

this.$store.getters.getPlayNextVideo is reading the value from "data store" (which is also read when code for auto play run)
And to update it, call updatePlayNextVideo (must be included in mapActions in js file)

@ubello64 can you post a snippet off the code we were messing with today?

@shadycloud
// auto-play function
toggleAutoPlay: function () {
this.$store.dispatch('updatePlayNextVideo', !this.$store.getters.getPlayNextVideo)
},

Hello, I noticed that in the video recommendations file there is a use of 'ft-toggle-switch' - can this toggle switch be used inside the video area window? I figured out the logic of attaching 'autoplay' functionality to a UI element, just need help figuring out what toggle switch can be used

Hmm not sure what icon we should use for this because YT does this very clever with the toggle they use. It clearly indicates that autoplay is enables or paused like shown in the screenshot

We'd need disabledIcon, enabledIcon, and hideTitle properties on the ft-toggle-switch if we want to do a more direct adaptation.

Looking through videoJs.CSS, I can't figure out a way to make my temporary 'spinner' icon the same size or the same positioning as the other icons. Any help would be appreciated

Add this style

.vjs-button > .vjs-icon-spinner:before {
  font-size: 1.6666666667em;
}

This seems helpful, https://www.tutorialspoint.com/adding-custom-video-js-control-bar-buttons

I need some help - I was thinking of using a slider similar to the volume bar or Videojs-Slider in order to create a slider that shows two states - 'Autoplay on' and 'Autoplay off' . Messing around with some code and I was able to make a second volume bar show up(the empty grey one) next to the playback speed selector

I tried adding this style to change that second volume bar, but it did not work:
#autoPlay .vjs-volume-bar.vjs-slider-horizontal{ width: 2em; height: 0.4 em; position: relative; top: -2px; }
This is also what I added inside createAutoPlayToggleButton():

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

          const div = document.createElement('div')
          div.id = 'autoPlay'
          div.className = 'vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal'

          button.appendChild(div)

          return div
        }

Is there a different method for adding a slider such as the one from VideoJS? any help or input would be appreciated

Why it becomes a slider now
Just add a toggle like #4335 (only got a few issues left

Hi @ubello64, we are currently going to be suspending changes on the video player for the time being while we are working on a larger overhaul of the feature. Thank you for your help and enthusiasm, and please take a look at any other open issues that you would like to contribute to. Thank you!

I support the enhancement of full-screen mode, especially in the context of integrating the Auto Play feature into the media player to improve user experience. However, there's a current issue where, in Auto Play mode, the full-screen mode is automatically exited when the next video starts, and this exit from full-screen mode is not properly detected. Addressing this issue would significantly improve the viewing experience.