Global Media Controls Panel

sjudenim

Nicely done

MasterLeo29

Congrats on your mod !

A modification I did for me, that might be useful for others :
Normally, I have the top tool bar for webpanels turned off. Still, for this one (since it looks like a "native" one) I wanted a title just like the other.

So I added this panel header :

  const title = document.createElement('h1');
  title.innerHTML = name;
  const panelHeader = gnoh.createElement('header', null, null, title);

And on your "createPanelCustom" I added this :

panel.append(panelHeader);

(also added a small padding top on your styles)
[data-global-media-controls] header { padding-top: 12px; }

Hope it helps someone

luetage

@masterleo29 said in Global Media Controls Panel:

[data-global-media-controls] header { padding-top: 12px; }

That’s a good idea. I noticed this by accident today. Just one improvement to your improvement to make it even more similar to native panels ^^

'[data-global-media-controls] header { padding-top: 12px; padding-left: 9px; margin-bottom: 0px; }',

kruzifixium

great thing - would be awesome to see it added to vivaldi itself or as a plugin, too.

unfortunately it stopped working after a while - maybe i've to reapply again, but maybe it was an update of vivaldi itself. idk but i've to try again

luetage

@kruzifixium Should still work, I got it running. Javascript mods need to be applied after each update, it’s best to create a batch script to automate the process, check pinned topics.

kruzifixium

@luetage

whoops - yepps, works again...
totally forgot about troubleshooting in the javascript-thread.

thanks a lot

tam710562

I have added a new update. It exceeds the number of characters for the post

shifte

@tam710562
Great! ^^
Advent of Volume Controller.

luetage

@tam710562 Great update! Perhaps the search functionality should be case‐insensitive.

tam710562

@luetage You're right. it's a bug

MasterLeo29

I added a little eye candy : drag and drop.
If anyone is interested, you just need to locate this :

itemInfo.item = gnoh.createElement('div'

and append this, next to the class "item" :

    draggable:"true", events : {
        drag : function (evt){
          dragSource=evt.target;
          
          evt.dataTransfer.effectAllowed = "move";
        },
        dragover : function (evt){
          evt.preventDefault();
          
          evt.dataTransfer.dropEffect = "move";
        },
        drop : function (evt){
          //drop
          evt.preventDefault();
          evt.stopPropagation();

          var parent = dragSource.parentNode;
          var dest = evt.target;

          while(!dest.classList.contains('item')){
              dest = dest.parentNode;
          }

          var sourceIdx = Array.prototype.indexOf.call(parent.children, dragSource);
          var destIdx = Array.prototype.indexOf.call(parent.children, dest);

          if (sourceIdx === destIdx)
            return;

          let replaced = parent.replaceChild(dragSource, dest);
          parent.insertBefore(replaced, sourceIdx > destIdx ? dragSource.nextSibling : dragSource);
        }
      }

NylaTheWolf

Thank you so much for making this mod! This was one feature from Chrome that I seriously missed! You even included the Picture in Picture button! Thank you!

RedSnt

@MasterLeo29

Not sure what this "drag and drop" function is supposed to do, but it makes the volume slider a lot harder to use.
I thought the code you added would make it possible to rearrange the items in the GMC list, but that's not been the case for me

@tam710562

Loving this modification! Excellent work. Makes it a lot more tolerable to visit sites like Bandcamp that doesn't have a volume slider (in 2022..)!

MasterLeo29

@RedSnt The drag and drop is supposed to let you reorder the items in the panel, yes. I made this before the 'volume slider' version, so there may be conflicts occuring.

stardepp

@tam710562

Could you support Deezer?

https://www.deezer.com/en/

tam710562

@stardepp Support is possible and I actually made a version to support it. But releasing and installing it is quite complicated, it won't be like regular mods so I canceled it.

sfranky

This post is deleted!

stardepp

@tam710562 This is just to report how well the Global Media Control panel works with German streaming services:

Bild Text

tam710562

I added an update with some new features

luetage

@tam710562 Great update. The progress gets confused by live streams, but this is not really a problem.