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/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 @@
 	-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,15 +62,13 @@
 	white-space: nowrap;
 }
 
-
 .mui-dropdown__menu > div > li > *:focus,
 .mui-dropdown__menu > div > li > *:hover {
 	text-decoration: none;
 	color: rgba(0,0,0,.87);
 	background-color: #EEE;
 }
 
-
 #header {
 	position: fixed;
 	top: 0;
@@ -132,15 +135,19 @@
 
 #header .sidedrawer-toggle,
 #header .sidemenu-toggle {
+	line-height: 20px;
 	color: var(--colorForeground);
 	cursor: pointer;
 	user-select: none;
 }
 
 #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 @@
 #header .sidedrawer-toggle:hover,
 #header .sidemenu-toggle:focus,
 #header .sidemenu-toggle:hover {
-	color: var(--colorForeground2);
+	opacity: 70%;
 	text-decoration: none;
 }
 
@@ -163,11 +170,14 @@
 	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 @@
 	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 @@
 			<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 @@ <h4>2024-07-30</h4><ul>
 				<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/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