UserStyle: Youtube progress bar help please? (SORTED)

[madmudmob]

EDITED TO ADD: This all got too much for my tiny techy-less brain so I have started another topic asking about a much simpler way around this (by just keeping my cursor near the progress bar to keep it visible rather than installing something to do it for me) ...
viewtopic.php?f=7&t=3026345
and would appreciate anyone thoughts, hints, tips etc please?
............................................................................................................................................................................................

I would really like YouTube's progress bar to be always visible as well as move with the video rather than just update when I pass the mouse over it.

Found this UserStyle for that ....
https://userstyles.org/styles/117321/yo ... essbar-fix

Code: Select all

@-moz-document domain("youtube.com") {

.ytp-chrome-bottom {

    bottom:0;

    transition:bottom .25s cubic-bezier(0.0,0.0,0.2,1) !important;

    

}

.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-chrome-bottom[aria-hidden=true] {

    opacity:1 !important;

    bottom:-37px;

}



.ytp-big-mode.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-big-mode .ytp-chrome-bottom[aria-hidden=true] {

    bottom:-54px;

}



.ytp-progress-bar-container {

    width:100%;

    margin-left:0;

    transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;

}



.ytp-autohide .ytp-progress-bar-container {

    width: calc( 100% + 24px );

    margin-left:-12px;

}



.ytp-big-mode.ytp-autohide .ytp-progress-bar-container {

    width: calc( 100% + 48px );

    margin-left:-24px;

}



.ytp-autohide .ytp-player-content:not(.html5-endscreen) {

    transition:bottom .25s cubic-bezier(0.0,0.0,0.2,1),top .25s cubic-bezier(0.0,0.0,0.2,1);

}



.ytp-autohide:not(.ytp-ad-overlay-open) .ytp-subtitles-player-content:not(.html5-endscreen):not(.ytp-iv-player-content) {

    bottom: 1em !important;

}

}

which tells me I also need to install this ....
https://greasyfork.org/scripts/11486-yo ... er.user.js

Code: Select all

// ==UserScript==
// @name         YouTube Progressbar Updater
// @version      0.2
// @description  Forces the YouTube progress bar to update even when it's supposed to be hidden.
// @author       Workgroups
// @match        *://www.youtube.com/*
// @grant        none
// @namespace https://greasyfork.org/users/14014
// ==/UserScript==

var findVideoInterval = setInterval(function() {
    var ytplayer = document.querySelector(".html5-video-player:not(.addedupdateevents)");
    if (!ytplayer) {
        return;
    }
    ytplayer.className+=" addedupdateevents";
    var video = ytplayer.querySelector("video");
    var progressbar = ytplayer.querySelector(".ytp-play-progress");
    var loadbar = ytplayer.querySelector(".ytp-load-progress");
    if (!video || !progressbar || !loadbar) {
        return;
    }
    video.addEventListener("timeupdate",function() {
        progressbar.style.transform = "scaleX("+(video.currentTime/video.duration)+")";
    });
    video.addEventListener("progress",function() {
        loadbar.style.transform = "scaleX("+(video.buffered.end(video.buffered.length-1)/video.duration)+")";
    });
},500);

but when I checked for errors that second lot tells me once I cut'n'paste it as a new UserStyle ....

Could some kind person help me achieve my aim please as I am thoroughly out of my depth and lost. I have installed both, cleared cookies/cache and restarted my lovely Firefox and am now hopeless as to knowing what to do next.

[smsmith]

Your second link needs to be installed as a user script in Greasemonkey, not as a user style in Stylish.

https://addons.mozilla.org/en-US/firefo ... src=search

[madmudmob]

Ah, thankyou.
Don't suppose you or some other clever techy person would know how to write a UserScript to make the progress bar continue to move/update when the bar is set to stay permanently visible please?

I have found this short script to always show the progress bar ....

Code: Select all

@-moz-document domain("youtube.com")
{
  .ytp-chrome-bottom { opacity: 1 !important; }
}

It seems to me that the long and complicated ones I first posted kinda seem bloated compared to this little one

[smsmith]

I first installed the userStyle. Then I installed the userScript. Then I opened youtube and played a video. The statusbar was always present. It's a very thin line at the bottom of the video. Shows the length through in red, and amount downloaded in gray. I was signed in to youtube. Not sure you need to be, though.

I don't think the userScript is long. The first ten or so lines are comments, and the actual code is 15 or 20 lines.

[madmudmob]

Progress .... have installed Greasemonkey and the script for it. Then made a new UserStyle as in my top post.
Partial success .... the bar's red line is at the very bottom of the page so I can't see the timer/volume etc. But, if I keep the mouse on the bar it stays up and the time progresses.

Any thoughts on lifting the bar so it will always be visible please?

[madmudmob]

I've been busy trying to get my YouTube progress bar to always show and still progress to show the time as in this thread ....
http://forums.mozillazine.org/viewtopic ... &t=3026304

To make it work I have had to install Greasemonkey to use one script.

I remember I previously asked about a UserChrome script being used as a UserStyle in Stylish and was told it could. I installed it as a new UserStyle by cutting and pasting it all and it works fine ....
http://forums.mozillazine.org/viewtopic ... &t=3025080

So I'm wondering if the same techy magic could be used to turn a Greasemonkey one into a UserStyle please? It seems a shame to install another add-on for just the one script.

All and any help greatly appreciated and ....

[madmudmob]

This all got too much for my tiny techy-less brain so I have started another topic asking about a much simpler way around this (by just keeping my cursor near the progress bar to keep it visible rather than installing something to do it for me) ...
http://forums.mozillazine.org/viewtopic ... &t=3026345
and would appreciate anyone thoughts, hints, tips etc on that please?

[LIMPET235]

Hi Roz,
Happy New Year to you & yours.
I merged your 2nd thread question in here to stop any confusion from occurring, ie; chasing the same topic/threads for any answers.
Always best to stay with the one thread.
I'll leave the other one open, but don't be surprised if it gets locked as a duplicate.

[madmudmob]

Hiya you .... thanks for that, I didn't know what to do for the best

[madmudmob]

I eventually found this page and it has done the job ....
https://www.reddit.com/r/youtube/commen ... ar_always/

[LIMPET235]

Hi Roz,
Thanks for the feedback.
Well, I never...
I saw that site/page a few days ago after a Google but wasn't sure if it suited.
I also found this one...which is definitely not what you wanted.
> https://www.reddit.com/r/MetaSpoilerFre ... okmarklet/
Couldn't find a bookmarklet that suited.