discord-decomp/modules/media_viewer/native/components/MediaSlider.tsx

// Metro module 8126 (f8127).
import { useRef, useState, useEffect, useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { isAndroid } from "../../../../utils/PlatformUtils";
import useInitialValue from "../../../../hooks/useInitialValue";
import Module12 from "../../../../_bundle/Module12";
import Module689 from "../../../../_bundle/Module689";
import { getTimeFormat } from "../../../../utils/native/TimeUtils";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../../intl/index.native";
import { PlayIcon } from "../../../../design/components/Icon/native/redesign/generated/PlayIcon";
import { PauseIcon } from "../../../../design/components/Icon/native/redesign/generated/PauseIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import Module7659 from "../../../../_bundle/Module7659";
import Module8131 from "../../../../_bundle/Module8131";
import Module712 from "../../../../_bundle/Module712";
const useStyles = createStyles({
  container: {
    flex: 1,
    marginHorizontal: 12,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  icon: {
    marginRight: 16
  },
  centerText: {
    lineHeight: isAndroid() ? 12 : void 0
  },
  sliderContainer: {
    position: "relative",
    flex: 1,
    marginHorizontal: isAndroid() ? 0 : 16,
    justifyContent: "center"
  },
  progressSliderContainer: {
    position: "relative",
    flex: 1,
    marginHorizontal: 0,
    justifyContent: "center"
  },
  timelineBackgroundSlider: {
    position: "absolute",
    width: "100%",
    backgroundColor: "transparent",
    zIndex: 0
  },
  downloadProgressSlider: {
    position: "absolute",
    width: "100%",
    backgroundColor: "transparent",
    zIndex: 1
  },
  playbackSlider: {
    position: "absolute",
    width: "100%",
    zIndex: 2
  }
});
export default function MediaSlider(props) {
  let c16277_10, c16277_11;
  const { style, controls, paused, setPaused, onPlayPress } = props;
  c16277_10 = void 0;
  c16277_11 = void 0;
  const styles = useStyles();
  const ref = useRef(false);
  const [value, setState] = useState(0);
  const [value2, setState2] = useState(0);
  const [maximumTrackTintColor, setState3] = useState("transparent");
  const ref2 = useRef(0);
  const [width, setState4] = useState(0);
  const initialValue = useInitialValue(() => Module12.throttle((a0) => {
    setState(a0);
  }, 100));
  c16277_10 = initialValue;
  c16277_11 = useInitialValue(() => Module12.throttle((a0) => {
    setState2(a0);
    setState3(a0 === 1 ? Module689("#FFFFFF").alpha(0.2).hex() : "transparent");
  }, 100));
  useEffect(() => () => {
    c16277_10.cancel();
  }, [initialValue]);
  controls.useSubscribe((a0, a1) => {
    c16277_10(a0);
    ref2.current = a1;
  }, (a0) => {
    setPaused(a0);
  }, (a0) => {
    c16277_11(a0);
  });
  const callback2 = useCallback(() => {
    if (!paused) {
      controls.pause(true);
      ref.current = true;
    }
  }, [controls, paused]);
  const callback = useCallback((a0) => {
    controls.seek(a0);
    if (ref.current) {
      controls.pause(false);
      ref.current = false;
    }
  }, [controls]);
  const timeFormat = getTimeFormat(value);
  return <View style={[styles.container, style]}>
    <PressableOpacity style={styles.icon} accessibilityRole="button" accessibilityLabel={paused ? intl.string(t.RscU7I) : intl.string(t.ZcgDJX)} onPress={() => {
      if (paused) {
        onPlayPress();
      }
      controls.pause(!paused);
    }} hitSlop={{
      top: 8,
      right: 8,
      bottom: 8,
      left: 8
    }}>
      {paused ? <PlayIcon size="md" color="white" /> : <PauseIcon size="md" color="white" />}
    </PressableOpacity>
    <Text style={[styles.centerText, {
      width
    }]} tabularNumbers lineClamp={1} color="text-overlay-light" variant="text-xs/medium">{timeFormat}</Text>
    <View style={styles.sliderContainer}>
      <View pointerEvents="none" style={styles.progressSliderContainer}>
        <Module7659 style={styles.timelineBackgroundSlider} value={1} minimumValue={0} maximumValue={1} thumbTintColor={Module689("#FFFFFF").alpha(0).hex()} minimumTrackTintColor={Module689("#FFFFFF").alpha(0.1).hex()} maximumTrackTintColor={Module689("#FFFFFF").alpha(0.1).hex()} />
        <Module7659 style={styles.downloadProgressSlider} value={value2} minimumValue={0} maximumValue={1} thumbTintColor={Module689("#FFFFFF").alpha(0).hex()} minimumTrackTintColor={Module689("#FFFFFF").alpha(0.2).hex()} maximumTrackTintColor={maximumTrackTintColor} />
      </View>
      <Module7659 style={styles.playbackSlider} value={value} thumbImage={Module8131} minimumValue={0} maximumValue={ref2.current} minimumTrackTintColor={Module712.unsafe_rawColors.WHITE} maximumTrackTintColor="transparent" onValueChange={initialValue} onSlidingStart={callback2} onSlidingComplete={callback} />
    </View>
    <Text style={styles.centerText} variant="text-xs/medium" color="text-overlay-light" tabularNumbers lineClamp={1} onLayout={(event) => {
      setState4(event.nativeEvent.layout.width);
    }}>
      {getTimeFormat(ref2.current)}
    </Text>
  </View>;
};