1
User clicks "Add Annotation"
2
  ↓
3
Dispatch action
4
  ↓
5
Reducer updates state
6
  ↓
7
Components re-render
8
  ↓
9
UI updates

1
const initialState = {
2
  // Video source management
3
  videoSource: {
4
    type: null,        // 'youtube' | 'upload'
5
    url: null,         // YouTube URL
6
    file: null         // Uploaded file
7
  },
8

9
  // Annotation data
10
  annotations: [],     // Array of { id, timestamp, text }
11

12
  // Playback state
13
  currentTime: 0,      // Current video position
14
  isPlaying: false,    // Is video playing?
15

16
  // UI state
17
  selectedAnnotation: null,  // Currently selected annotation
18
  isEditMode: false,         // Is user editing?
19
  playerReady: false         // Is player initialized?
20
};

1
App
2
├── Header
3
├── VideoSourceSelector
4
│   ├── YouTube URL Input
5
│   └── File Upload Button
6
├── VideoPlayer
7
│   ├── YouTube IFrame
8
│   └── HTML5 Video
9
├── AnnotationsPanel
10
│   ├── Annotation List
11
│   │   └── Annotation Item
12
│   │       ├── Timestamp
13
│   │       ├── Text
14
│   │       └── Actions (Edit/Delete)
15
│   └── Add Button
16
└── AddAnnotationModal
17
    ├── Timestamp Display
18
    ├── Text Input
19
    └── Save/Cancel

1
const loadYouTubeAPI = () => {
2
  return new Promise((resolve) => {
3
    if (window.YT && window.YT.Player) {
4
      resolve();
5
      return;
6
    }
7

8
    window.onYouTubeIframeAPIReady = () => {
9
      resolve();
10
    };
11

12
    const tag = document.createElement('script');
13
    tag.src = 'https://www.youtube.com/iframe_api';
14
    document.head.appendChild(tag);
15
  });
16
};

1
useEffect(() => {
2
  const initPlayer = async () => {
3
    await loadYouTubeAPI();
4

5
    const player = new window.YT.Player('youtube-player', {
6
      videoId: extractVideoId(videoUrl),
7
      events: {
8
        onReady: handlePlayerReady,
9
        onStateChange: handleStateChange
10
      }
11
    });
12

13
    playerRef.current = player;
14
  };
15

16
  if (videoSource.type === 'youtube' && videoSource.url) {
17
    initPlayer();
18
  }
19
}, [videoSource]);

1
useEffect(() => {
2
  if (!isPlaying) return;
3

4
  const interval = setInterval(() => {
5
    if (playerRef.current?.getCurrentTime) {
6
      const time = playerRef.current.getCurrentTime();
7
      dispatch(updateCurrentTime(time));
8
    }
9
  }, 100);
10

11
  return () => clearInterval(interval);
12
}, [isPlaying]);

1
const handleFileUpload = (event) => {
2
  const file = event.target.files[0];
3

4
  if (!file.type.startsWith('video/')) {
5
    alert('Please upload a valid video file');
6
    return;
7
  }
8

9
  dispatch(setVideoSource({
10
    type: 'upload',
11
    file: file
12
  }));
13
};

1
useEffect(() => {
2
  if (videoSource.type !== 'upload') return;
3

4
  const url = URL.createObjectURL(videoSource.file);
5
  videoRef.current.src = url;
6

7
  return () => URL.revokeObjectURL(url);
8
}, [videoSource]);

1
<video
2
  ref={videoRef}
3
  controls
4
  onTimeUpdate={(e) => dispatch(updateCurrentTime(e.target.currentTime))}
5
  onPlay={() => dispatch(setPlaying(true))}
6
  onPause={() => dispatch(setPlaying(false))}
7
/>

1
const handleAddAnnotation = () => {
2
  const annotation = {
3
    id: crypto.randomUUID(),
4
    timestamp: currentTime,
5
    text: annotationText,
6
    createdAt: Date.now()
7
  };
8

9
  dispatch(addAnnotation(annotation));
10
  dispatch(closeModal());
11
};

1
const handleEditAnnotation = (id, newText) => {
2
  dispatch(updateAnnotation({
3
    id,
4
    text: newText
5
  }));
6
};

1
const handleDeleteAnnotation = (id) => {
2
  if (confirm('Delete this annotation?')) {
3
    dispatch(deleteAnnotation(id));
4
  }
5
};

1
const handleAnnotationClick = (timestamp) => {
2
  if (playerRef.current?.seekTo) {
3
    playerRef.current.seekTo(timestamp);
4
  } else if (videoRef.current) {
5
    videoRef.current.currentTime = timestamp;
6
  }
7

8
  dispatch(setSelectedAnnotation(id));
9
};

1
const isActive = (annotation) => {
2
  return currentTime >= annotation.timestamp &&
3
         (nextAnnotation ? currentTime < nextAnnotation.timestamp : true);
4
};
5

6
return (
7
  <div className={cn(
8
    'annotation',
9
    isActive(annotation) && 'active'
10
  )}>
11
    {/* Annotation content */}
12
  </div>
13
);

1
useEffect(() => {
2
  const activeElement = document.querySelector('.annotation.active');
3
  if (activeElement) {
4
    activeElement.scrollIntoView({
5
      behavior: 'smooth',
6
      block: 'nearest'
7
    });
8
  }
9
}, [currentTime]);

1
const AnnotationItem = React.memo(({ annotation, isActive, onClick }) => {
2
  return (
3
    <div className={isActive ? 'active' : ''} onClick={onClick}>
4
      {annotation.text}
5
    </div>
6
  );
7
}, (prevProps, nextProps) => {
8
  return prevProps.isActive === nextProps.isActive &&
9
         prevProps.annotation.id === nextProps.annotation.id;
10
});