[Feature Request] [Example] Music Bar on the top

[przemsiedl]

Hello, I have a question. Can you add a music Bar to the top on the site like this? I wrote this some days ago, and it will be a great ready-to-use feature. It's not the best design but works perfectly. Of course, you can change this if you want, that's only my solution.

1. Install application Music
2. Enable showing nextcloud in iframes,
3. On server go to directory: /var/www/html/apps/music/dist,
4. Edit js file, and paste script:

function background() {
	$("#backgorundButton").unbind();
	$("#backgorundButton").click(foreground);

	document.getElementById("content").hidden = true;
	document.getElementById("content").id = "content-hidden";
	document.getElementById("header").hidden = true;
	document.getElementById("header").id = "header-hidden";

	if(document.getElementById("ifrm-foregorund") == null)
	{
		var newURL = window.location.protocol + "//" + window.location.host;
		var ifrm = document.createElement("iframe");
		ifrm.setAttribute("src", newURL);
		ifrm.id = "ifrm-foregorund";
		ifrm.style.width = "100%";
		ifrm.style.height = "100%";
		ifrm.style.position="absolute";
		ifrm.style.top="76px";
		ifrm.style.left="0";
		ifrm.style.zIndex = "1";
		document.body.prepend(ifrm);
	} else {
	document.getElementById("ifrm-foregorund").hidden = false;
	}

	var controls = document.getElementById("controls");
	controls.style.position="absolute";
	controls.style.top="0";
	controls.style.left="0";
	controls.style.width="100%"
	controls.style.minwidth="100%"
	document.body.prepend(controls);
}

function foreground() {
	$("#backgorundButton").unbind();
	$("#backgorundButton").click(background);

	document.getElementById("content-hidden").hidden = false;
	document.getElementById("content-hidden").id = "content";
	document.getElementById("header-hidden").hidden = false;
	document.getElementById("header-hidden").id = "header";
	document.getElementById("ifrm-foregorund").hidden = true;
	var controls = document.getElementById("controls");
	document.getElementById("app-content").prepend(controls);
}

$("#backgorundButton").click(background);

5. go to directory /var/www/html/apps/music/templates/partials
6. edit: controls.php,
7. and add selected line,
   

[paulijar]

An interesting concept, and surprisingly well working, considering how little code there is. So in essence, you are running a second instance of the Nextcloud site within the Music app, and then can swap quickly between showing the Music app on fullscreen or only as a banner.

I'm still not certain if this is something to be included to the default installation of the Music app. At least it would still need a lot of polishing on the rough edges before being of production quality. But still, it would work somewhat against the usual design of Nextcloud/ownCloud so the concept is a bit controversial.

For anyone wishing to monkey-patch their installation, here are a couple of pointers:

1. Note that in the code above, the button name is not "backgroundButton" but "backgorundButton". It took me a while to realize, why my button was not doing anything.
2. You can enable the use of the iframe by adding the line
   $policy->addAllowedFrameDomain("'self'");
   between these lines:
   

   music/appinfo/app.php

   Lines 93 to 95 in 39568df

   	$policy->addAllowedImageDomain('https://*:*');
   	$container->getServer()->getContentSecurityPolicyManager()->addDefaultPolicy($policy);

3. The page layout works better if you change the code of the opening post a bit. Change this line:
   ifrm.style.height = "100%";
   to this:
   ifrm.style.height = 'calc(100% - 76px)';

[przemsiedl]

Thanks, @paulijar for the additional information.
Sorry for this mistake in the button name, the standard for me. I change it when I find some time and check the changes proposed.
This code does not work well on mobile devices. I'll do this in my free time.

[Yiannis128]

It would be nice if it could be integrated into the main bar kind of like nextcloud/text#2808

[paulijar]

To me, it feels a bit wrong to show the music controls above the title pane of Nextcloud (or ownCloud). So if I would finalize and integrate a feature like this, then my choice would be to instead show the music controls pane at the bottom of the window. Also, I would make this controls pane much thinner, showing only small buttons and one line of text.

[Yiannis128]

To me, it feels a bit wrong to show the music controls above the title pane of Nextcloud (or ownCloud). So if I would finalize and integrate a feature like this, then my choice would be to instead show the music controls pane at the bottom of the window. Also, I would make this controls pane much thinner, showing only small buttons and one line of text.

I agree with this more than my own suggestion.

Or, have a little media button next to the search icon in the top right that opens a little drop down with media player controls.