mirror of
https://github.com/sussy-code/smov.git
synced 2025-01-02 16:37:39 +01:00
Compare commits
12 commits
dea9b22116
...
686b4f2251
Author | SHA1 | Date | |
---|---|---|---|
|
686b4f2251 | ||
|
e93887a62a | ||
|
45c8cb27bf | ||
|
9083f110c8 | ||
|
b0209d54b4 | ||
|
3543ec093f | ||
|
1e4ec0cbb2 | ||
|
d6a2b91486 | ||
|
2e08ed9771 | ||
|
c748d0c179 | ||
|
05c4988066 | ||
|
1a36d96f48 |
11 changed files with 165 additions and 42 deletions
|
@ -21,6 +21,8 @@
|
|||
<meta name="theme-color" content="#120f1d" />
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
<link rel="apple-touch-startup-image"
|
||||
media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
|
||||
href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">
|
||||
|
|
|
@ -41,7 +41,7 @@ importers:
|
|||
version: 0.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@movie-web/providers':
|
||||
specifier: github:sussy-code/providers
|
||||
version: https://codeload.github.com/sussy-code/providers/tar.gz/0d43eceaf2edec2e22042e987b369357170da01f
|
||||
version: https://codeload.github.com/sussy-code/providers/tar.gz/b8efe26430cce945bd6eb8f08436810ed02b28f0
|
||||
'@noble/hashes':
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.0
|
||||
|
@ -291,7 +291,7 @@ importers:
|
|||
version: 0.5.14(prettier@3.3.3)
|
||||
rollup-plugin-visualizer:
|
||||
specifier: ^5.12.0
|
||||
version: 5.12.0(@rollup/wasm-node@4.21.2)
|
||||
version: 5.12.0(@rollup/wasm-node@4.21.3)
|
||||
tailwind-scrollbar:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(tailwindcss@3.4.10)
|
||||
|
@ -1202,8 +1202,8 @@ packages:
|
|||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
|
||||
'@movie-web/providers@https://codeload.github.com/sussy-code/providers/tar.gz/0d43eceaf2edec2e22042e987b369357170da01f':
|
||||
resolution: {tarball: https://codeload.github.com/sussy-code/providers/tar.gz/0d43eceaf2edec2e22042e987b369357170da01f}
|
||||
'@movie-web/providers@https://codeload.github.com/sussy-code/providers/tar.gz/b8efe26430cce945bd6eb8f08436810ed02b28f0':
|
||||
resolution: {tarball: https://codeload.github.com/sussy-code/providers/tar.gz/b8efe26430cce945bd6eb8f08436810ed02b28f0}
|
||||
version: 2.3.0
|
||||
|
||||
'@noble/hashes@1.5.0':
|
||||
|
@ -1327,6 +1327,11 @@ packages:
|
|||
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
|
||||
hasBin: true
|
||||
|
||||
'@rollup/wasm-node@4.21.3':
|
||||
resolution: {integrity: sha512-uZFl4GXMgyllfuKjY/zlXxTxDs+G/LB7snVENskpJt7IIXw6cD1yqi3eBeGM8NxE9kuxrNB0Qr1QLNtDYTlqeQ==}
|
||||
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
|
||||
hasBin: true
|
||||
|
||||
'@rtsao/scc@1.1.0':
|
||||
resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
|
||||
|
||||
|
@ -5284,7 +5289,7 @@ snapshots:
|
|||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
'@movie-web/providers@https://codeload.github.com/sussy-code/providers/tar.gz/0d43eceaf2edec2e22042e987b369357170da01f':
|
||||
'@movie-web/providers@https://codeload.github.com/sussy-code/providers/tar.gz/b8efe26430cce945bd6eb8f08436810ed02b28f0':
|
||||
dependencies:
|
||||
cheerio: 1.0.0-rc.12
|
||||
cookie: 0.6.0
|
||||
|
@ -5358,56 +5363,56 @@ snapshots:
|
|||
|
||||
'@remix-run/router@1.19.2': {}
|
||||
|
||||
'@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.21.2)(@types/babel__core@7.20.5)':
|
||||
'@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.21.3)(@types/babel__core@7.20.5)':
|
||||
dependencies:
|
||||
'@babel/core': 7.25.2
|
||||
'@babel/helper-module-imports': 7.24.7
|
||||
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.21.2)
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.21.3)
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
optionalDependencies:
|
||||
'@types/babel__core': 7.20.5
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@rollup/plugin-node-resolve@15.2.3(@rollup/wasm-node@4.21.2)':
|
||||
'@rollup/plugin-node-resolve@15.2.3(@rollup/wasm-node@4.21.3)':
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 5.1.0(@rollup/wasm-node@4.21.2)
|
||||
'@rollup/pluginutils': 5.1.0(@rollup/wasm-node@4.21.3)
|
||||
'@types/resolve': 1.20.2
|
||||
deepmerge: 4.3.1
|
||||
is-builtin-module: 3.2.1
|
||||
is-module: 1.0.0
|
||||
resolve: 1.22.8
|
||||
optionalDependencies:
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
|
||||
'@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.21.2)':
|
||||
'@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.21.3)':
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.21.2)
|
||||
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.21.3)
|
||||
magic-string: 0.25.9
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
|
||||
'@rollup/plugin-terser@0.4.4(@rollup/wasm-node@4.21.2)':
|
||||
'@rollup/plugin-terser@0.4.4(@rollup/wasm-node@4.21.3)':
|
||||
dependencies:
|
||||
serialize-javascript: 6.0.2
|
||||
smob: 1.5.0
|
||||
terser: 5.32.0
|
||||
optionalDependencies:
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
|
||||
'@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.21.2)':
|
||||
'@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.21.3)':
|
||||
dependencies:
|
||||
'@types/estree': 0.0.39
|
||||
estree-walker: 1.0.1
|
||||
picomatch: 2.3.1
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
|
||||
'@rollup/pluginutils@5.1.0(@rollup/wasm-node@4.21.2)':
|
||||
'@rollup/pluginutils@5.1.0(@rollup/wasm-node@4.21.3)':
|
||||
dependencies:
|
||||
'@types/estree': 1.0.5
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 2.3.1
|
||||
optionalDependencies:
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
|
||||
'@rollup/wasm-node@4.21.2':
|
||||
dependencies:
|
||||
|
@ -5415,6 +5420,12 @@ snapshots:
|
|||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
'@rollup/wasm-node@4.21.3':
|
||||
dependencies:
|
||||
'@types/estree': 1.0.5
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
'@rtsao/scc@1.1.0': {}
|
||||
|
||||
'@scure/base@1.1.8': {}
|
||||
|
@ -7256,7 +7267,7 @@ snapshots:
|
|||
'@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.25.2)
|
||||
'@babel/types': 7.25.6
|
||||
kleur: 4.1.5
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
unplugin: 1.14.0(webpack-sources@3.2.3)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
@ -7754,14 +7765,14 @@ snapshots:
|
|||
dependencies:
|
||||
glob: 7.2.3
|
||||
|
||||
rollup-plugin-visualizer@5.12.0(@rollup/wasm-node@4.21.2):
|
||||
rollup-plugin-visualizer@5.12.0(@rollup/wasm-node@4.21.3):
|
||||
dependencies:
|
||||
open: 8.4.2
|
||||
picomatch: 2.3.1
|
||||
source-map: 0.7.4
|
||||
yargs: 17.7.2
|
||||
optionalDependencies:
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
|
||||
rrweb-cssom@0.6.0: {}
|
||||
|
||||
|
@ -8327,7 +8338,7 @@ snapshots:
|
|||
dependencies:
|
||||
esbuild: 0.21.5
|
||||
postcss: 8.4.45
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
optionalDependencies:
|
||||
'@types/node': 20.16.5
|
||||
fsevents: 2.3.3
|
||||
|
@ -8491,10 +8502,10 @@ snapshots:
|
|||
'@babel/core': 7.25.2
|
||||
'@babel/preset-env': 7.25.4(@babel/core@7.25.2)
|
||||
'@babel/runtime': 7.25.6
|
||||
'@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.21.2)(@types/babel__core@7.20.5)
|
||||
'@rollup/plugin-node-resolve': 15.2.3(@rollup/wasm-node@4.21.2)
|
||||
'@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.21.2)
|
||||
'@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.21.2)
|
||||
'@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.21.3)(@types/babel__core@7.20.5)
|
||||
'@rollup/plugin-node-resolve': 15.2.3(@rollup/wasm-node@4.21.3)
|
||||
'@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.21.3)
|
||||
'@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.21.3)
|
||||
'@surma/rollup-plugin-off-main-thread': 2.2.3
|
||||
ajv: 8.17.1
|
||||
common-tags: 1.8.2
|
||||
|
@ -8503,7 +8514,7 @@ snapshots:
|
|||
glob: 7.2.3
|
||||
lodash: 4.17.21
|
||||
pretty-bytes: 5.6.0
|
||||
rollup: '@rollup/wasm-node@4.21.2'
|
||||
rollup: '@rollup/wasm-node@4.21.3'
|
||||
source-map: 0.8.0-beta.0
|
||||
stringify-object: 3.3.0
|
||||
strip-comments: 2.0.1
|
||||
|
|
|
@ -35,6 +35,10 @@ html[data-no-scroll], html[data-no-scroll] body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
padding-top: calc(env(safe-area-inset-top) - 20px);
|
||||
}
|
||||
|
||||
.roll {
|
||||
animation: roll 1s;
|
||||
}
|
||||
|
|
|
@ -68,6 +68,8 @@ export enum Icons {
|
|||
BRUSH = "brush",
|
||||
UPLOAD = "upload",
|
||||
WEB = "web",
|
||||
SHRINK = "shrink",
|
||||
STRETCH = "stretch",
|
||||
}
|
||||
|
||||
export interface IconProps {
|
||||
|
@ -153,6 +155,8 @@ const iconList: Record<Icons, string> = {
|
|||
<path d="M22.0182 15.0781C20.9582 15.403 18.7915 16.0311 16.4781 16.4781C16.0311 18.7915 15.403 20.9581 15.0781 22.0182L15.0702 22.044C18.4002 21.0274 21.0274 18.4002 22.044 15.0702L22.0182 15.0781Z" fill="currentColor"/>
|
||||
<path d="M1.6103 13.323C1.64665 13.3277 1.67628 13.3327 1.68611 13.3349C1.69472 13.337 1.70821 13.3406 1.7131 13.3419L1.72391 13.345L1.72973 13.3468L1.73585 13.3487L1.74098 13.3503C1.7381 13.3494 1.67976 13.3348 1.6103 13.323Z" fill="currentColor"/>
|
||||
</svg>`,
|
||||
shrink: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8l-144 0c-13.3 0-24-10.7-24-24l0-144c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272l144 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"/></svg>`,
|
||||
stretch: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M344 0L488 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512L24 512c-13.3 0-24-10.7-24-24L0 344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>`,
|
||||
};
|
||||
|
||||
function ChromeCastButton() {
|
||||
|
|
23
src/components/buttons/IosPwaLimitations.tsx
Normal file
23
src/components/buttons/IosPwaLimitations.tsx
Normal file
|
@ -0,0 +1,23 @@
|
|||
/* eslint-disable no-alert */
|
||||
import { Icon, Icons } from "../Icon";
|
||||
|
||||
function IosPwaLimitations() {
|
||||
const showAlert = () => {
|
||||
alert(
|
||||
"Due to Apple’s limitations, Picture-in-Picture (PiP) and Fullscreen are disabled on iOS PWAs. Use the browser vertion to re-enable these features.\n" +
|
||||
"Tip: To hide the iOS home indicator, use guided access within the PWA!",
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={showAlert}
|
||||
className="tabbable p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center gap-3 active:scale-110 active:bg-opacity-75 active:text-white"
|
||||
>
|
||||
<Icon className="text-2xl" icon={Icons.CIRCLE_QUESTION} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default IosPwaLimitations;
|
|
@ -47,14 +47,14 @@ export function Navigation(props: NavigationProps) {
|
|||
|
||||
{/* backgrounds - these are seperate because of z-index issues */}
|
||||
<div
|
||||
className="fixed z-[20] pointer-events-none left-0 right-0 top-0 min-h-[150px]"
|
||||
className="top-content fixed z-[20] pointer-events-none left-0 right-0 top-0 min-h-[150px]"
|
||||
style={{
|
||||
top: `${bannerHeight}px`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
"fixed left-0 right-0 h-20 flex items-center",
|
||||
"fixed left-0 right-0 top-0 flex items-center",
|
||||
props.doBackground
|
||||
? "bg-background-main border-b border-utils-divider border-opacity-50"
|
||||
: null,
|
||||
|
@ -78,7 +78,7 @@ export function Navigation(props: NavigationProps) {
|
|||
|
||||
{/* content */}
|
||||
<div
|
||||
className="fixed pointer-events-none left-0 right-0 z-[60] top-0 min-h-[150px]"
|
||||
className="top-content fixed pointer-events-none left-0 right-0 z-[60] top-0 min-h-[150px]"
|
||||
style={{
|
||||
top: `${bannerHeight}px`,
|
||||
}}
|
||||
|
|
23
src/components/player/atoms/Widescreen.tsx
Normal file
23
src/components/player/atoms/Widescreen.tsx
Normal file
|
@ -0,0 +1,23 @@
|
|||
import { useState } from "react";
|
||||
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { VideoPlayerButton } from "@/components/player/internals/Button";
|
||||
|
||||
export function Widescreen() {
|
||||
// Add widescreen status
|
||||
const [isWideScreen, setIsWideScreen] = useState(false);
|
||||
|
||||
return (
|
||||
<VideoPlayerButton
|
||||
icon={isWideScreen ? Icons.SHRINK : Icons.STRETCH}
|
||||
className="text-white"
|
||||
onClick={() => {
|
||||
const videoElement = document.getElementById("video-element");
|
||||
if (videoElement) {
|
||||
videoElement.classList.toggle("object-cover");
|
||||
setIsWideScreen(!isWideScreen);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -44,7 +44,7 @@ export function TopControls(props: {
|
|||
<Transition
|
||||
animation="slide-down"
|
||||
show={props.show}
|
||||
className="text-white"
|
||||
className="top-content text-white"
|
||||
>
|
||||
{props.children}
|
||||
</Transition>
|
||||
|
|
|
@ -101,6 +101,7 @@ function VideoElement() {
|
|||
|
||||
return (
|
||||
<video
|
||||
id="video-element"
|
||||
className="absolute inset-0 w-full h-screen bg-black"
|
||||
autoPlay
|
||||
playsInline
|
||||
|
|
|
@ -39,20 +39,30 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
|
|||
},
|
||||
[setShowBg, setIsSticky],
|
||||
);
|
||||
const { width: windowWidth, height: windowHeight } = useWindowSize();
|
||||
|
||||
const { width: windowWidth } = useWindowSize();
|
||||
// Detect if running as a PWA on iOS
|
||||
const isIOSPWA =
|
||||
/iPad|iPhone|iPod/i.test(navigator.userAgent) &&
|
||||
window.matchMedia("(display-mode: standalone)").matches;
|
||||
|
||||
const topSpacing = 16;
|
||||
const topSpacing = isIOSPWA ? 60 : 16;
|
||||
const [stickyOffset, setStickyOffset] = useState(topSpacing);
|
||||
|
||||
const isLandscape = windowHeight < windowWidth && isIOSPWA;
|
||||
const adjustedOffset = isLandscape
|
||||
? -40 // landscape
|
||||
: 0; // portrait
|
||||
|
||||
useEffect(() => {
|
||||
if (windowWidth > 1200) {
|
||||
if (windowWidth > 1280) {
|
||||
// On large screens the bar goes inline with the nav elements
|
||||
setStickyOffset(topSpacing);
|
||||
} else {
|
||||
// On smaller screens the bar goes below the nav elements
|
||||
setStickyOffset(topSpacing + 60);
|
||||
setStickyOffset(topSpacing + 60 + adjustedOffset);
|
||||
}
|
||||
}, [windowWidth]);
|
||||
}, [adjustedOffset, topSpacing, windowWidth]);
|
||||
|
||||
const time = getTimeOfDay(new Date());
|
||||
const title = randomT(`home.titles.${time}`);
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import { ReactNode } from "react";
|
||||
import { ReactNode, useState } from "react";
|
||||
|
||||
import IosPwaLimitations from "@/components/buttons/IosPwaLimitations";
|
||||
import { BrandPill } from "@/components/layout/BrandPill";
|
||||
import { Player } from "@/components/player";
|
||||
import { Widescreen } from "@/components/player/atoms/Widescreen";
|
||||
import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
|
||||
import { useIsMobile } from "@/hooks/useIsMobile";
|
||||
import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
|
||||
|
@ -20,6 +22,26 @@ export function PlayerPart(props: PlayerPartProps) {
|
|||
const { isMobile } = useIsMobile();
|
||||
const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
|
||||
|
||||
// Detect if running as a PWA on iOS
|
||||
const isIOSPWA =
|
||||
/iPad|iPhone|iPod/i.test(navigator.userAgent) &&
|
||||
window.matchMedia("(display-mode: standalone)").matches;
|
||||
|
||||
// Detect if Shift key is being held
|
||||
const [isShifting, setIsShifting] = useState(false);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Shift") {
|
||||
setIsShifting(true);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if (event.key === "Shift") {
|
||||
setIsShifting(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Player.Container onLoad={props.onLoad} showingControls={showTargets}>
|
||||
{props.children}
|
||||
|
@ -116,18 +138,41 @@ export function PlayerPart(props: PlayerPartProps) {
|
|||
<Player.Settings />
|
||||
</>
|
||||
) : null}
|
||||
<Player.Fullscreen />
|
||||
{/* Fullscreen on when not shifting */}
|
||||
{!isShifting && <Player.Fullscreen />}
|
||||
|
||||
{/* Expand button visible when shifting */}
|
||||
{isShifting && (
|
||||
<div>
|
||||
<Widescreen />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-[2.5rem,1fr,2.5rem] gap-3 lg:hidden">
|
||||
<div />
|
||||
<div className="flex justify-center space-x-3">
|
||||
{status === playerStatus.PLAYING ? <Player.Pip /> : null}
|
||||
{/* Disable PiP for iOS PWA */}
|
||||
{!isIOSPWA &&
|
||||
(status === playerStatus.PLAYING ? <Player.Pip /> : null)}
|
||||
<Player.Episodes />
|
||||
{status === playerStatus.PLAYING ? <Player.Settings /> : null}
|
||||
{/* Expand button for iOS PWA only */}
|
||||
{isIOSPWA && status === playerStatus.PLAYING && <Widescreen />}
|
||||
</div>
|
||||
<div>
|
||||
<Player.Fullscreen />
|
||||
{/* Disable for iOS PWA */}
|
||||
{!isIOSPWA && (
|
||||
<div>
|
||||
<Player.Fullscreen />
|
||||
</div>
|
||||
)}
|
||||
{/* Add info for iOS PWA */}
|
||||
{isIOSPWA && (
|
||||
<div>
|
||||
<IosPwaLimitations />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Player.BottomControls>
|
||||
|
|
Loading…
Reference in a new issue