thin media bar layout

copyparty/web/browser.css

@@ -1135,18 +1135,33 @@ html.dz #flogout {
 	font-size: 1.4em;
 	left: 0;
 	right: 0;
-	bottom: -2.5em;
+	bottom: 0;
-	height: 2.5em;
 	z-index: 1;
 	touch-action: none;
 }
 #widget.anim {
-	transition: bottom 0.15s, margin-left 0.15s;
+	transition: margin-left 0; /* can't set this above 0 due to onwidgetresize */
 }
-#widget.open {
+#widget.anim #widgeti {
+	transition: transform 0.15s, height 0.15s;
+}
+#widget.open #widgeti{
 	/* box-shadow: 0 0 1em rgba(0,48,64,0.2); */
-	bottom: 0;
+	height: 100%;
+	transform: scaleY(1);
 }
+
+#pbarthinpos {
+	display: none;
+	align-content: center;
+	padding: .2em .5em;
+	padding-bottom: 0;
+	height: 2em;
+}
+#widget.thin #pbarthinpos{
+	display: block;
+}
+
 html.y #widget.open {
 	border-top: .2em solid var(--bg-u2);
 }
@@ -1154,7 +1169,12 @@ html.y #widget.open {
 	position: relative;
 	z-index: 10;
 	width: 100%;
-	height: 100%;
+	height: 0;
+	transform: scaleY(0);
+  	transform-origin: bottom;
+}
+#np_inf {
+	height: 0;
 }
 #fshr,
 #wtgrid, #wtgrid2,
@@ -1330,7 +1350,6 @@ html.y #widget.open {
 #altprogbar {
 	display: none;
 	grid-template-columns: max-content auto max-content;
-	max-width: 40vw;
 	text-align: center;
 }
 #altprogbar.vis {
@@ -3484,7 +3503,7 @@ html.d #treepar {
 	}
 }
 @media (max-width: 35em) {
-	#ops>a[data-dest="new_md"],
+	/* #ops>a[data-dest="new_md"], */
 	#ops>a[data-dest="msg"] {
 		display: none;
 	}
@@ -4371,7 +4390,7 @@ html.e #detree {
 }
 
 #rcm > a {
-	padding: .2rem .3rem;
+	padding: .3rem;
 }
 
 #rcm > .hide {

copyparty/web/browser.js

@@ -854,12 +854,13 @@ ebi('widget').innerHTML = (
 	'	href="#" id="wtico">♫</a>' +
 	'</div>' +
 	'<div id="widgeti">' +
+	'	<div id="pbarthinpos"></div>' +
 	'	<div id="pctl">' +
 	'		<a href="#" id="bprev" class="icon" tt="' + L.wt_prev + '">' + svg_prev + '</a>' +
 	'		<a href="#" id="bplay" class="icon" tt="' + L.wt_play + '">' + svg_play + '</a>' +
 	'		<a href="#" id="bnext" class="icon" tt="' + L.wt_next + '">' + svg_next + '</a>' +
 	'		<span id="trackname"></span>' +
-	'		<div id="progbar" style="position: relative; height: 100%;">' +
+	'		<div id="progbar" style="position: relative; height: 80%;">' +
 	'			<canvas id="barbuf"></canvas>' +
 	'			<canvas id="barpos"></canvas>' +
 	'		</div>' +
@@ -872,7 +873,7 @@ ebi('widget').innerHTML = (
 	'		<a href="#" class="tgl btn" id="au_shuf" tt="' + L.mt_shuf + '">🔀</a>' +
 	'		<div id="pvolbg">' + svg_vol + '<canvas id="pvol"></canvas></div>' +
 	'	</div>' +
-	'</div>' +
+	'</div>'+
 	'<div id="np_inf">' +
 	'	<img id="np_img" />' +
 	'	<span id="np_url"></span>' +
@@ -7065,6 +7066,8 @@ function aligngriditems() {
 	}
 	if (st.justifyContent != val)
 		st.justifyContent = val;
+
+	onwidgetresize();
 }
 onresize100.add(aligngriditems);
 
@@ -7085,6 +7088,29 @@ var filecolwidth = (function () {
 })();
 onresize100.add(filecolwidth, true);
 
+function onwidgetresize(){
+	var widget = ebi('widget');
+	var bar = ebi('pctl');
+	var pbarthinpos = ebi('pbarthinpos');
+	var width = widget.offsetWidth;
+
+	var thin = width < 800; //px
+	var gtc = `max-content max-content max-content ${thin ? '' : '20%'} auto max-content max-content max-content`;
+	if(thin && bar.children.length > gtc.split(' ').length){
+		pbarthinpos.appendChild(ebi('progbar'));
+		pbarthinpos.appendChild(ebi('altprogbar'));
+	}
+	else if(!thin && bar.children.length < gtc.split(' ').length){
+		ebi('trackname').after(ebi('progbar'));
+		ebi('trackname').after(ebi('altprogbar'));
+	}
+	ebi('altprogbar').maxWidth = thin ? '' : '40vw'
+	bar.style.gridTemplateColumns = gtc;
+	
+	clmod(widget, 'thin', thin);
+}
+window.addEventListener('resize', onwidgetresize);
+onwidgetresize();
 
 var treectl = (function () {
 	var r = {
@@ -7350,6 +7376,7 @@ var treectl = (function () {
 		ebi('tree_footer').style.width = (iw - 2) + 'em';
 		ebi('wrap').style.marginLeft = w2;
 		ebi('widget').style.marginLeft = (iw /1.4) + 'em';
+		onwidgetresize();
 		onscroll();
 	}