update build

Build.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
-SourceApps="SpiderADB TiVuOcto WuppiMini"
-HubSdkApps="${SourceApps} MatrixStickerHelper TiktOctt"
+SourceApps="SpiderADB TiktOctt TiVuOcto WuppiMini"
+HubSdkApps="${SourceApps} MatrixStickerHelper"
 HtmlHeadInject='<script src="../../shared/OctoHub-Global.js"></script>'
 
 quoteVar(){ echo '"'"$1"'"' ;}
@@ -20,8 +20,20 @@ for App in ${SourceApps}
 do
 	mkdir -p "./public/${App}"
 	cd "./source/${App}"
-	sh ./Requirements.sh
-	cp -vr $(sh ./Build.sh) "../../public/${App}/"
+	if [ -f ./Requirements.sh ]
+	then sh ./Requirements.sh
+	else
+		[ -f ./package.json ] && (npm update; npm install)
+	fi
+	copyfiles="$(sh ./Build.sh)"
+	cp -vr $copyfiles "../../public/${App}/"
+	for file in $copyfiles
+	do
+		path="../../public/${App}/${file}"
+		if [ ! -e "${path}" ]
+		then mkdir -p "${path}" && rm -rf "${path}" && cp "${file}" "${path}"
+		fi
+	done
 	cd ../..
 done
 
@@ -33,10 +45,10 @@ do
 	file="./${App}/index.html"
 	name="$(       getMetaAttr "${file}" og:title)"
 	description="$(getMetaAttr "${file}" og:description)"
