fixed sub issues

src/components/VideoPlayer/SubtitleManager.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   QortalGetMetadata,
   QortalMetadata,
@@ -10,6 +16,7 @@ import {
   Button,
   ButtonBase,
   Card,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
@@ -18,9 +25,11 @@ import {
   Fade,
   IconButton,
   Popover,
+  Skeleton,
   Tab,
   Tabs,
   Typography,
+  useTheme,
 } from "@mui/material";
 import CheckIcon from "@mui/icons-material/Check";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
@@ -43,6 +52,12 @@ import { ResourceToPublish } from "../../types/qortalRequests/types";
 import { useListReturn } from "../../hooks/useListData";
 import { usePublish } from "../../hooks/usePublish";
 import { Spacer } from "../../common/Spacer";
+import {
+  dismissToast,
+  showError,
+  showLoading,
+  showSuccess,
+} from "../../utils/toast";
 interface SubtitleManagerProps {
   qortalMetadata: QortalGetMetadata;
   close: () => void;
@@ -90,28 +105,36 @@ const SubtitleManagerComponent = ({
   const [mode, setMode] = useState(1);
   const [isOpenPublish, setIsOpenPublish] = useState(false);
   const { lists, identifierOperations, auth } = useGlobal();
+  const [isLoading, setIsLoading] = useState(false);
+  const [showAll, setShowAll] = useState(false);
   const { fetchResources } = useResources();
   // const [subtitles, setSubtitles] = useState([])
   const subtitles = useListReturn(
     `subs-${qortalMetadata?.service}-${qortalMetadata?.name}-${qortalMetadata?.identifier}`
   );
-  console.log('subtitles222', subtitles)
+  console.log("subtitles222", subtitles);
-  const mySubtitles = useMemo(()=> {
+  const mySubtitles = useMemo(() => {
-    if(!auth?.name)return []
+    if (!auth?.name) return [];
-    return subtitles?.filter((sub)=> sub.name === auth?.name)
+    return subtitles?.filter((sub) => sub.name === auth?.name);
-  }, [subtitles, auth?.name])
+  }, [subtitles, auth?.name]);
   console.log("subtitles222", subtitles);
   const getPublishedSubtitles = useCallback(async () => {
     try {
+      setIsLoading(true);
       const videoId = `${qortalMetadata?.service}-${qortalMetadata?.name}-${qortalMetadata?.identifier}`;
       console.log("videoId", videoId);
       const postIdSearch = await identifierOperations.buildSearchPrefix(
         ENTITY_SUBTITLE,
         videoId
       );
+      let name: string | undefined = qortalMetadata?.name;
+      if (showAll) {
+        name = undefined;
+      }
       const searchParams = {
         service: SERVICE_SUBTITLE,
         identifier: postIdSearch,
+        name,
         limit: 0,
       };
       const res = await lists.fetchResources(
@@ -123,8 +146,10 @@ const SubtitleManagerComponent = ({
       console.log("resres2", res);
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsLoading(false);
     }
-  }, []);
+  }, [showAll]);
 
   useEffect(() => {
     if (
@@ -215,6 +240,8 @@ const SubtitleManagerComponent = ({
     close();
   };
 
+  const theme = useTheme();
+
   return (
     <>
       <Popover
@@ -236,7 +263,11 @@ const SubtitleManagerComponent = ({
               borderRadius: 2,
               boxShadow: 5,
               p: 1,
-              minWidth: 200,
+              minWidth: 225,
+              height: 300,
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column",
             },
           },
         }}
@@ -288,16 +319,75 @@ const SubtitleManagerComponent = ({
           </ButtonBase>
         </Box>
         <Divider />
-        {mode === 1 && (
+        <Box
-          <PublisherSubtitles
+          sx={{
-            subtitles={subtitles}
+            display: "flex",
-            publisherName={qortalMetadata.name}
+            flexDirection: "column",
-            setMode={setMode}
+            flexGrow: 1,
-            onSelect={onSelectHandler}
+            overflow: "auto",
-            onBack={onBack}
+            "::-webkit-scrollbar-track": {
-            currentSubTrack={currentSubTrack}
+              backgroundColor: "transparent",
-          />
+            },
-        )}
+
+            "::-webkit-scrollbar": {
+              width: "16px",
+              height: "10px",
+            },
+
+            "::-webkit-scrollbar-thumb": {
+              backgroundColor: theme.palette.primary.main,
+              borderRadius: "8px",
+              backgroundClip: "content-box",
+              border: "4px solid transparent",
+              transition: "0.3s background-color",
+            },
+
+            "::-webkit-scrollbar-thumb:hover": {
+              backgroundColor: theme.palette.primary.dark,
+            },
+          }}
+        >
+          {isLoading && <CircularProgress />}
+          {!isLoading && subtitles?.length === 0 && (
+            <Typography
+              sx={{
+                fontSize: "1rem",
+                width: "100%",
+                textAlign: "center",
+                marginTop: "20px",
+              }}
+            >
+              No subtitles
+            </Typography>
+          )}
+
+          {mode === 1 && !isLoading && subtitles?.length > 0 && (
+            <PublisherSubtitles
+              subtitles={subtitles}
+              publisherName={qortalMetadata.name}
+              setMode={setMode}
+              onSelect={onSelectHandler}
+              onBack={onBack}
+              currentSubTrack={currentSubTrack}
+            />
+          )}
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            justifyContent: "center",
+          }}
+        >
+          <Button
+            variant="contained"
+            size="small"
+            disabled={showAll}
+            onClick={() => setShowAll(true)}
+          >
+            Load all
+          </Button>
+        </Box>
         {/* <Box>
           {[
             'Ambient mode',
@@ -414,6 +504,23 @@ const PublisherSubtitles = ({
 }: PublisherSubtitlesProps) => {
   return (
     <>
+      <ButtonBase
+        disabled={!currentSubTrack}
+        onClick={() => onSelect(null)}
+        sx={{
+          px: 2,
+          py: 1,
+          "&:hover": {
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+          },
+          width: "100%",
+          justifyContent: "space-between",
+        }}
+      >
+        <Typography>Off</Typography>
+        {!currentSubTrack ? <CheckIcon /> : <ArrowForwardIosIcon />}
+      </ButtonBase>
+
       {subtitles?.map((sub) => {
         return (
           <Subtitle
@@ -429,21 +536,23 @@ const PublisherSubtitles = ({
 };
 
 interface PublishSubtitlesProps {
-  publishHandler: (subs: Subtitle[]) => void;
+  publishHandler: (subs: Subtitle[]) => Promise<void>;
   isOpen: boolean;
   setIsOpen: (val: boolean) => void;
-  mySubtitles: QortalGetMetadata[]
+  mySubtitles: QortalGetMetadata[];
 }
 
 const PublishSubtitles = ({
   publishHandler,
   isOpen,
   setIsOpen,
-  mySubtitles
+  mySubtitles,
 }: PublishSubtitlesProps) => {
   const [language, setLanguage] = useState<null | string>(null);
   const [subtitles, setSubtitles] = useState<Subtitle[]>([]);
-  const {lists} = useGlobal()
+  const [isPublishing, setIsPublishing] = useState(false);
+  const { lists } = useGlobal();
+  const theme = useTheme();
   const onDrop = useCallback(async (acceptedFiles: File[]) => {
     const newSubtitles: Subtitle[] = [];
     for (const file of acceptedFiles) {
@@ -495,6 +604,7 @@ const PublishSubtitles = ({
 
   const handleClose = () => {
     setIsOpen(false);
+    setSubtitles([]);
   };
 
   const [value, setValue] = useState(0);
@@ -503,15 +613,39 @@ const PublishSubtitles = ({
     setValue(newValue);
   };
 
-  const onDelete = useCallback(async (sub: QortalGetMetadata)=> {
+  const onDelete = useCallback(async (sub: QortalGetMetadata) => {
+    let loadId;
     try {
-      await lists.deleteResource([
+      setIsPublishing(true);
-        sub
+      loadId = showLoading("Deleting subtitle...");
-      ])
+      await lists.deleteResource([sub]);
+      showSuccess("Deleted subtitle");
     } catch (error) {
-      
+      showError(error instanceof Error ? error.message : "Unable to delete");
+    } finally {
+      setIsPublishing(false);
+      dismissToast(loadId);
     }
-  },[])
+  }, []);
+
+  const publishHandlerLocal = async (subtitles: Subtitle[]) => {
+    let loadId;
+    try {
+      setIsPublishing(true);
+      loadId = showLoading("Publishing subtitles...");
+      await publishHandler(subtitles);
+      showSuccess("Subtitles published");
+      setSubtitles([]);
+    } catch (error) {
+      showError(error instanceof Error ? error.message : "Unable to publish");
+    } finally {
+      dismissToast(loadId);
+      setIsPublishing(false);
+    }
+  };
+
+  const disableButton =
+    !!subtitles.find((sub) => !sub?.language) || isPublishing;
 
   return (
     <Dialog
@@ -524,6 +658,10 @@ const PublishSubtitles = ({
       slotProps={{
         paper: {
           elevation: 0,
+          sx: {
+            height: "600px",
+            maxHeight: "100vh",
+          },
         },
       }}
     >
@@ -539,7 +677,26 @@ const PublishSubtitles = ({
       >
         <CloseIcon />
       </IconButton>
-      <DialogContent>
+      <DialogContent
+        sx={{
+          "::-webkit-scrollbar": {
+            width: "16px",
+            height: "10px",
+          },
+
+          "::-webkit-scrollbar-thumb": {
+            backgroundColor: theme.palette.primary.main,
+            borderRadius: "8px",
+            backgroundClip: "content-box",
+            border: "4px solid transparent",
+            transition: "0.3s background-color",
+          },
+
+          "::-webkit-scrollbar-thumb:hover": {
+            backgroundColor: theme.palette.primary.dark,
+          },
+        }}
+      >
         <Box sx={{ width: "100%" }}>
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
             <Tabs
@@ -554,113 +711,114 @@ const PublishSubtitles = ({
         </Box>
         <Spacer height="25px" />
         {value === 0 && (
-                <Box
+          <Box
-          sx={{
+            sx={{
-            display: "flex",
+              display: "flex",
-            flexDirection: "column",
+              flexDirection: "column",
-            gap: "20px",
+              gap: "20px",
-            width: "100%",
+              width: "100%",
-            alignItems: "center",
+              alignItems: "center",
-          }}
+            }}
-        >
+          >
-          <Box {...getRootProps()}>
+            <Box {...getRootProps()}>
-            <Button
+              <Button
-              sx={{
-                display: "flex",
-                gap: "10px",
-              }}
-              variant="contained"
-            >
-              <input {...getInputProps()} />
-              Import subtitles
-            </Button>
-          </Box>
-          {subtitles?.map((sub, i) => {
-            return (
-              <Card
                 sx={{
-                  padding: "10px",
+                  display: "flex",
-                  width: "500px",
+                  gap: "10px",
-                  maxWidth: "100%",
                 }}
+                variant="contained"
               >
-                <Typography
+                <input {...getInputProps()} />
+                Import subtitles
+              </Button>
+            </Box>
+            {subtitles?.map((sub, i) => {
+              return (
+                <Card
                   sx={{
-                    fontSize: "1rem",
+                    padding: "10px",
+                    width: "500px",
+                    maxWidth: "100%",
                   }}
                 >
-                  {sub.filename}
+                  <Typography
-                </Typography>
+                    sx={{
-                <Spacer height="10px" />
+                      fontSize: "1rem",
-                <LanguageSelect
-                  value={sub.language}
-                  onChange={(val: string | null) =>
-                    onChangeValue("language", val, i)
-                  }
-                />
-                <Spacer height="10px" />
-                <Box
-                  sx={{
-                    justifyContent: "flex-end",
-                    width: "100%",
-                    display: "flex",
-                  }}
-                >
-                  <Button
-                    onClick={() => {
-                      setSubtitles((prev) => {
-                        const newSubtitles = [...prev];
-                        newSubtitles.splice(i, 1); // Remove 1 item at index i
-                        return newSubtitles;
-                      });
                     }}
-                    variant="contained"
-                    size="small"
-                    color="secondary"
                   >
-                    remove
+                    {sub.filename}
-                  </Button>
+                  </Typography>
-                </Box>
+                  <Spacer height="10px" />
-              </Card>
+                  <LanguageSelect
-            );
+                    value={sub.language}
-          })}
+                    onChange={(val: string | null) =>
-        </Box>
+                      onChangeValue("language", val, i)
+                    }
+                  />
+                  <Spacer height="10px" />
+                  <Box
+                    sx={{
+                      justifyContent: "flex-end",
+                      width: "100%",
+                      display: "flex",
+                    }}
+                  >
+                    <Button
+                      onClick={() => {
+                        setSubtitles((prev) => {
+                          const newSubtitles = [...prev];
+                          newSubtitles.splice(i, 1); // Remove 1 item at index i
+                          return newSubtitles;
+                        });
+                      }}
+                      variant="contained"
+                      size="small"
+                      color="secondary"
+                    >
+                      remove
+                    </Button>
+                  </Box>
+                </Card>
+              );
+            })}
+          </Box>
         )}
         {value === 1 && (
-                <Box
+          <Box
-          sx={{
+            sx={{
-            display: "flex",
+              display: "flex",
-            flexDirection: "column",
+              flexDirection: "column",
-            gap: "20px",
+              gap: "20px",
-            width: "100%",
+              width: "100%",
-            alignItems: "center",
+              alignItems: "center",
-          }}
+            }}
-        >
+          >
-         
+            {mySubtitles?.map((sub, i) => {
-          {mySubtitles?.map((sub, i) => {
+              return (
-            return (
+                <Card
-              <Card
+                  sx={{
-                sx={{
+                    padding: "10px",
-                  padding: "10px",
+                    width: "500px",
-                  width: "500px",
+                    maxWidth: "100%",
-                  maxWidth: "100%",
+                  }}
-                }}
+                >
-              >
+                  <MySubtitle onDelete={onDelete} sub={sub} />
-                <MySubtitle onDelete={onDelete}  sub={sub} />
+                </Card>
-              </Card>
+              );
-            );
+            })}
-          })}
+          </Box>
-        </Box>
         )}
       </DialogContent>
       <DialogActions>
-        <Button
+        {value === 0 && (
-          onClick={() => publishHandler(subtitles)}
+          <Button
-          // disabled={disableButton}
+            onClick={() => publishHandlerLocal(subtitles)}
-          variant="contained"
+            disabled={disableButton}
-        >
+            variant="contained"
-          Publish
+          >
-        </Button>
+            Publish
+          </Button>
+        )}
       </DialogActions>
     </Dialog>
   );
@@ -672,7 +830,7 @@ interface SubProps {
   currentSubtrack: null | string;
 }
 const Subtitle = ({ sub, onSelect, currentSubtrack }: SubProps) => {
-  const { resource, isLoading } = usePublish(2, "JSON", sub);
+  const { resource, isLoading, error } = usePublish(2, "JSON", sub);
   console.log("resource", resource);
   const isSelected = currentSubtrack === resource?.data?.language;
   return (
@@ -688,8 +846,13 @@ const Subtitle = ({ sub, onSelect, currentSubtrack }: SubProps) => {
         justifyContent: "space-between",
       }}
     >
-      <Typography>{resource?.data?.language}</Typography>
+      {isLoading && <Skeleton variant="text" sx={{ fontSize: "1.25rem", width: '100%' }} />}
-      {isSelected ? <CheckIcon /> : <ArrowForwardIosIcon />}
+      {!isLoading && !error && (
+        <>
+          <Typography>{resource?.data?.language}</Typography>
+          {isSelected ? <CheckIcon /> : <ArrowForwardIosIcon />}
+        </>
+      )}
     </ButtonBase>
   );
 };
@@ -699,46 +862,49 @@ interface MySubtitleProps {
   onDelete: (subtitle: QortalGetMetadata) => void;
 }
 const MySubtitle = ({ sub, onDelete }: MySubtitleProps) => {
-  const { resource, isLoading } = usePublish(2, "JSON", sub);
+  const { resource, isLoading, error } = usePublish(2, "JSON", sub);
   console.log("resource", resource);
   return (
-       <Card
+    <Card
-                sx={{
+      sx={{
-                  padding: "10px",
+        padding: "10px",
-                  width: "500px",
+        width: "500px",
-                  maxWidth: "100%",
+        maxWidth: "100%",
-                }}
+      }}
-              >
+    >
-                <Typography
+      <Typography
-                  sx={{
+        sx={{
-                    fontSize: "1rem",
+          fontSize: "1rem",
-                  }}
+        }}
-                >
+      >
-                  {resource?.data?.filename}
+        {resource?.data?.filename}
-                </Typography>
+      </Typography>
-                <Spacer height="10px" />
+      <Spacer height="10px" />
-                  <Typography sx={{
+      <Typography
-                    fontSize: '1rem'
+        sx={{
-                  }}>{resource?.data?.language}</Typography>
+          fontSize: "1rem",
-                <Spacer height="10px" />
+        }}
-                <Box
+      >
-                  sx={{
+        {resource?.data?.language}
-                    justifyContent: "flex-end",
+      </Typography>
-                    width: "100%",
+      <Spacer height="10px" />
-                    display: "flex",
+      <Box
-                  }}
+        sx={{
-                >
+          justifyContent: "flex-end",
-                  <Button
+          width: "100%",
-                   onClick={() => onDelete(sub)}
+          display: "flex",
-                    variant="contained"
+        }}
-                    size="small"
+      >
-                    color="secondary"
+        <Button
-                  >
+          onClick={() => onDelete(sub)}
-                    delete
+          variant="contained"
-                  </Button>
+          size="small"
-                </Box>
+          color="secondary"
-              </Card>
+        >
-
+          delete
+        </Button>
+      </Box>
+    </Card>
   );
 };
 

src/components/VideoPlayer/VideoControlsBar.tsx

@@ -13,7 +13,7 @@ import {
   VolumeControl,
 } from "./VideoControls";
 import { Ref } from "react";
-
+import SubtitlesIcon from '@mui/icons-material/Subtitles';
 interface VideoControlsBarProps {
   canPlay: boolean
   isScreenSmall: boolean
@@ -99,7 +99,7 @@ export const VideoControlsBar = ({subtitleBtnRef, showControls, playbackRate, in
             <PlaybackRate playbackRate={playbackRate} increaseSpeed={increaseSpeed} decreaseSpeed={decreaseSpeed} />
             <ObjectFitButton />
             <IconButton ref={subtitleBtnRef} onClick={openSubtitleManager}>
-              sub
+              <SubtitlesIcon />
             </IconButton>
             <PictureInPictureButton />
             <FullscreenButton toggleFullscreen={toggleFullscreen} />

src/components/VideoPlayer/VideoPlayer-styles.ts

@@ -23,14 +23,23 @@ export const VideoElement = styled("video")(({ theme }) => ({
   right: 0,
   left: 0,
   background: "rgb(33, 33, 33)",
-  "&:focus": { outline: "none" },
+
+  "&:focus": {
+    outline: "none !important",
+    boxShadow: "none !important",
+  },
+  "&:focus-visible": {
+    outline: "none !important",
+    boxShadow: "none !important",
+  },
   "&::-webkit-media-controls": {
-  display:"none !important"
+    display: "none !important",
-},
+  },
-"&:fullscreen": {
+  "&:fullscreen": {
-  paddingBottom: '50px'
+    paddingBottom: '50px',
-}
+  },
 }));
+
 //1075 x 604
 export const ControlsContainer = styled(Box)`
   width: 100%;

src/components/VideoPlayer/VideoPlayer.tsx

@@ -591,6 +591,8 @@ export const VideoPlayer = ({
         if (!playerRef.current && ref.current) {
           playerRef.current = videojs(ref.current, options, () => {
             setIsPlayerInitialized(true);
+            ref.current.tabIndex = -1; // Prevents focus entirely
+    ref.current.style.outline = 'none'; // Backup
             playerRef.current?.poster("");
             playerRef.current?.playbackRate(playbackRate);
             playerRef.current?.volume(volume);
@@ -701,7 +703,7 @@ export const VideoPlayer = ({
         />
         <VideoElement
           ref={videoRef}
-          tabIndex={0}
+          tabIndex={-1}
           className="video-js"
           src={isReady && startPlay ? resourceUrl || undefined : undefined}
           poster={startPlay ? "" : poster}

src/index.css

@@ -6,3 +6,14 @@
   box-sizing: border-box;
 }
 
+video:focus,
+video:focus-visible,
+.vjs-tech:focus,
+.vjs-tech:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.video-js *:focus:not(:focus-visible) {
+  outline: none !important;
+}