refactor, simpler, cleanup

Author: shashankitsoft

src/components/VideoModal.css

@@ -13,7 +13,6 @@
   margin-bottom: 16px;
 }
 .close-btn {
-  margin-top: 16px;
   min-width: 100px;
 }
 .yt-controls-hint {
@@ -30,13 +29,22 @@
 }
 .yt-btn {
   --background: #ff0000;
+  --background-hover: #e60000;
+  --background-activated: #cc0000;
   --color: #fff;
   font-weight: 500;
   display: flex;
   align-items: center;
   font-size: 1rem;
   padding: 0 18px;
   min-width: 120px;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  transition: background 0.2s;
+}
+.yt-btn:focus,
+.yt-btn:hover {
+  --background: #e60000;
 }
 .yt-btn .yt-icon {
   width: 1.2em;

src/components/VideoModal.tsx

@@ -37,9 +37,8 @@ const VideoModal: React.FC<VideoModalProps> = ({ isOpen, onDidDismiss, selectedV
           <IonButton
             onClick={() => selectedVideo && openInYouTube(selectedVideo.videoId)}
             className="yt-btn"
-            color="medium"
           >
-            <IonIcon icon={logoYoutube} className="yt-icon" slot="start" />
+            <IonIcon icon={logoYoutube}  className="yt-icon" slot="start" />
             Play in YouTube
           </IonButton>
           <IonButton onClick={onDidDismiss} className="close-btn">Close</IonButton>

src/pages/Videos.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import {
   IonContent,
   IonHeader,
@@ -12,7 +12,6 @@ import VideoModal from "../components/VideoModal";
 import "../components/VideoThumbnailCard.css";
 import "../components/VideoModal.css";
 import { REMOTE_BASE_URL } from "../constants";
-import { createYouTubePlayer, destroyYouTubePlayer } from "../utils/ytPlayer";
 
 const Videos: React.FC = () => {
   const [videos, setVideos] = useState<VideoEntry[]>([]);
@@ -21,8 +20,6 @@ const Videos: React.FC = () => {
     videoId: string;
     title: string;
   } | null>(null);
-  const playerRef = useRef<any>(null);
-  const playerContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     fetch(`${REMOTE_BASE_URL}youtube-data.json`)
@@ -41,19 +38,6 @@ const Videos: React.FC = () => {
       }, new Map<string, VideoEntry[]>())
   );
 
-  // Handle modal open/close and YouTube Player API (same as News)
-  useEffect(() => {
-    if (!modalOpen || !selectedVideo) return;
-    const container = playerContainerRef.current;
-    playerRef.current = container && selectedVideo.videoId
-      ? createYouTubePlayer(container, selectedVideo.videoId)
-      : null;
-    return () => {
-      destroyYouTubePlayer(playerRef.current, container!);
-      playerRef.current = null;
-    };
-  }, [modalOpen, selectedVideo]);
-
   // Keyboard navigation: Enter/OK to open, Escape to close
   const handleCardKeyDown = (
     e: React.KeyboardEvent,

src/utils/youtube.ts

@@ -4,7 +4,6 @@
  * Loads the YouTube IFrame API script and calls the callback when ready.
  * Ensures the script is loaded only once.
  */
-
 declare global {
   interface Window {
     onYouTubeIframeAPIReady?: () => void;
@@ -49,3 +48,36 @@ export function openInYouTube(videoId: string) {
     window.open(`https://www.youtube.com/watch?v=${videoId}`, "_blank");
   }
 }
+
+/**
+ * (Legacy) Create and destroy YouTube IFrame Player in a container. Not used with iframe modal, but kept for reference.
+ */
+export function createYouTubePlayer(
+  container: HTMLElement,
+  videoId: string,
+  onReady?: () => void
+) {
+  if (!container || !videoId) return null;
+  container.innerHTML = "";
+  function tryCreate() {
+    // @ts-ignore
+    if (window.YT && window.YT.Player) {
+      // @ts-ignore
+      const player = new window.YT.Player(container, {
+        height: "360",
+        width: "640",
+        videoId,
+        playerVars: { autoplay: 1 },
+        events: onReady ? { onReady } : undefined,
+      });
+      return player;
+    } else {
+      setTimeout(tryCreate, 100);
+    }
+  }
+  return tryCreate();
+}
+export function destroyYouTubePlayer(player: any, container?: HTMLElement) {
+  if (player && typeof player.destroy === "function") player.destroy();
+  if (container) container.innerHTML = "";
+}