-	url="$(        getMetaAttr "${file}" Url OctoSpaccHubSdk)"
+	url="$(        getMetaAttr "${file}" OctoSpaccHubSdk:Url)"
 	cat << [OctoSpaccHubSdk-WebManifest-EOF] > "./${App}/WebManifest.json"
 	{
-		$(getMetaAttr "${file}" WebManifestExtra OctoSpaccHubSdk | sed s/\'/\"/g)
+		$(getMetaAttr "${file}" OctoSpaccHubSdk:WebManifestExtra | sed s/\'/\"/g)
 		$([ -n "${description}" ] && echo "$(quoteVar description): $(quoteVar "${description}"),")
 		"start_url": "${url}",
 		"scope": "${url}",

source/SpiderADB/index.html

@@ -4,8 +4,8 @@
 	<meta charset="UTF-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<meta property="og:title" content="SpiderADB"/>
-	<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/SpiderADB/"/>
-	<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'512x512' }],"/>
+	<meta property="OctoSpaccHubSdk:Url" content="https://hub.octt.eu.org/SpiderADB/"/>
+	<meta property="OctoSpaccHubSdk:WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'512x512' }],"/>
 	<link rel="apple-touch-icon" href="./icon.png"/>
 	<link rel="stylesheet" href="./holo-web/holo-base-elements.css"/>
 	<link rel="stylesheet" href="./holo-web/holo-base-widgets.css"/>

source/TiVuOcto/Build.sh

@@ -1,2 +1,5 @@
 #!/bin/sh
-echo index.html node_modules
+echo index.html menu.svg \
+	node_modules/muicss/dist/css/mui.min.css node_modules/muicss/dist/js/mui.min.js \
+	node_modules/video.js/dist/video-js.min.css node_modules/video.js/dist/video.min.js \
+;

source/TiVuOcto/Requirements.sh

@@ -1,3 +0,0 @@
-#!/bin/sh
-npm update
-npm install

source/TiVuOcto/index.html

@@ -5,10 +5,10 @@
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 	<meta property="og:title" content="TiVuOcto 📺️"/>
-	<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/TiVuOcto/"/>
-	<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone',"/>
-	<link href="./node_modules/muicss/dist/css/mui.min.css" rel="stylesheet"/>
-	<link href="./node_modules/video.js/dist/video-js.min.css" rel="stylesheet"/>
+	<meta property="OctoSpaccHubSdk:Url" content="https://hub.octt.eu.org/TiVuOcto/"/>
+	<meta property="OctoSpaccHubSdk:WebManifestExtra" content="'display':'standalone',"/>
+	<link rel="stylesheet" href="./node_modules/muicss/dist/css/mui.min.css"/>
+	<link rel="stylesheet" href="./node_modules/video.js/dist/video-js.min.css"/>
 	<style>
 :root {
 	--headerHeight: 48px;
@@ -25,7 +25,6 @@
 html,
 body {
 	background-color: var(--colorBackground);
-	color: var(--colorForeground);
 }
 
 body a {
@@ -40,6 +39,12 @@ button {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+	color: var(--colorForeground) !important;
+}
+
+.mui-textfield > input::placeholder {
+	color: var(--colorForeground2);
+	border-bottom-color: var(--colorForeground2);
 }
 
 .mui-dropdown hr {
@@ -57,7 +62,6 @@ button {
 	white-space: nowrap;
 }
 
-
 .mui-dropdown__menu > div > li > *:focus,
 .mui-dropdown__menu > div > li > *:hover {
 	text-decoration: none;
@@ -65,7 +69,6 @@ button {
 	background-color: #EEE;
 }
 
-
 #header {
 	position: fixed;
 	top: 0;
@@ -132,6 +135,7 @@ button {
 
 #header .sidedrawer-toggle,
 #header .sidemenu-toggle {
+	line-height: 20px;
 	color: var(--colorForeground);
 	cursor: pointer;
 	user-select: none;
@@ -139,8 +143,11 @@ button {
 
 #header .sidedrawer-toggle {
 	margin-right: 10px;
-	line-height: 20px;
-	font-size: 19px;
+}
+
+#header .sidedrawer-toggle > img {
+	vertical-align: middle;
+	padding-bottom: 0.5em;
 }
 
 #header .sidemenu-toggle {
@@ -151,7 +158,7 @@ button {
 #header .sidedrawer-toggle:hover,
 #header .sidemenu-toggle:focus,
 #header .sidemenu-toggle:hover {
-	color: var(--colorForeground2);
+	opacity: 70%;
 	text-decoration: none;
 }
 
@@ -163,11 +170,14 @@ button {
 	padding-left: 20px;
 }
 
-#sidedrawer .mui-dropdown {
-	z-index: 2;
-	padding: 1em;
+#sidedrawer > div.side-padded {
 	box-sizing: border-box;
 	width: 100%;
+	padding: 1em;
+}
+
+#sidedrawer .mui-dropdown {
+	z-index: 2;
 }
 
 #sidedrawer .mui-dropdown > button {
@@ -184,11 +194,6 @@ button {
 	padding-left: 0px;
 }
 
-/* #sidedrawer > ul > li > ul > li {
-	margin-top: 1em;
-	margin-bottom: 1em;
-} */
-
 #sidedrawer > ul > li > ul > li,
 #sidedrawer > ul > li > ul > li > a {
 	padding: 0.5em;
@@ -274,30 +279,33 @@ button {
 			<span class="mui--text-title"></span>
 		</div>
 		<div class="mui-divider"></div>
-		<div class="mui-dropdown" id="channel-select">
-			<button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
-				<span id="channel-selected">Channels</span> <span class="mui-caret"></span>
-			</button>
-			<ul class="mui-dropdown__menu">
-				<!-- TODO: implement these, add playlists, delete playlists, delete history
-				<li><a>⭐️ Favorites</a></li>
-				<li><a>📅️ Recent</a></li>
-				<hr/> -->
-				<li><a data-m3u="https://raw.githubusercontent.com/Free-TV/IPTV/master/playlist.m3u8">
-					Free-TV IPTV
-				</a></li>
-				<li><a data-m3u="https://iptv-org.github.io/iptv/index.m3u">
-					iptv-org IPTV
-				</a></li>
-			</ul>
+		<div class="side-padded">
+			<div class="mui-dropdown" id="channel-select">
+				<button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
+					<span id="channel-selected">Channels</span> <span class="mui-caret"></span>
+				</button>
+				<ul class="mui-dropdown__menu">
+					<!-- TODO: implement these, add playlists, delete playlists, delete history
+					<li><a>⭐️ Favorites</a></li>
+					<li><a>📅️ Recent</a></li>
+					<hr/> -->
+					<li><a data-m3u="https://raw.githubusercontent.com/Free-TV/IPTV/master/playlist.m3u8">
+						Free-TV IPTV
+					</a></li>
+					<li><a data-m3u="https://iptv-org.github.io/iptv/index.m3u">
+						iptv-org IPTV
+					</a></li>
+				</ul>
+			</div>
+			<!--<div class="mui-textfield"><input type="text" placeholder="Search..."/></div>-->
 		</div>
 		<ul id="channels-list"></ul>
 	</div>
 	<header id="header">
 		<div class="mui-appbar mui--appbar-line-height">
 			<div class="mui-container-fluid"><!--
-				--><a class="sidedrawer-toggle mui--visible-xs-inline-block mui--visible-sm-inline-block js-show-sidedrawer">𝋯</a><!--
-				--><a class="sidedrawer-toggle mui--hidden-xs mui--hidden-sm js-hide-sidedrawer">𝋯</a><!--
+				--><a class="sidedrawer-toggle mui--visible-xs-inline-block mui--visible-sm-inline-block js-show-sidedrawer"><img src="./menu.svg"/></a><!--
+				--><a class="sidedrawer-toggle mui--hidden-xs mui--hidden-sm js-hide-sidedrawer"><img src="./menu.svg"/></a><!--
 				--><span class="mui--text-title"></span>
 				<div class="mui-dropdown">
 					<a class="sidemenu-toggle" data-mui-toggle="dropdown">︙</a>
@@ -372,12 +380,8 @@ button {
 				<li>Channel list in sidebar, divided by country with flag emojis.</li>
 			</ul>
 		</div>
-		<p id="label-loading" hidden="true"><!-- TODO make this more useful -->
-			Loading...
-		</p>
-		<p id="no-video" hidden="true">
-			Select a valid channel to play video.
-		</p>
+		<p id="label-loading" hidden="true">Loading...</p><!-- TODO make this more useful -->
+		<p id="no-video" hidden="true">Select a valid channel to play video.</p>
 		<video id="video-player" class="video-js" controls="controls" data-setup="{}"></video>
 	</div>
 	<script src="./node_modules/muicss/dist/js/mui.min.js"></script>

source/TiVuOcto/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>

source/TiktOctt/Build.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+echo index.html logo.png node_modules/vlitejs/dist/vlite.css node_modules/vlitejs/dist/vlite.js

source/TiktOctt/Requirements.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+npm update
+npm install
+cd ./node_modules/vlitejs/dist
+[ ! -f ./vlite.js.old ] && mv ./vlite.js ./vlite.js.old
+> ./vlite.js
+echo '(function(){' >> ./vlite.js
+cat ./vlite.js.old  >> ./vlite.js
+echo '})();'        >> ./vlite.js
+sed -i -e 's|;export{|;window.Vlitejs=|' ./vlite.js
+sed -i -e 's|as default};|;|'            ./vlite.js

source/TiktOctt/index.html

@@ -4,8 +4,8 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <meta property="og:title" content="🎵️ TiktOctt"/>
-<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/TiktOctt/"/>
-<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./logo.png', 'type':'image/png', 'sizes':'1024x1024' }],"/>
+<meta property="OctoSpaccHubSdk:Url" content="https://hub.octt.eu.org/TiktOctt/"/>
+<meta property="OctoSpaccHubSdk:WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./logo.png', 'type':'image/png', 'sizes':'1024x1024' }],"/>
 <link rel="apple-touch-icon" href="./logo.png"/>
 <style>
 :root {
@@ -228,11 +228,8 @@ button[name="menu"] {
 	background: black;
 }
 </style>
-<link href="https://cdn.jsdelivr.net/npm/vlitejs@6/dist/vlite.css" rel="stylesheet" crossorigin />
-<script type="module">
-	import Vlitejs from 'https://cdn.jsdelivr.net/npm/vlitejs@6';
-	window.Vlitejs = Vlitejs;
-</script>
+<link rel="stylesheet" href="./node_modules/vlitejs/dist/vlite.css"/>
+<script src="./node_modules/vlitejs/dist/vlite.js"></script>
 </head>
 <body>
 	<div class="splash">
@@ -250,7 +247,6 @@ button[name="menu"] {
 	<div class="videosContainer">
 		<div class="videosList"></div>
 	</div>
-	<!-- <div class="footer"></div> -->
 <script>(function(){
 
 const icons = {
@@ -263,7 +259,7 @@ const icons = {
 let currentVideoElem, firstVideoElem, lastVideoElem;
 let isSplashNeeded = true;
 let userInteracted = false;
-let preloadCount = 5;
+let videoPreloadCount = 5;
 const backendFetchCount = 50;
 const videoObjects = [];
 const postsCache = {};
@@ -272,7 +268,7 @@ const postsHistory = [];
 const scrollObserver = new IntersectionObserver(function(elems){
 	for (elem of elems) {
 		if (elem.isIntersecting) {
-			addVideos();
+			addVideos(videoPreloadCount);
 		}
 	}
 });
@@ -305,7 +301,6 @@ async function pullNewVideos () {
 function onUserInteract () {
 	userInteracted = true;
 	if (currentVideoElem) {
-		//currentVideoElem.muted = false;
 		videoObjects[currentVideoElem.dataset.videoId].player.unMute();
 	}
 	document.querySelector('.audioNag')?.remove();
@@ -380,16 +375,16 @@ function openContentFrame (content, name, link) {
 	});
 }
 
-async function addVideos () {
+async function addVideos (preloadCount) {
 	const fragmentElem = document.createDocumentFragment();
-	if (firstVideoElem) { //if (lastVideoElem) {
-		scrollObserver.unobserve(firstVideoElem);//lastVideoElem);
+	if (firstVideoElem) {
+		scrollObserver.unobserve(firstVideoElem);
 		firstVideoElem = null;
 	}
 	try {
 		await pullNewVideos();
 	} catch(err) {
-		setTimeout(addVideos, 1000);
+		setTimeout((function(){ addVideos(preloadCount); }), 1000);
 		return;
 	}
 	for (let i=0; i<preloadCount; i++) {
@@ -418,8 +413,7 @@ async function addVideos () {
 		hudElem.querySelector('button[name="share"]').onclick = shareLink;
 		const videoElem = Object.assign(document.createElement('video'), {
 			src: post.videoUrl,
-			muted: true, loop: true, //autoplay: true,
-			//onclick: onClickVideo,
+			muted: true, loop: true,
 			onerror: (function(){
 				// we must find a clean way to make the video autoplay if it loads
 				// after failing the first time, this is just a temporary patch
@@ -446,8 +440,6 @@ async function addVideos () {
 		}
 		itemElem.classList.add('videoItem');
 		itemElem.appendChild(videoElem);
-		//const videoObject = videojs(videoElem);
-		//videoElem.dataset.videoObject = (videoObjects.push(videoObject) - 1);
 		itemElem.appendChild(hudElem);
 		fragmentElem.appendChild(itemElem);
 		const videoObject = await new Vlitejs(videoElem, { onReady: onCanPlayVideo });
@@ -455,16 +447,11 @@ async function addVideos () {
 		videoElem.parentElement.onclick = onClickVideo;
 	}
 	document.querySelector('.videosList').appendChild(fragmentElem);
-	scrollObserver.observe(firstVideoElem);//lastVideoElem);
+	scrollObserver.observe(firstVideoElem);
 }
-addVideos();
-//preloadCount -= 1;
+addVideos(1);
 
 function onClickVideo () {
-	//currentVideoElem = (this.querySelector('video') || this);
-	//if (userInteracted) {
-		//currentVideoElem[currentVideoElem.paused ? 'play' : 'pause']();
-	//} else {
 	if (!userInteracted) {
 		onUserInteract();
 		videoObjects[this.querySelector('video').dataset.videoId].player.play();
@@ -492,31 +479,21 @@ function onCanPlayVideo () {
 // TODO fix, it's kinda bad with touch scrolling since so many events are generated;
 // pausing should maybe only happen when the scoll is completed?
 function onVideosScroll () {
-	//let alignedVideoElem;
 	for (const videoElem of document.querySelectorAll('.videoItem video')) {
 		const videoObject = videoObjects[videoElem.dataset.videoId];
 		if (~~videoElem.getBoundingClientRect().y === 0) {
-			/* alignedVideoElem = */ currentVideoElem = videoElem;
-			//videoElem.load();
-			//videoElem.currentTime = 0;
-			//videoElem.play();
+			currentVideoElem = videoElem;
 			videoObject.player.seekTo(0);
 			videoObject.player.play();
 			if (userInteracted) {
-				//videoElem.muted = false;
 				videoObject.player.unMute();
 			}
 			videoElem.parentElement.focus();
 		} else {
-			//videoElem.pause();
-			//videoElem.currentTime = 0;
 			videoObject.player.pause();
 			videoObject.player.seekTo(0);
 		}
 	}
-	//document.querySelector('.videoItem').remove();
-	//videoObjects.pop();
-	//if (alignedVideoElem) {}
 }
 document.querySelector('.videosContainer').onscroll = onVideosScroll;
 document.querySelector('.videosContainer').focus();

source/TiktOctt/package-lock.json

@@ -0,0 +1,35 @@
+{
+  "name": "TiktOctt",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "vlitejs": "^6.0.3"
+      }
+    },
+    "node_modules/validate-target": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/validate-target/-/validate-target-3.1.1.tgz",
+      "integrity": "sha512-MRTgeSwwI8fyNPzRi8SsZiU6LSwlsRE3cLiynyse8G82hjEkfq/setjs0D789FwKrtnDCZn7m0MHlklDPzs74g==",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/vlitejs": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vlitejs/-/vlitejs-6.0.3.tgz",
+      "integrity": "sha512-v/m95c3LkxR5AaNW0lUZiNSSECWHYIzrh+yspbsxa46Zeas2OHiiTH3VDMdrWOg4dSBku/jUcuohOhas7kwOSA==",
+      "dependencies": {
+        "validate-target": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=16.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/yoriiis"
+      }
+    }
+  }
+}

source/TiktOctt/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vlitejs": "^6.0.3"
+  }
+}

source/WuppiMini/Requirements.sh

@@ -1,3 +0,0 @@
-#!/bin/sh
-npm update
-npm install

source/WuppiMini/index.js

@@ -148,8 +148,8 @@ const htmlPager = (content, title, opts={}, ctx) => `<!DOCTYPE html><html><head>
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<meta property="og:title" content="${title ? `${title} — ` : ''}${appName}"/>
-	<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/WuppiMini/"/>
-	<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'256x256' }],"/>
+	<meta property="OctoSpaccHubSdk:Url" content="https://hub.octt.eu.org/WuppiMini/"/>
+	<meta property="OctoSpaccHubSdk:WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'256x256' }],"/>
 	<title>${title ? `${title} — ` : ''}${appName}</title>
 	<link rel="apple-touch-icon" href="./icon.png"/>
 	${linkStyles.map((path) => SpaccDotWebServer.makeHtmlStyleFragment(path, appSelfContained)).join('')}

static/MatrixStickerHelper/index.html

@@ -4,8 +4,8 @@
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta property="og:title" content="🃏️ [Matrix] Sticker Helper"/>
-<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/MatrixStickerHelper/"/>
-<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone',"/>
+<meta property="OctoSpaccHubSdk:Url" content="https://hub.octt.eu.org/MatrixStickerHelper/"/>
+<meta property="OctoSpaccHubSdk:WebManifestExtra" content="'display':'standalone',"/>
 
 <script src="../../shared/OctoHub-Global.js"></script>
 <script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- offline -->