Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Mobile UI improvements (#1104)

Browse Source 
* Use dropdown for o-counter instead of hover
* Always show previews on non-hoverable device
* Add IntersectionObserver polyfill
* Prevent video previews playing fullscreen
This commit is contained in:
WithoutPants
2021-02-26 16:13:34 +11:00
committed by GitHub
parent af6b21a428
commit a9ac176e91
9 changed files with 98 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
ui/v2.5/src/components/Scenes/SceneCard.tsx
View File

@@ -29,17 +29,14 @@ export const ScenePreview: React.FC<IScenePreviewProps> = ({
const videoEl = useRef<HTMLVideoElement>(null);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0)
// Catch is necessary due to DOMException if user hovers before clicking on page
videoEl.current?.play().catch(() => {});
else videoEl.current?.pause();
});
},
{ root: document.documentElement }
);
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0)
// Catch is necessary due to DOMException if user hovers before clicking on page
videoEl.current?.play().catch(() => {});
else videoEl.current?.pause();
});
});
if (videoEl.current) observer.observe(videoEl.current);
});
@@ -53,6 +50,8 @@ export const ScenePreview: React.FC<IScenePreviewProps> = ({
<div className={cx("scene-card-preview", { portrait: isPortrait })}>
<img className="scene-card-preview-image" src={image} alt="" />
<video
disableRemotePlayback
playsInline
className="scene-card-preview-video"
loop
preload="none"