feat: better buttons for video content type

alterviewxyz · Dec 15, 2024 · 415d8a8 · 415d8a8
1 parent 0622546
commit 415d8a8
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 34 deletions.
diff --git a/src/contents/Video.tsx b/src/contents/Video.tsx
@@ -21,27 +21,54 @@ function VideoController({ content, onUpdate }: ControllerProps<VideoContent>) {
 
   return (
     <div className="controller-item">
-      <div className="inside">
+      <div className="inside no-drag">
+        <div className="flex flex-row justify-start items-center my-2">
+          <button
+            type="button"
+            className={`w-10 h-10 ml-2 p-2 rounded ${
+              content.loop
+                ? 'bg-blue-500 hover:bg-blue-600'
+                : 'bg-gray-500 hover:bg-gray-600'
+            } text-white`}
+            onClick={() => onUpdate({ loop: !content.loop })}
+          >
+            🔁
+          </button>
+
+          <button
+            type="button"
+            className={`w-10 h-10 ml-2 p-2 rounded ${
+              content.playing
+                ? 'bg-yellow-500 hover:bg-yellow-600'
+                : 'bg-green-500 hover:bg-green-600'
+            } text-white`}
+            onClick={() => onUpdate({ playing: !content.playing })}
+          >
+            {content.playing ? '⏸️' : '▶️'}
+          </button>
+        </div>
         <PositionControls
           id={content.id}
           position={content.position}
           onUpdate={onUpdate}
         />
         <SizeControls id={content.id} size={content.size} onUpdate={onUpdate} />
 
-        <label
-          htmlFor={`${content.id}-video-upload`}
-          className="file-upload-label"
-        >
-          Upload Video:
-          <input
-            id={`${content.id}-video-upload`}
-            type="file"
-            accept="video/*"
-            onChange={handleFileChange}
-            className="file-input"
-          />
-        </label>
+        <div className="mt-1 flex items-center">
+          <label
+            htmlFor={`${content.id}-video-upload`}
+            className="block text-sm font-medium text-gray-700 mt-4"
+          >
+            Upload Video:
+            <input
+              id={`${content.id}-video-upload`}
+              type="file"
+              accept="video/*"
+              onChange={handleFileChange}
+              className="file-input bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2"
+            />
+          </label>
+        </div>
 
         {previewUrl && (
           // eslint-disable-next-line jsx-a11y/media-has-caption
@@ -56,38 +83,32 @@ function VideoController({ content, onUpdate }: ControllerProps<VideoContent>) {
             controls
           />
         )}
-
-        <label htmlFor={`${content.id}-autoplay`}>
-          Autoplay:
-          <input
-            id={`${content.id}-autoplay`}
-            type="checkbox"
-            checked={content.autoplay}
-            onChange={(e) => onUpdate({ autoplay: e.target.checked })}
-          />
-        </label>
-
-        <label htmlFor={`${content.id}-loop`}>
-          Loop:
-          <input
-            id={`${content.id}-loop`}
-            type="checkbox"
-            checked={content.loop}
-            onChange={(e) => onUpdate({ loop: e.target.checked })}
-          />
-        </label>
       </div>
     </div>
   );
 }
 
 function VideoRenderer({ content }: RendererProps<VideoContent>) {
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+
+  React.useEffect(() => {
+    if (videoRef.current) {
+      if (content.playing) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+      }
+    }
+  }, [content.playing]);
+
   return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     <video
+      ref={videoRef}
       src={content.fileUrl}
       autoPlay={content.autoplay}
       loop={content.loop}
+      controls={false}
       style={{
         position: 'absolute',
         top: content.position.top,

diff --git a/src/contents/types.ts b/src/contents/types.ts
@@ -21,6 +21,7 @@ export interface ImageContent extends BaseContent {
 export interface VideoContent extends BaseContent {
   type: 'video';
   fileUrl: string;
+  playing: boolean;
   autoplay?: boolean;
   loop?: boolean;
 }