Hugging Face's logo

Spaces:
jbilcke-hf
/
ai-tube
Running on CPU Upgrade

App Files Community
8
ai-tube
File size: 2,302 Bytes 
6215321
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 

import React, { useState, useEffect, useRef } from 'react';

interface VideoLoopProps {
  className?: string;
  playlist?: string[];
  playbackSpeed?: number;
}

export const VideoLoop: React.FC<VideoLoopProps> = ({
  className = "",
  playlist = [],
  playbackSpeed = 1.0
}) => {
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
  const videoRef = useRef<HTMLVideoElement>(null);

  const handleVideoEnd = () => {
    // Loop only if there is more than one video
    if (playlist.length > 1) {
      setCurrentVideoIndex(prevIndex => (prevIndex + 1) % playlist.length);
    }
  };

  // Setup and handle changing playback rate and video source
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.playbackRate = playbackSpeed;
      videoRef.current.src = playlist[currentVideoIndex] || ''; // Resort to empty string if undefined
      videoRef.current.load();
      if (videoRef.current.src) {
        videoRef.current.play().catch(error => {
          console.error('Video play failed', error);
        });
      } else {
        console.log("VideoLoop: cannot start (no video)")
      }
    }
  }, [playbackSpeed, currentVideoIndex, playlist]);

  // Handle native video controls interaction
  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement || playlist.length === 0) return;

    const handlePlay = () => {
      if (videoElement.paused && !videoElement.ended) {
        if (videoRef.current?.src) {
          videoElement.play().catch((error) => {
            console.error('Error playing the video', error);
          });
        } else {
          console.log("VideoLoop: cannot start (no video)")
        }
      }
    };

    videoElement.addEventListener('play', handlePlay);
    videoElement.addEventListener('ended', handleVideoEnd);

    return () => {
      videoElement.removeEventListener('play', handlePlay);
      videoElement.removeEventListener('ended', handleVideoEnd);
    };
  }, [playlist]);

  // Handle UI case for empty playlists
  if (playlist.length === 0 || !playlist[currentVideoIndex]) {
    return <></>
  }

  return (
    <video
      ref={videoRef}
      loop={false}
      className={className}
      playsInline
      muted
      autoPlay
      src={playlist[currentVideoIndex]}
    />
  );
};