musicland/src/components/BackgroundVideo.web.js

import { MaterialIcons } from '@expo/vector-icons'
import React, { useEffect, useRef, useState } from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'

import { resolveMediaUri } from '../utils/resolveMediaUri'

const BackgroundVideo = ({ source, soundButtonStyle = null, silent = false }) => {
  const videoRef = useRef(null)
  const [uri, setUri] = useState(null)
  const [muted, setMuted] = useState(false)

  useEffect(() => {
    let isMounted = true

    if (!source) {
      setUri(null)
      return () => {
        isMounted = false
      }
    }

    const loadSource = async () => {
      try {
        const nextUri = await resolveMediaUri(source)
        if (isMounted) {
          setUri(nextUri)
        }
      } catch {
        if (isMounted) {
          setUri(null)
        }
      }
    }

    loadSource()

    return () => {
      isMounted = false
    }
  }, [source])

  useEffect(() => {
    const video = videoRef.current

    if (!video || !uri) {
      return
    }

    const playResult = video.play()
    playResult?.catch?.((error) => {
      if (error?.name === 'NotAllowedError') {
        setMuted(true)
        video.muted = true
        video.play()?.catch?.(() => {})
      }
    })
  }, [uri])

  useEffect(() => {
    const video = videoRef.current

    if (!video) {
      return
    }

    video.muted = silent || muted
    if (video.paused) {
      video.play()?.catch?.(() => {})
    }
  }, [muted, silent])

  if (!uri) {
    return null
  }

  return (
    <View pointerEvents="box-none" style={styles.container}>
      <video
        ref={videoRef}
        src={uri}
        style={styles.video}
        playsInline
        autoPlay
        loop
        muted={silent || muted}
        controls={false}
      />
      <View pointerEvents="none" style={styles.scrim} />
      {!silent ? (
        <Pressable
          accessibilityRole="button"
          accessibilityLabel={muted ? 'Activer le son' : 'Couper le son'}
          onPress={() => setMuted((currentMuted) => !currentMuted)}
          style={({ hovered, pressed }) => [
            styles.soundButton,
            soundButtonStyle,
            hovered && styles.soundButtonHovered,
            pressed && styles.soundButtonPressed,
          ]}
        >
          <MaterialIcons
            name={muted ? 'volume-off' : 'volume-up'}
            size={20}
            color="#FFFFFF"
          />
          <Text style={styles.soundButtonText}>
            {muted ? 'Activer le son' : 'Couper le son'}
          </Text>
        </Pressable>
      ) : null}
    </View>
  )
}

export default React.memo(BackgroundVideo)

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    overflow: 'hidden',
  },
  video: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  },
  scrim: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(5, 7, 12, 0.52)',
  },
  soundButton: {
    position: 'absolute',
    top: 78,
    left: 24,
    zIndex: 30,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 22,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.42)',
    backgroundColor: 'rgba(7, 9, 14, 0.68)',
    cursor: 'pointer',
  },
  soundButtonHovered: {
    backgroundColor: 'rgba(7, 9, 14, 0.82)',
  },
  soundButtonPressed: {
    opacity: 0.78,
  },
  soundButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600',
  },
})