@ethora/chat-component-rn 26.10.9 → 26.10.11

package/lib/module/components/Modals/FilePreviewModal/MediaViewer.js

@@ -0,0 +1,819 @@
+"use strict";
+
+/** @format */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, BackHandler, Image, Pressable, StatusBar, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useVideoPlayer, VideoView } from 'expo-video';
+import { useDispatch } from 'react-redux';
+import { BackIcon, DeleteIcon, PauseIcon, PlayIcon, ReplyIcon, SaveIcon } from '../../../assets/icons';
+import { withFileToken } from '../../../helpers/secureFileUrl';
+import { downloadVideoToCache, findCachedVideo, isRemoteUrl, isStreamingUnsupported, markStreamingUnsupported } from '../../../helpers/videoCache';
+import { setDeleteModal } from '../../../roomStore/chatSettingsSlice';
+import { setActiveMessage, setEditAction } from '../../../roomStore/roomsSlice';
+import { useT, useUiLocale } from '../../../i18n/useT';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const WHITE = '#FFFFFF';
+const BAR_BACKGROUND = 'rgba(0, 0, 0, 0.45)';
+/** Drag (fraction of the height) or fling speed that closes the viewer. */
+const CLOSE_DISTANCE = 0.15;
+const CLOSE_VELOCITY = 900;
+/** Swipe (fraction of the width) or fling speed that turns the page. */
+const PAGE_DISTANCE = 0.25;
+const PAGE_VELOCITY = 700;
+/** A playing video takes the chrome away after this long without a touch. */
+const AUTO_HIDE_MS = 3000;
+const formatTime = seconds => {
+  const total = Math.max(0, Math.floor(seconds || 0));
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${s < 10 ? '0' : ''}${s}`;
+};
+/**
+ * Full-screen photo / video viewer that behaves like Telegram's. A tap shows
+ * or hides everything but the media (a fade both ways); a drag up or down
+ * pulls the media off with the backdrop fading behind it, and a long enough
+ * drag or a fling closes the viewer; a sideways swipe turns the page in an
+ * album. The bottom bar carries Reply (where replies are on) and Delete (on
+ * one's own message). A video has its own controls in the chrome: tapping
+ * them works the player instead of hiding the chrome, and while it plays the
+ * chrome goes away by itself after a few seconds.
+ */
+const MediaViewer = ({
+  file,
+  onClose,
+  onPage,
+  onSave,
+  onReplyOpened
+}) => {
+  const t = useT();
+  const locale = useUiLocale();
+  const dispatch = useDispatch();
+  const insets = useSafeAreaInsets();
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const appear = useRef(new Animated.Value(0)).current;
+  const dragX = useRef(new Animated.Value(0)).current;
+  const dragY = useRef(new Animated.Value(0)).current;
+  const chrome = useRef(new Animated.Value(1)).current;
+  const [chromeVisible, setChromeVisible] = useState(true);
+  const [bottomBarHeight, setBottomBarHeight] = useState(0);
+  const closing = useRef(false);
+  const axis = useRef(null);
+  const pendingSlide = useRef(0);
+  const playing = useRef(false);
+  const hideTimer = useRef(null);
+  const siblings = file.siblings ?? [];
+  const index = file.index ?? 0;
+  const hasPrev = siblings.length > 1 && index > 0;
+  const hasNext = siblings.length > 1 && index < siblings.length - 1;
+  const isVideo = (file.mimetype || '').startsWith('video/');
+  const source = file.source;
+  const canReply = !!source?.replyTo;
+  const canDelete = !!source?.own;
+  useEffect(() => {
+    Animated.timing(appear, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  }, [appear]);
+
+  // ---- chrome ------------------------------------------------------------
+
+  const cancelAutoHide = useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+    hideTimer.current = null;
+  }, []);
+  const showChrome = useCallback(visible => {
+    setChromeVisible(visible);
+    Animated.timing(chrome, {
+      toValue: visible ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [chrome]);
+  const scheduleAutoHide = useCallback(() => {
+    cancelAutoHide();
+    if (!playing.current) {
+      return;
+    }
+    hideTimer.current = setTimeout(() => showChrome(false), AUTO_HIDE_MS);
+  }, [cancelAutoHide, showChrome]);
+  useEffect(() => cancelAutoHide, [cancelAutoHide]);
+  const toggleChrome = () => {
+    const next = !chromeVisible;
+    showChrome(next);
+    if (next) {
+      scheduleAutoHide();
+    } else {
+      cancelAutoHide();
+    }
+  };
+  const handlePlayback = useCallback(isPlaying => {
+    playing.current = isPlaying;
+    if (isPlaying) {
+      scheduleAutoHide();
+    } else {
+      cancelAutoHide();
+    }
+  }, [cancelAutoHide, scheduleAutoHide]);
+
+  // ---- close / page --------------------------------------------------------
+
+  const close = useCallback((direction = 0) => {
+    if (closing.current) {
+      return;
+    }
+    closing.current = true;
+    cancelAutoHide();
+    const animations = [Animated.timing(appear, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })];
+    if (direction !== 0) {
+      animations.push(Animated.timing(dragY, {
+        toValue: direction * height,
+        duration: 200,
+        useNativeDriver: true
+      }));
+    }
+    Animated.parallel(animations).start(() => onClose());
+  }, [appear, cancelAutoHide, dragY, height, onClose]);
+  useEffect(() => {
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => sub.remove();
+  }, [close]);
+  const springBack = value => Animated.spring(value, {
+    toValue: 0,
+    useNativeDriver: true,
+    bounciness: 4
+  }).start();
+  const turnPage = useCallback(direction => {
+    Animated.timing(dragX, {
+      toValue: -direction * width,
+      duration: 160,
+      useNativeDriver: true
+    }).start(() => {
+      pendingSlide.current = direction;
+      onPage?.(index + direction);
+    });
+  }, [dragX, index, onPage, width]);
+
+  // The new file mounts off-screen on the side it comes from, then slides in.
+  useEffect(() => {
+    const direction = pendingSlide.current;
+    if (!direction) {
+      return;
+    }
+    pendingSlide.current = 0;
+    playing.current = false;
+    dragX.setValue(direction * width);
+    Animated.timing(dragX, {
+      toValue: 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [dragX, file.fileURL, width]);
+
+  // ---- gestures ------------------------------------------------------------
+
+  const latest = useRef({
+    hasPrev,
+    hasNext,
+    width,
+    height,
+    close,
+    turnPage
+  });
+  latest.current = {
+    hasPrev,
+    hasNext,
+    width,
+    height,
+    close,
+    turnPage
+  };
+  const pageable = siblings.length > 1;
+  const pan = useMemo(() => Gesture.Pan().runOnJS(true).activeOffsetY([-12, 12]).activeOffsetX(pageable ? [-12, 12] : [-10000, 10000]).onStart(e => {
+    axis.current = pageable && Math.abs(e.translationX) > Math.abs(e.translationY) ? 'x' : 'y';
+  }).onUpdate(e => {
+    const l = latest.current;
+    if (axis.current === 'x') {
+      // Past the first or last file the page only gives a little.
+      const edge = e.translationX > 0 && !l.hasPrev || e.translationX < 0 && !l.hasNext;
+      dragX.setValue(edge ? e.translationX * 0.3 : e.translationX);
+    } else {
+      dragY.setValue(e.translationY);
+    }
+  }).onEnd(e => {
+    const l = latest.current;
+    if (axis.current === 'x') {
+      if ((e.translationX < -l.width * PAGE_DISTANCE || e.velocityX < -PAGE_VELOCITY) && l.hasNext) {
+        l.turnPage(1);
+      } else if ((e.translationX > l.width * PAGE_DISTANCE || e.velocityX > PAGE_VELOCITY) && l.hasPrev) {
+        l.turnPage(-1);
+      } else {
+        springBack(dragX);
+      }
+    } else if (Math.abs(e.translationY) > l.height * CLOSE_DISTANCE || Math.abs(e.velocityY) > CLOSE_VELOCITY) {
+      l.close(Math.sign(e.translationY || e.velocityY) || 1);
+    } else {
+      springBack(dragY);
+    }
+    axis.current = null;
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [pageable]);
+
+  // ---- actions -------------------------------------------------------------
+
+  const handleReply = () => {
+    if (!source?.replyTo) {
+      return;
+    }
+    const target = source.replyTo;
+    close();
+    dispatch(setEditAction({
+      isEdit: false
+    }));
+    dispatch(setActiveMessage({
+      id: target.id,
+      chatJID: target.chatJID
+    }));
+    onReplyOpened?.();
+  };
+  const handleDelete = () => {
+    if (!source?.own) {
+      return;
+    }
+    const {
+      roomJid,
+      messageId
+    } = source;
+    close();
+    dispatch(setDeleteModal({
+      isDeleteModal: true,
+      roomJid,
+      messageId
+    }));
+  };
+
+  // ---- styles from the animated values -------------------------------------
+
+  const dragFade = dragY.interpolate({
+    inputRange: [-height / 2, 0, height / 2],
+    outputRange: [0.15, 1, 0.15],
+    extrapolate: 'clamp'
+  });
+  const dragShrink = dragY.interpolate({
+    inputRange: [-height, 0, height],
+    outputRange: [0.85, 1, 0.85],
+    extrapolate: 'clamp'
+  });
+  const backdropOpacity = Animated.multiply(appear, dragFade);
+  const mediaStyle = {
+    transform: [{
+      translateX: dragX
+    }, {
+      translateY: dragY
+    }, {
+      scale: Animated.multiply(appear.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.92, 1]
+      }), dragShrink)
+    }],
+    opacity: appear
+  };
+  // The chrome steps aside while the media is being dragged.
+  const chromeOpacity = Animated.multiply(Animated.multiply(chrome, appear), dragY.interpolate({
+    inputRange: [-60, 0, 60],
+    outputRange: [0, 1, 0],
+    extrapolate: 'clamp'
+  }));
+  const chromePointerEvents = chromeVisible ? 'box-none' : 'none';
+  const subtitle = [source?.timestamp ? new Date(source.timestamp).toLocaleString(locale, {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit'
+  }) : null, siblings.length > 1 ? t('attachment.position', {
+    index: index + 1,
+    total: siblings.length
+  }) : null].filter(Boolean).join(' · ');
+  const showBottomBar = canReply || canDelete;
+  return /*#__PURE__*/_jsxs(View, {
+    style: StyleSheet.absoluteFill,
+    testID: "media-viewer",
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: "light-content",
+      hidden: !chromeVisible,
+      animated: true
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, styles.backdrop, {
+        opacity: backdropOpacity
+      }]
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: StyleSheet.absoluteFill,
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          testID: "media-viewer-surface",
+          style: StyleSheet.absoluteFill,
+          onPress: toggleChrome,
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            style: [StyleSheet.absoluteFill, mediaStyle],
+            pointerEvents: "none",
+            children: isVideo ? null : /*#__PURE__*/_jsx(ViewerImage, {
+              uri: file.fileURL
+            }, file.fileURL)
+          })
+        }), isVideo && /*#__PURE__*/_jsx(ViewerVideo, {
+          uri: withFileToken(file.fileURL),
+          mimetype: file.mimetype,
+          mediaStyle: mediaStyle,
+          chromeOpacity: chromeOpacity,
+          chromePointerEvents: chromePointerEvents,
+          bottomOffset: (showBottomBar ? bottomBarHeight : insets.bottom) + 8,
+          outerGesture: pan,
+          onPlayback: handlePlayback,
+          onActivity: scheduleAutoHide
+        }, file.fileURL), /*#__PURE__*/_jsxs(Animated.View, {
+          pointerEvents: chromePointerEvents,
+          style: [styles.topBar, {
+            paddingTop: insets.top + 6,
+            opacity: chromeOpacity
+          }],
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            testID: "media-viewer-back",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.close'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: () => close(),
+            children: /*#__PURE__*/_jsx(BackIcon, {
+              color: WHITE
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.titleBlock,
+            children: [/*#__PURE__*/_jsx(Text, {
+              numberOfLines: 1,
+              style: styles.title,
+              children: source?.senderName || t('modal.filePreview.title')
+            }), !!subtitle && /*#__PURE__*/_jsx(Text, {
+              numberOfLines: 1,
+              style: styles.subtitle,
+              children: subtitle
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            testID: "media-viewer-save",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.save'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: onSave,
+            children: /*#__PURE__*/_jsx(SaveIcon, {
+              color: WHITE
+            })
+          })]
+        }), showBottomBar && /*#__PURE__*/_jsxs(Animated.View, {
+          pointerEvents: chromePointerEvents,
+          onLayout: e => setBottomBarHeight(e.nativeEvent.layout.height),
+          style: [styles.bottomBar, {
+            paddingBottom: insets.bottom + 8,
+            opacity: chromeOpacity
+          }],
+          children: [canReply ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            testID: "media-viewer-reply",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.reply'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: handleReply,
+            children: /*#__PURE__*/_jsx(ReplyIcon, {
+              color: WHITE
+            })
+          }) : /*#__PURE__*/_jsx(View, {
+            style: styles.iconButton
+          }), canDelete && /*#__PURE__*/_jsx(TouchableOpacity, {
+            testID: "media-viewer-delete",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.delete'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: handleDelete,
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              fill: WHITE
+            })
+          })]
+        })]
+      })
+    })]
+  });
+};
+const ViewerImage = ({
+  uri
+}) => {
+  const [loaded, setLoaded] = useState(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: withFileToken(uri)
+      },
+      style: StyleSheet.absoluteFill,
+      resizeMode: "contain",
+      onLoad: () => setLoaded(true),
+      onError: () => setLoaded(true)
+    }), !loaded && /*#__PURE__*/_jsx(View, {
+      style: styles.center,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: WHITE
+      })
+    })]
+  });
+};
+/**
+ * The video page: the surface in the media layer, the play / pause button
+ * and the scrubber in the chrome layer. Streams when the server allows it
+ * and falls back to a downloaded copy (AVPlayer refuses servers that ignore
+ * byte ranges), which is also what a reopened video plays from.
+ */
+const ViewerVideo = ({
+  uri,
+  mimetype,
+  mediaStyle,
+  chromeOpacity,
+  chromePointerEvents,
+  bottomOffset,
+  outerGesture,
+  onPlayback,
+  onActivity
+}) => {
+  const t = useT();
+  const remote = isRemoteUrl(uri);
+  // What the player is given; null until we know where to play from.
+  const [source, setSource] = useState(remote ? null : uri);
+  // null = not downloading, otherwise 0..1 (0 while the size is unknown).
+  const [progress, setProgress] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [time, setTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [scrubTime, setScrubTime] = useState(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const ended = useRef(false);
+  // Opens playing, like Telegram; a pause sticks across a fallback copy.
+  const wantsPlay = useRef(true);
+  const downloadStarted = useRef(false);
+  const mounted = useRef(true);
+  useEffect(() => () => {
+    mounted.current = false;
+  }, []);
+  const download = useCallback(() => {
+    if (downloadStarted.current) {
+      return;
+    }
+    downloadStarted.current = true;
+    setProgress(0);
+    downloadVideoToCache(uri, mimetype, fraction => {
+      if (mounted.current) {
+        setProgress(fraction);
+      }
+    }).then(localUri => {
+      if (!mounted.current) {
+        return;
+      }
+      setProgress(null);
+      setSource(localUri);
+    }).catch(err => {
+      console.warn('video download failed', err);
+      if (!mounted.current) {
+        return;
+      }
+      setProgress(null);
+      setFailed(true);
+    });
+  }, [mimetype, uri]);
+  useEffect(() => {
+    if (!remote) {
+      return;
+    }
+    let active = true;
+    findCachedVideo(uri, mimetype).then(cached => {
+      if (!active) {
+        return;
+      }
+      if (cached) {
+        setSource(cached);
+      } else if (isStreamingUnsupported(uri)) {
+        download();
+      } else {
+        setSource(uri);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [download, mimetype, remote, uri]);
+  const player = useVideoPlayer(source, p => {
+    p.muted = false;
+    p.timeUpdateEventInterval = 0.25;
+    if (wantsPlay.current) {
+      p.play();
+    }
+  });
+  useEffect(() => {
+    const subs = [player.addListener('playingChange', ({
+      isPlaying: next
+    }) => {
+      setIsPlaying(next);
+      onPlayback(next);
+    }), player.addListener('timeUpdate', ({
+      currentTime
+    }) => setTime(currentTime)), player.addListener('playToEnd', () => {
+      ended.current = true;
+    }), player.addListener('statusChange', event => {
+      if (event.status === 'readyToPlay') {
+        setDuration(player.duration || 0);
+        return;
+      }
+      if (event.status !== 'error') {
+        return;
+      }
+      if (source === uri && remote) {
+        markStreamingUnsupported(uri);
+        download();
+      } else {
+        setFailed(true);
+      }
+    })];
+    return () => subs.forEach(sub => sub.remove());
+  }, [download, onPlayback, player, remote, source, uri]);
+  useEffect(() => () => onPlayback(false), [onPlayback]);
+  const togglePlay = () => {
+    onActivity();
+    if (isPlaying) {
+      wantsPlay.current = false;
+      player.pause();
+      return;
+    }
+    if (ended.current) {
+      ended.current = false;
+      player.currentTime = 0;
+    }
+    wantsPlay.current = true;
+    player.play();
+  };
+  const latest = useRef({
+    trackWidth,
+    duration,
+    player,
+    onActivity
+  });
+  latest.current = {
+    trackWidth,
+    duration,
+    player,
+    onActivity
+  };
+  const timeAt = x => {
+    const l = latest.current;
+    if (l.trackWidth <= 0 || l.duration <= 0) {
+      return 0;
+    }
+    return Math.min(1, Math.max(0, x / l.trackWidth)) * l.duration;
+  };
+  const seek = seconds => {
+    const l = latest.current;
+    ended.current = false;
+    l.player.currentTime = seconds;
+    setTime(seconds);
+    l.onActivity();
+  };
+  const scrub = useMemo(() => {
+    const drag = Gesture.Pan().runOnJS(true).activeOffsetX([-2, 2]).onUpdate(e => setScrubTime(timeAt(e.x))).onEnd(e => seek(timeAt(e.x))).onFinalize(() => setScrubTime(null)).blocksExternalGesture(outerGesture);
+    const tap = Gesture.Tap().runOnJS(true).onEnd(e => seek(timeAt(e.x))).blocksExternalGesture(outerGesture);
+    return Gesture.Exclusive(drag, tap);
+  }, [outerGesture]);
+  const loading = progress !== null || source === null;
+  const shown = scrubTime ?? time;
+  const fraction = duration > 0 ? Math.min(1, shown / duration) : 0;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, mediaStyle],
+      pointerEvents: "none",
+      children: !loading && !failed && /*#__PURE__*/_jsx(VideoView, {
+        player: player,
+        style: StyleSheet.absoluteFill,
+        contentFit: "contain",
+        nativeControls: false,
+        surfaceType: "textureView"
+      })
+    }), failed ? /*#__PURE__*/_jsxs(View, {
+      style: styles.center,
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.failedTitle,
+        children: t('video.cantPlay')
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.failedHint,
+        children: t('video.cantPlayHint')
+      })]
+    }) : loading ? /*#__PURE__*/_jsxs(View, {
+      style: styles.center,
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.playButton,
+        children: /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: WHITE
+        })
+      }), !!progress && /*#__PURE__*/_jsxs(Text, {
+        style: styles.progress,
+        children: [Math.round(progress * 100), "%"]
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: chromePointerEvents,
+        style: [styles.center, {
+          opacity: chromeOpacity
+        }],
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          testID: "media-viewer-play",
+          accessibilityRole: "button",
+          activeOpacity: 0.8,
+          style: styles.playButton,
+          onPress: togglePlay,
+          children: isPlaying ? /*#__PURE__*/_jsx(PauseIcon, {
+            width: 30,
+            height: 30,
+            color: WHITE
+          }) : /*#__PURE__*/_jsx(PlayIcon, {
+            width: 30,
+            height: 30,
+            color: WHITE
+          })
+        })
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        pointerEvents: chromePointerEvents,
+        style: [styles.scrubberRow, {
+          bottom: bottomOffset,
+          opacity: chromeOpacity
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.time,
+          children: formatTime(shown)
+        }), /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: scrub,
+          children: /*#__PURE__*/_jsxs(View, {
+            testID: "media-viewer-scrubber",
+            style: styles.track,
+            onLayout: e => setTrackWidth(e.nativeEvent.layout.width),
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.trackLine,
+              children: /*#__PURE__*/_jsx(View, {
+                style: [styles.trackFill, {
+                  width: `${fraction * 100}%`
+                }]
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.thumb, {
+                left: fraction * trackWidth - 7
+              }]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.time,
+          children: formatTime(duration)
+        })]
+      })]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  backdrop: {
+    backgroundColor: '#000000'
+  },
+  center: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  topBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingBottom: 10,
+    backgroundColor: BAR_BACKGROUND
+  },
+  bottomBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+    paddingTop: 10,
+    backgroundColor: BAR_BACKGROUND
+  },
+  iconButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  titleBlock: {
+    flex: 1,
+    alignItems: 'center',
+    paddingHorizontal: 8
+  },
+  title: {
+    color: WHITE,
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  subtitle: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: 13,
+    marginTop: 2
+  },
+  playButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  progress: {
+    marginTop: 10,
+    color: WHITE,
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  failedTitle: {
+    color: WHITE,
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  failedHint: {
+    marginTop: 8,
+    color: 'rgba(255, 255, 255, 0.7)',
+    textAlign: 'center',
+    paddingHorizontal: 32
+  },
+  scrubberRow: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10
+  },
+  time: {
+    color: WHITE,
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+    minWidth: 36,
+    textAlign: 'center'
+  },
+  track: {
+    flex: 1,
+    height: 32,
+    justifyContent: 'center'
+  },
+  trackLine: {
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: 'rgba(255, 255, 255, 0.35)',
+    overflow: 'hidden'
+  },
+  trackFill: {
+    height: '100%',
+    backgroundColor: WHITE
+  },
+  thumb: {
+    position: 'absolute',
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: WHITE
+  }
+});
+export default MediaViewer;
+//# sourceMappingURL=MediaViewer.js.map