Skip to content

Commit c22fd80

Browse files
dinoosaurodinoosauro
committed
Improved experience on mobile devices
- Fixed an issue that made the website useless on iOS - Improved the Video preview UI so that it doesn't overflow - The service worker method will automatically be disabled if there's no service worker available - Bumped version to 1.0.4
1 parent 6da3e73 commit c22fd80

9 files changed

Lines changed: 24 additions & 14 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<body>
1919
<div id="root"></div>
2020
<script>
21-
const version = "1.0.3";
21+
const version = "1.0.4";
2222
window.version = version;
2323
(async () => {
2424
const result = await navigator.serviceWorker.register('./service-worker.js', {scope: location.href.substring(0, location.href.lastIndexOf("/") + 1)});

‎public/updatecode‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.0.3
1+
1.0.4

‎src/Components/Card.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,18 @@ interface Props {
88
/**
99
* If the card should be inside another card. This means a lighter color in dark mode and a darker color in light mode.
1010
*/
11-
secondLevel?: boolean
11+
secondLevel?: boolean,
12+
/**
13+
* If the div should have "width: 100%"
14+
*/
15+
fullWidth?: boolean
1216
}
1317
/**
1418
* A div with a different color, to differentiate the content in it
1519
* @returns the Card ReactNode
1620
*/
17-
export default function Card({children, secondLevel}: Props) {
18-
return <div className="card" style={{backgroundColor: secondLevel ? "var(--secondcard)" : undefined}}>
21+
export default function Card({children, secondLevel, fullWidth}: Props) {
22+
return <div className={`card${fullWidth ? " fullWidth" : ""}`} style={{backgroundColor: secondLevel ? "var(--secondcard)" : undefined}}>
1923
{children}
2024
</div>
2125
}

‎src/Components/MainVideoUI.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,11 @@ export default function MainVideoUI({ video, videoBlobUrl }: Props) {
169169
const video = Object.assign(document.createElement("video"), {
170170
muted: true,
171171
autoplay: true,
172+
playsInline: true,
172173
src: videoBlobUrl
173174
});
174175
video.classList.add("hideVideo"); // Let's make this video invisible to the user
176+
console.log(video)
175177
video.addEventListener("playing", () => {
176178
/**
177179
* Getting video framerate is unreliable in JavaScript.
@@ -215,12 +217,12 @@ export default function MainVideoUI({ video, videoBlobUrl }: Props) {
215217
<Card>
216218
<div className="flex mainFlex gap">
217219
<div style={{ flex: "2 0" }} key={"VideoPreviewStable"}>
218-
<Card secondLevel={true}>
220+
<Card fullWidth={true} secondLevel={true}>
219221
<h2>{lang("Video preview:")}</h2>
220222
<div className="flex wcenter">
221-
<video onPlay={() => updateVideoPaused(false)} onPause={() => updateVideoPaused(true)} onSeeked={() => seekedPromise.current && seekedPromise.current()} ref={videoObj} controls autoPlay muted src={videoBlobUrl}></video>
223+
<video playsInline={true} onPlay={() => updateVideoPaused(false)} onPause={() => updateVideoPaused(true)} onSeeked={() => seekedPromise.current && seekedPromise.current()} ref={videoObj} controls autoPlay muted src={videoBlobUrl}></video>
222224
</div><br></br>
223-
<div className="flex wcenter miniButton miniGap" key={"VideoControls"}>
225+
<div className="flex wcenter miniButton miniGap mainFlex mainMiniFlex" key={"VideoControls"} style={{overflow: "auto"}}>
224226
<ImageButton disabled={areVideoControlsDisabled} img="previousFrame" onClick={() => {
225227
if (!videoObj.current) return;
226228
videoObj.current.currentTime -= (1 / videoFrameRate);
@@ -300,6 +302,7 @@ export default function MainVideoUI({ video, videoBlobUrl }: Props) {
300302
src: videoBlobUrl,
301303
autoplay: true,
302304
muted: true,
305+
playsInline: true,
303306
onload: () => newVideo.play(),
304307
onplay: () => {
305308
newVideo.pause();

‎src/Components/ZipOptionsCallback.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ interface Props {
2626
export default function ZipOptionsCallback({ callback, disabled, otherAdvancedOptions }: Props) {
2727
const [options, updateOptions] = useState({
2828
downloadType: "zip" as "zip",
29-
useServiceWorker: true
29+
useServiceWorker: !!navigator.serviceWorker?.controller
3030
});
3131
useEffect(() => {
3232
callback(options);

‎src/Scripts/CreateAlert.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@ export default function CreateAlert(item: ReactNode, ...elements: HTMLElement[])
2424
(div.querySelector(".opacity") as HTMLElement).style.opacity = "1";
2525
for (const item of elements) div.firstElementChild?.insertBefore(item, div.firstElementChild.lastChild ?? null);
2626
}, 50);
27-
setTimeout(closeDiv, 5050);
27+
setTimeout(closeDiv, 50050);
2828
return closeDiv;
2929
}

‎src/Scripts/DownloadContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default class DownloadContent<T extends "zipblob" | "zipstream" | "share"
5959
onclick: () => closeAlert && closeAlert()
6060
});
6161
a.click();
62-
closeAlert = CreateAlert(<span>{lang("Downloaded")} {a.download}</span>, a);
62+
closeAlert = CreateAlert(<span style={{wordBreak: "break-all"}}>{lang("Downloaded")} {a.download}</span>, a);
6363
return a;
6464
}
6565

‎src/Scripts/Icons.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ interface GetIconsProps {
7272
/**
7373
* If the image should be added to the list of icons that need to be rerendered after the user customized the website theme
7474
*/
75-
addToList?: boolean
75+
addToList?: boolean,
7676
}
7777

7878
export default function GetIcons({ ref, type, colorId = "--text", addToList = true }: GetIconsProps) {

‎src/index.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ body {
3333

3434
button,
3535
input,
36-
progress {
36+
progress,
37+
.fullWidth {
3738
width: 100%;
3839
width: -webkit-fill-available;
3940
width: -moz-available;
@@ -78,7 +79,7 @@ button:not([disabled=true]):not([disabled=""]):active {
7879
}
7980

8081
.mainMiniFlex>* {
81-
flex: 1 0 200px;
82+
flex: 1 0 150px;
8283
}
8384

8485
.gap {
@@ -253,6 +254,8 @@ button:hover,
253254
.alert>img {
254255
width: 24px;
255256
height: 24px;
257+
min-width: 24px;
258+
min-height: 24px;
256259
}
257260

258261
[disabled=true],

0 commit comments

Comments
 (0)