diff --git a/Build.sh b/Build.sh
index 4855b69..0900aa7 100755
--- a/Build.sh
+++ b/Build.sh
@@ -12,6 +12,15 @@ getMetaAttr(){
grep ' ' | cut -d '"' -f4
}
+################################################################################
+
+npm update
+npm install
+cd ./node_modules/SpaccDotWeb
+npm install
+npm run build:lib
+cd ../..
+
rm -vrf ./public || true
cp -vr ./static ./public
cp -vr ./shared ./public/shared
@@ -21,9 +30,9 @@ do
mkdir -p "./public/${App}"
cd "./source/${App}"
if [ -f ./Requirements.sh ]
- then sh ./Requirements.sh
- else
- [ -f ./package.json ] && (npm update; npm install)
+ then sh ./Requirements.sh
+ elif [ -f ./package.json ]
+ then (npm update; npm install)
fi
copyfiles="$(sh ./Build.sh)"
cp -vr $copyfiles "../../public/${App}/"
@@ -42,13 +51,17 @@ node ../WriteRedirectPages.js
for App in ${HubSdkApps}
do
- file="./${App}/index.html"
- name="$( getMetaAttr "${file}" og:title)"
- description="$(getMetaAttr "${file}" og:description)"
- url="$( getMetaAttr "${file}" OctoSpaccHubSdk:Url)"
- cat << [OctoSpaccHubSdk-WebManifest-EOF] > "./${App}/WebManifest.json"
+ htmlfile="./${App}/index.html"
+ jsonfile="./${App}/WebManifest.json"
+ if [ -f "${jsonfile}" ]
+ then continue
+ fi
+ name="$( getMetaAttr "${htmlfile}" og:title)"
+ description="$(getMetaAttr "${htmlfile}" og:description)"
+ url="$( getMetaAttr "${htmlfile}" OctoSpaccHubSdk:Url)"
+ cat << [OctoSpaccHubSdk-WebManifest-EOF] > "${jsonfile}"
{
- $(getMetaAttr "${file}" OctoSpaccHubSdk:WebManifestExtra | sed s/\'/\"/g)
+ $(getMetaAttr "${htmlfile}" OctoSpaccHubSdk:WebManifestExtra | sed s/\'/\"/g)
$([ -n "${description}" ] && echo "$(quoteVar description): $(quoteVar "${description}"),")
"start_url": "${url}",
"scope": "${url}",
@@ -57,5 +70,5 @@ do
[OctoSpaccHubSdk-WebManifest-EOF]
htmltitle='
'"${name}"' '
htmlcanonical=' '
- sed -i 's|| '"${htmltitle}${htmlcanonical}${htmlmanifest}${HtmlHeadInject}"'|' "${file}"
+ sed -i 's|| '"${htmltitle}${htmlcanonical}${htmlmanifest}${HtmlHeadInject}"'|' "${htmlfile}"
done
diff --git a/WriteRedirectPages.js b/WriteRedirectPages.js
old mode 100644
new mode 100755
index 183165a..abfd646
--- a/WriteRedirectPages.js
+++ b/WriteRedirectPages.js
@@ -1,3 +1,4 @@
+#!/usr/bin/env node
const fs = require('fs');
for (const page of [
{ path: "a/fb", target: "'../../FramesBrowser/'+location.hash" }, // Apps/FramesBrowser
diff --git a/package-lock.json b/package-lock.json
index d3c016c..f37f30e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,8 @@
"devDependencies": {
"@babel/cli": "^7.23.9",
"@babel/core": "^7.23.9",
- "@babel/preset-env": "^7.23.9"
+ "@babel/preset-env": "^7.23.9",
+ "SpaccDotWeb": "gitlab:SpaccInc/SpaccDotWeb"
}
},
"node_modules/@ampproject/remapping": {
@@ -2324,6 +2325,27 @@
"semver": "bin/semver"
}
},
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "dev": true,
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "dev": true,
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2367,6 +2389,12 @@
"wrappy": "1"
}
},
+ "node_modules/parse-multipart-data": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/parse-multipart-data/-/parse-multipart-data-1.5.0.tgz",
+ "integrity": "sha512-ck5zaMF0ydjGfejNMnlo5YU2oJ+pT+80Jb1y4ybanT27j+zbVP/jkYmCrUGsEln0Ox/hZmuvgy8Ra7AxbXP2Mw==",
+ "dev": true
+ },
"node_modules/path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2529,6 +2557,15 @@
"node": ">=6"
}
},
+ "node_modules/SpaccDotWeb": {
+ "version": "indev",
+ "resolved": "git+ssh://git@gitlab.com/SpaccInc/SpaccDotWeb.git#9b23a57eeb50f32627cdd182070eb722118c1554",
+ "dev": true,
+ "dependencies": {
+ "mime-types": "^2.1.35",
+ "parse-multipart-data": "^1.5.0"
+ }
+ },
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 0ec2a0c..6dc8426 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"devDependencies": {
"@babel/cli": "^7.23.9",
"@babel/core": "^7.23.9",
- "@babel/preset-env": "^7.23.9"
+ "@babel/preset-env": "^7.23.9",
+ "SpaccDotWeb": "gitlab:SpaccInc/SpaccDotWeb"
}
}
diff --git a/source/FramesBrowser/.gitignore b/source/FramesBrowser/.gitignore
new file mode 100644
index 0000000..5de0681
--- /dev/null
+++ b/source/FramesBrowser/.gitignore
@@ -0,0 +1 @@
+/html-data-url-loader-?.html
diff --git a/source/FramesBrowser/Build.sh b/source/FramesBrowser/Build.sh
new file mode 100755
index 0000000..0cc6837
--- /dev/null
+++ b/source/FramesBrowser/Build.sh
@@ -0,0 +1,7 @@
+#!/bin/sh
+for i in 0 1
+do cp ./html-data-url-loader.html "./html-data-url-loader-${i}.html"
+done
+#echo "const fs=require('fs'); fs.writeFileSync('html2canvas.min.wrappedLib.js', 'window.FramesBrowser.Lib.html2canvas=' + JSON.stringify(fs.readFileSync('node_modules/html2canvas/dist/html2canvas.min.js', 'utf8')) + ';');" | node
+echo index.html utils.js WebManifest.json icon.png html-data-url-loader-?.html \
+ node_modules/html2canvas/dist/html2canvas.min.js
diff --git a/static/FramesBrowser/manifest.json b/source/FramesBrowser/WebManifest.json
similarity index 100%
rename from static/FramesBrowser/manifest.json
rename to source/FramesBrowser/WebManifest.json
diff --git a/source/FramesBrowser/html-data-url-loader.html b/source/FramesBrowser/html-data-url-loader.html
new file mode 100644
index 0000000..112e561
--- /dev/null
+++ b/source/FramesBrowser/html-data-url-loader.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
diff --git a/static/FramesBrowser/icon.png b/source/FramesBrowser/icon.png
similarity index 100%
rename from static/FramesBrowser/icon.png
rename to source/FramesBrowser/icon.png
diff --git a/static/FramesBrowser/index.html b/source/FramesBrowser/index.html
similarity index 81%
rename from static/FramesBrowser/index.html
rename to source/FramesBrowser/index.html
index fb2f2e0..c7c219d 100644
--- a/static/FramesBrowser/index.html
+++ b/source/FramesBrowser/index.html
@@ -2,14 +2,16 @@
@@ -19,7 +21,7 @@
-
+
🪟️ Frames Browser
@@ -29,7 +31,7 @@
--BaseMargin: 8px;
--BtnHeight: calc(1rem + var(--BaseMargin));
--BtnActionHeight: calc(2rem + var(--BaseMargin));
- --BtnActionWidth: calc(2.5rem + var(--BaseMargin));
+ --BtnActionWidth: calc(3rem + var(--BaseMargin));
--ColorBg: #f0f0f0;
--ColorFg: #0f0f0f;
}
@@ -39,11 +41,15 @@
body {
margin: 0px;
max-width: 100vw;
- max-height: 100vh;
+ max-height: 100%;
+ position: absolute;
}
button {
height: var(--BtnHeight);
}
+ #MainAppContent {
+ height: 100%;
+ }
iframe, #IframeMain, #IframeMainBox {
border: none;
width: 100%;
@@ -111,7 +117,10 @@
}
+
+
+
🎞️ Menu
@@ -129,7 +138,7 @@
↩️ Load
↗️ Excise
- 🖼️ Shot
+ 📷️ Shot
🖨️ Print
@@ -168,6 +177,11 @@
Clicking "📐️ Tools
" will open or close the Eruda console as desired. (Note that Eruda is currently only injected in the root window and not inside any iFrame.)
Changelog
+ 2024-09-14
+ Fix mobile browsers' UI shifting in place, causing part of the bottom of the iFrame to be hidden.
+ Handle code injection in frames efficiently, by externally loading library dependencies.
+ Always show modal with screenshot preview after taking one, show download button instead of automatically downloading.
+
2024-09-13
Better normalized the action buttons' width.
Allow resizing frames (and then resetting the size), by hand or by inputting numbers.
@@ -215,7 +229,7 @@
})
-
+
diff --git a/source/FramesBrowser/package-lock.json b/source/FramesBrowser/package-lock.json
new file mode 100644
index 0000000..b43d84f
--- /dev/null
+++ b/source/FramesBrowser/package-lock.json
@@ -0,0 +1,56 @@
+{
+ "name": "tmp",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "dependencies": {
+ "html2canvas": "^1.4.1"
+ }
+ },
+ "node_modules/base64-arraybuffer": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+ "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+ "engines": {
+ "node": ">= 0.6.0"
+ }
+ },
+ "node_modules/css-line-break": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+ "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+ "dependencies": {
+ "utrie": "^1.0.2"
+ }
+ },
+ "node_modules/html2canvas": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+ "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+ "dependencies": {
+ "css-line-break": "^2.1.0",
+ "text-segmentation": "^1.0.3"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
+ "node_modules/text-segmentation": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+ "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+ "dependencies": {
+ "utrie": "^1.0.2"
+ }
+ },
+ "node_modules/utrie": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+ "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+ "dependencies": {
+ "base64-arraybuffer": "^1.0.2"
+ }
+ }
+ }
+}
diff --git a/source/FramesBrowser/package.json b/source/FramesBrowser/package.json
new file mode 100644
index 0000000..95c9e36
--- /dev/null
+++ b/source/FramesBrowser/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "html2canvas": "^1.4.1"
+ }
+}
diff --git a/source/FramesBrowser/utils.js b/source/FramesBrowser/utils.js
new file mode 100644
index 0000000..be08540
--- /dev/null
+++ b/source/FramesBrowser/utils.js
@@ -0,0 +1,24 @@
+function reverseString (string) {
+ return string.split('').reverse().join('');
+}
+
+function extractDataUrl (url) {
+ var head = url.split(',')[0];
+ var meta = head.split(':')[1].split(';');
+ var mime = meta[0], encoding = meta[1];
+ var body = url.split(',').slice(1).join(',');
+ if (head.split(':')[0] === 'atad') {
+ mime = reverseString(mime);
+ body = reverseString(body);
+ encoding = reverseString(encoding);
+ }
+ switch ((encoding || '').toLowerCase()) { default:
+ break; case 'utf8':
+ body = decodeURIComponent(body);
+ break; case 'base64':
+ body = decodeURIComponent(escape(atob(body)));
+ //break; case '46esab':
+ // body = decodeURIComponent(escape(atob(reverseString(body))));
+ }
+ return [mime, body, encoding];
+}
diff --git a/source/TiVuOcto/Build.sh b/source/TiVuOcto/Build.sh
index 62b92ef..431faa5 100755
--- a/source/TiVuOcto/Build.sh
+++ b/source/TiVuOcto/Build.sh
@@ -1,5 +1,5 @@
#!/bin/sh
-echo index.html menu.svg \
+echo index.html icon.jpeg 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 \
;
diff --git a/source/TiVuOcto/icon.jpeg b/source/TiVuOcto/icon.jpeg
new file mode 100644
index 0000000..00a452e
Binary files /dev/null and b/source/TiVuOcto/icon.jpeg differ
diff --git a/source/TiVuOcto/index.html b/source/TiVuOcto/index.html
index ba805a5..dadb41b 100644
--- a/source/TiVuOcto/index.html
+++ b/source/TiVuOcto/index.html
@@ -6,7 +6,8 @@
-
+
+