~cadence/tube-devel

cloudtube: fixed volume slider v1 PROPOSED

~data-niklas
~data-niklas: 1
 fixed volume slider

 3 files changed, 22 insertions(+), 4 deletions(-)
This patch hides the video elements controls, in the case of the video
being split into a video and audio track. It then layers the audio
element on top of the video (using the css 'grid' display) and shows
it's controls. It also keeps the video in sync of the audio (not the
other way around).

It should fix the missing volume slider issue.
bopol
> Does this also display the audio track's current time, pause button, 
> seek bar, etc?
Yes but it hides fullscreen button, and most important: subtitle button
This is a really interesting idea. I wonder if the caption track could be 
added to the audio element in any way.
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~cadence/tube-devel/patches/22370/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH cloudtube] fixed volume slider Export this patch

~data-niklas
From: Niklas Loeser <niklas@4loeser.net>

---
 html/static/js/player.js      | 11 ++++++++++-
 pug/video.pug                 |  4 ++--
 sass/includes/video-page.sass | 11 ++++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/html/static/js/player.js b/html/static/js/player.js
index 4b3ca6a..8252427 100644
--- a/html/static/js/player.js
+++ b/html/static/js/player.js
@@ -51,9 +51,15 @@ class FormatLoader {
			audio.src = this.npa.url
			audio.pause()
			audio.currentTime = lastTime
			audio.controls = true
			audio.style.visibility = "visible"
			video.controls = false
		} else {
			audio.pause()
			audio.removeAttribute("src")
			audio.controls = false
			audio.style.visibility = "hidden"
			video.controls = true
		}
	}
}
@@ -148,8 +154,11 @@ function playbackIntervention(event) {
	}
}

for (let eventName of ["pause", "play", "seeked"]) {
/*for (let eventName of ["pause", "play", "seeked"]) {
	video.addEventListener(eventName, playbackIntervention)
}*/
for (let eventName of ["pause", "play", "seeked"]){
	audio.addEventListener(eventName, playbackIntervention)
}
for (let eventName of ["canplaythrough", "waiting", "stalled", "ratechange"]) {
	video.addEventListener(eventName, playbackIntervention)
diff --git a/pug/video.pug b/pug/video.pug
index f1f375e..af84682 100644
--- a/pug/video.pug
+++ b/pug/video.pug
@@ -24,13 +24,14 @@ block content
        .video-container
          - const format = formats[0]
          if format
            video(controls preload="auto" width=format.second__width height=format.second__height data-itag=format.itag autoplay=continuous||autoplay)#video.video
            video(preload="auto" width=format.second__width height=format.second__height data-itag=format.itag autoplay=continuous||autoplay)#video.video
              source(src=format.url+mediaFragment type=format.type)
              each t in video.captions
                track(label=t.label kind="subtitles" srclang=t.languageCode src=t.url)
          else
            video(src="")#video.video
            .stream-notice The server provided no playback streams.
          audio(controls width=format.second__width height=format.second__height preload="auto")#audio

        #current-time-container
        #end-cards-container
@@ -46,7 +47,6 @@ block content
            div= video.second__viewCountText
            div(style=`--rating: ${video.rating*20}%`)#rating-bar.rating-bar

        audio(preload="auto")#audio
        #live-event-notice
        #audio-loading-display

diff --git a/sass/includes/video-page.sass b/sass/includes/video-page.sass
index 5b99428..64bab71 100644
--- a/sass/includes/video-page.sass
+++ b/sass/includes/video-page.sass
@@ -13,12 +13,21 @@
.main-video-section
  .video-container
    text-align: center
    display: grid

    .video
    .video, #audio
      display: inline-block
      width: 100%
      height: auto
      max-height: 80vh
      grid-column: 1
      grid-row: 1
      display: inline-block
      width: 100%
      height: auto
      max-height: 80vh
      grid-column: 1
      grid-row: 1

  .stream-notice
    background: c.$bg-darkest
-- 
2.30.2
Does this also display the audio track's current time, pause button, seek 
bar, etc?