Global Media Controls Panel
-
@luetage I think it's possible with audio but not sure with mail
-
@oudstand This mod doesn't work for a webpanel, I'll think about it
-
Generic fontawesome play icon for boring users:
playlistMusic: '<svg viewBox="0 0 1680 1680"><path fill="currentColor" d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm384 823q32-18 32-55t-32-55l-544-320q-31-19-64-1-32 19-32 56v640q0 37 32 56 16 8 32 8 17 0 32-9z" /></svg>',
-
I added a new update for the mod
- Add audio support.
- Add a close button to remove media controls from the list.
-
@tam710562 Works with Musify (audio streaming) but not yet with Deezer or Spotify.
-
Nicely done
-
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
-
@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; }',
-
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
-
@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.
-
whoops - yepps, works again...
totally forgot about troubleshooting in the javascript-thread.thanks a lot
-
I have added a new update. It exceeds the number of characters for the post
-
@tam710562
Great! ^^
Advent of Volume Controller. -
@tam710562 Great update! Perhaps the search functionality should be case‐insensitive.
-
@luetage You're right. it's a bug
-
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); } }
-
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!
-
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 meLoving this modification! Excellent work. Makes it a lot more tolerable to visit sites like Bandcamp that doesn't have a volume slider (in 2022..)!
-
@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.
-