e.stopPropagation()}>
-
+
{
close();
@@ -89,7 +95,7 @@ export default function GalleryPostActions({
{isNative() ? (
-
+
) : (
diff --git a/src/features/media/gallery/actions/ImageMoreActions.tsx b/src/features/media/gallery/actions/ImageMoreActions.tsx
index 683a70c362..927e751cc7 100644
--- a/src/features/media/gallery/actions/ImageMoreActions.tsx
+++ b/src/features/media/gallery/actions/ImageMoreActions.tsx
@@ -4,17 +4,20 @@ import { useAppSelector } from "#/store";
import AltText from "./AltText";
import GalleryActions from "./GalleryActions";
import { BottomContainer, BottomContainerActions } from "./shared";
+import VideoActions from "./VideoActions";
import styles from "./ImageMoreActions.module.css";
interface ImageMoreActionsProps {
imgSrc: string;
alt?: string;
+ videoRef?: React.RefObject;
}
export default function ImageMoreActions({
imgSrc,
alt,
+ videoRef,
}: ImageMoreActionsProps) {
const hideAltText = useAppSelector(
(state) => state.settings.general.media.hideAltText,
@@ -24,12 +27,13 @@ export default function ImageMoreActions({
<>
{isNative() && (
-
+
)}
{alt && !hideAltText && (
+ {videoRef && }
)}
diff --git a/src/features/media/gallery/actions/VideoActions.module.css b/src/features/media/gallery/actions/VideoActions.module.css
new file mode 100644
index 0000000000..da885a15da
--- /dev/null
+++ b/src/features/media/gallery/actions/VideoActions.module.css
@@ -0,0 +1,29 @@
+.container {
+ width: calc(100% - 48px);
+ max-width: 500px;
+ padding: 8px 16px;
+ border-radius: 16px;
+
+ backdrop-filter: blur(24px) brightness(0.7) saturate(1.2);
+}
+
+.buttons {
+ display: flex;
+ justify-content: space-between;
+
+ opacity: 0.8;
+}
+
+.range {
+ --bar-background: rgba(255, 255, 255, 0.3);
+ --knob-size: 18px;
+ --knob-background: #ccc;
+}
+
+.skipIcon {
+ width: 24px;
+}
+
+.playerButton {
+ color: white;
+}
diff --git a/src/features/media/gallery/actions/VideoActions.tsx b/src/features/media/gallery/actions/VideoActions.tsx
new file mode 100644
index 0000000000..11c208c795
--- /dev/null
+++ b/src/features/media/gallery/actions/VideoActions.tsx
@@ -0,0 +1,298 @@
+import { IonButton, IonIcon, IonRange } from "@ionic/react";
+import { play, volumeHigh, volumeOff } from "ionicons/icons";
+import { pause } from "ionicons/icons";
+import React, {
+ useContext,
+ useEffect,
+ experimental_useEffectEvent as useEffectEvent,
+ useRef,
+ useState,
+} from "react";
+
+import { back, forward, pip } from "#/features/icons";
+
+import { GalleryContext } from "../GalleryProvider";
+
+import styles from "./VideoActions.module.css";
+
+interface VideoActionsProps {
+ videoRef: React.RefObject;
+}
+
+export default function VideoActionsLoader({ videoRef }: VideoActionsProps) {
+ const [isReady, setIsReady] = useState(false);
+ const rafId = useRef(null);
+
+ useEffect(() => {
+ let done = false;
+
+ const startAnimation = () => {
+ rafId.current = requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ if (!done) {
+ setIsReady(true);
+ }
+ });
+ });
+ };
+
+ startAnimation();
+
+ return () => {
+ done = true;
+ if (rafId.current !== null) {
+ cancelAnimationFrame(rafId.current);
+ }
+ };
+ }, []);
+
+ return isReady ? : null;
+}
+
+function VideoActions({ videoRef }: VideoActionsProps) {
+ const { close } = useContext(GalleryContext);
+ const setupEvent = useEffectEvent(setup);
+ const teardownEvent = useEffectEvent(teardown);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [isDragging, setIsDragging] = useState(false);
+ const [isMuted, setIsMuted] = useState(false);
+ const [wasPlayingBeforeScrub, setWasPlayingBeforeScrub] = useState(false);
+
+ const [canSkip15Seconds, setCanSkip15Seconds] = useState(true);
+
+ useEffect(() => {
+ setupEvent();
+
+ return teardownEvent;
+ }, []);
+
+ function setup() {
+ if (videoRef.current) {
+ videoRef.current.addEventListener("timeupdate", handleTimeUpdate);
+ videoRef.current.addEventListener("play", handlePlay);
+ videoRef.current.addEventListener("pause", handlePause);
+ videoRef.current.addEventListener("volumechange", handleVolumeChange);
+ videoRef.current.addEventListener("durationchange", handleDurationChange);
+
+ setIsPlaying(!videoRef.current.paused);
+ setIsMuted(videoRef.current.muted);
+
+ handleDurationChange();
+ }
+ }
+
+ function teardown() {
+ if (videoRef.current) {
+ videoRef.current.removeEventListener("timeupdate", handleTimeUpdate);
+ videoRef.current.removeEventListener("play", handlePlay);
+ videoRef.current.removeEventListener("pause", handlePause);
+ videoRef.current.removeEventListener("volumechange", handleVolumeChange);
+ videoRef.current.removeEventListener(
+ "durationchange",
+ handleDurationChange,
+ );
+ }
+ }
+
+ function handleTimeUpdate() {
+ if (!videoRef.current) return;
+
+ const currentTime = videoRef.current.currentTime;
+ const duration = videoRef.current.duration;
+ setProgress((currentTime / duration) * 100);
+ }
+
+ function handleDurationChange() {
+ if (!videoRef.current) return;
+
+ setCanSkip15Seconds(videoRef.current.duration > 15);
+ }
+
+ function handlePlay() {
+ setIsPlaying(true);
+ setWasPlayingBeforeScrub(false);
+ }
+
+ function handlePause() {
+ setIsPlaying(false);
+ }
+
+ function handleVolumeChange() {
+ setIsMuted(videoRef.current?.muted ?? false);
+ }
+
+ function togglePlayPause() {
+ if (videoRef.current) {
+ if (isPlaying) {
+ videoRef.current.pause();
+ } else {
+ videoRef.current.play();
+ }
+ setIsPlaying(!isPlaying);
+ }
+ }
+
+ function toggleMute() {
+ if (videoRef.current) {
+ videoRef.current.muted = !isMuted;
+ setIsMuted(!isMuted);
+ }
+ }
+
+ function handleMouseDown() {
+ if (videoRef.current) {
+ setWasPlayingBeforeScrub(!videoRef.current.paused);
+ videoRef.current.pause();
+ }
+ setIsDragging(true);
+ }
+
+ function handleMouseUp() {
+ if (wasPlayingBeforeScrub && videoRef.current) {
+ videoRef.current.play();
+ }
+ setIsDragging(false);
+ }
+
+ function handleMouseMove(
+ event: React.MouseEvent,
+ ) {
+ if (isDragging && videoRef.current) {
+ const progressBar = event.currentTarget;
+ const rect = progressBar.getBoundingClientRect();
+ const offsetX = event.clientX - rect.left;
+ const newTime = (offsetX / rect.width) * videoRef.current.duration;
+ videoRef.current.currentTime = newTime;
+ setProgress((newTime / videoRef.current.duration) * 100);
+ }
+ }
+
+ function handleTouchStart() {
+ if (videoRef.current) {
+ setWasPlayingBeforeScrub(!videoRef.current.paused);
+ videoRef.current.pause();
+ }
+ setIsDragging(true);
+ }
+
+ function handleTouchEnd() {
+ if (wasPlayingBeforeScrub && videoRef.current) {
+ videoRef.current.play();
+ }
+ setIsDragging(false);
+ }
+
+ function handleTouchMove(event: React.TouchEvent) {
+ if (isDragging && videoRef.current) {
+ const touch = event.touches[0];
+ if (touch) {
+ const progressBar = event.currentTarget;
+ const rect = progressBar.getBoundingClientRect();
+ const offsetX = touch.clientX - rect.left;
+ const newTime = (offsetX / rect.width) * videoRef.current.duration;
+ videoRef.current.currentTime = newTime;
+ setProgress((newTime / videoRef.current.duration) * 100);
+ }
+ }
+ }
+
+ async function requestPip() {
+ if (!videoRef.current) return;
+
+ await videoRef.current.requestPictureInPicture();
+ close();
+ }
+
+ function skip(seconds: number) {
+ if (!videoRef.current) return;
+
+ videoRef.current.currentTime += seconds;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ {canSkip15Seconds && (
+
skip(-15)}
+ >
+
+
+ )}
+
+
+
+
+
+ {canSkip15Seconds && (
+
skip(15)}
+ >
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+