plyr video

src/components/PlyrAudio/index.tsx

@@ -1,104 +1,8 @@
 import React, { useState, useEffect } from "react";
 import Plyr from "plyr-react";
 import "plyr-react/plyr.css";
-import styled, { useTheme } from "styled-components";
-
-const StyledPlyr = styled.div`
-  .plyr--audio .plyr__controls {
-    gap: 5px;
-    background: transparent;
-  }
-
-  .plyr--audio .plyr__control:hover,
-  .plyr__control:focus-visible,
-  .plyr--audio .plyr__control[aria-expanded="true"] {
-    background: #eeeeee;
-    opacity: 0.9;
-    svg {
-      fill: ${(props) => props.theme.brandColor} !important;
-    }
-
-    * {
-      color: #333333;
-    }
-
-    .dark & {
-      background: #333333;
-
-      svg {
-        fill: #f1f1f1 !important;
-      }
-    }
-  }
-
-  .plyr__control:focus-visible {
-    outline: 2px dashed ${(props) => props.theme.brandColor};
-  }
-  .plyr__control svg {
-    fill: ${(props) => props.theme.brandColor};
-  }
-
-  .plyr--audio .plyr__control {
-    border-radius: 6px;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      width: 16px;
-    }
-  }
-  .plyr--audio .plyr__control[data-plyr="play"] {
-    border-radius: 6px;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #eeeeee;
-
-    .dark & {
-      border: 1px solid #333333;
-    }
-    svg {
-      width: 16px;
-    }
-  }
-
-  .plyr__control svg {
-    .dark & {
-      fill: #f1f1f1;
-    }
-  }
-
-  .plyr__time {
-    .dark & {
-      color: #ffffff;
-    }
-  }
-
-  .plyr__control:hover svg {
-    fill: ${(props) => props.theme.brandColor};
-  }
-
-  .plyr--audio .plyr__control[aria-expanded="true"] svg {
-    fill: ${(props) => props.theme.brandColor};
-  }
-
-  .plyr__control:focus-visible svg {
-    fill: ${(props) => props.theme.brandColor};
-  }
-
-  .plyr--full-ui input[type="range"] {
-    color: ${(props) => props.theme.brandColor};
-  }
-
-  @media (max-width: 767px) {
-    .plyr__time + .plyr__time {
-      display: block;
-    }
-  }
-`;
+import { useTheme } from "styled-components";
+import { StyledPlyr } from "../ui/plyr";
 
 export const PlyrAudioPlayer = ({ audioURL, content, isPreview = false }) => {
   const theme = useTheme();

src/components/PlyrVideo/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import Plyr from "plyr-react";
+import "plyr-react/plyr.css";
+import styled, { useTheme } from "styled-components";
+import { StyledPlyr } from "../ui/plyr";
+
+export const PlyrYoutubePlayer = () => {
+  const theme = useTheme();
+
+  let controls = [
+    "play",
+    "restart",
+    "progress",
+    "current-time",
+    "duration",
+    "settings",
+  ];
+
+  return (
+    <Plyr
+      source={{
+        type: "video",
+        sources: [{ src: "WzjvJd7dqB4", provider: "youtube" }],
+      }}
+      options={{
+        controls,
+        settings: ["speed"],
+        speed: { selected: 1, options: [0.7, 1, 1.25, 1.5, 2] },
+      }}
+    />
+  );
+};

src/components/RightSidebar/index.tsx

@@ -17,27 +17,12 @@ import { EditorContext } from "@/contexts/EditorContext";
 import * as marked from "marked";
 import { alignMap } from "../DocumentEditor/helpers/toggleBlock";
 
-import {
-  Element as SlateElement,
-  Descendant,
-  Editor,
-  Node,
-  Path,
-  Text,
-  Transforms,
-  Range,
-} from "slate";
-import LoadingSpinner from "@/icons/LoadingSpinner";
-import { extractTextValues } from "../DocumentEditor/helpers/extractText";
-import { root } from "postcss";
-import { Check, ChevronUp, Info, ListEnd, Send } from "lucide-react";
-import { api } from "@/utils/api";
+import { Element as SlateElement, Descendant, Editor, Node, Path } from "slate";
+
 import { useRouter } from "next/router";
-import { ChevronDown, Link, Copy } from "lucide-react";
-import { Input } from "@/components/ui/input";
+
 import { AudioManagerProvider } from "@/contexts/PreviewAudioContext";
 import { Button } from "@/components/ui/button";
-import { debounce } from "lodash";
 import { saveAs } from "file-saver";
 
 import { DocsPreview } from "../PreviewContent/docs";
@@ -46,36 +31,19 @@ import { PublishButton } from "../PublishButton";
 import { useClipboard } from "@/hooks/useClipboard";
 import { MapSettings } from "../MapSettings";
 import { ImageSettings } from "../ImageSettings";
-import { deserialize } from "@/hoc/withPasting";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 
 import { Portal } from "react-portal";
-import { Label } from "../ui/label";
-import { ReactEditor } from "slate-react";
 
-import { getHtmlFromSelection } from "@/utils/htmlSerialiser";
 import { cn } from "@/utils/cn";
-import { UserContext } from "@/contexts/UserContext";
 import { AIAssist } from "../AIAssist";
-import { FontStyle } from "../FontStyle";
-import { Export } from "../Export";
+
 import { LayoutContext } from "../Layouts/AccountLayout";
 import { DownloadButton } from "../DownloadButton";
 import { PlyrAudioPlayer } from "../PlyrAudio";
 import { WorkspaceSetting } from "../WorkspaceSetting";
+
+import { PlyrYoutubePlayer } from "../PlyrVideo";
+import { Link } from "lucide-react";
 interface RightSideBarProps {
   setRightSideBarWidth: any;
   showRightSidebar: boolean;

src/components/ui/plyr.tsx

@@ -0,0 +1,98 @@
+import styled from "styled-components";
+
+export const StyledPlyr = styled.div`
+  .plyr--audio .plyr__controls {
+    gap: 5px;
+    background: transparent;
+  }
+
+  .plyr--audio .plyr__control:hover,
+  .plyr__control:focus-visible,
+  .plyr--audio .plyr__control[aria-expanded="true"] {
+    background: #eeeeee;
+    opacity: 0.9;
+    svg {
+      fill: ${(props) => props.theme.brandColor} !important;
+    }
+
+    * {
+      color: #333333;
+    }
+
+    .dark & {
+      background: #333333;
+
+      svg {
+        fill: #f1f1f1 !important;
+      }
+    }
+  }
+
+  .plyr__control:focus-visible {
+    outline: 2px dashed ${(props) => props.theme.brandColor};
+  }
+  .plyr__control svg {
+    fill: ${(props) => props.theme.brandColor};
+  }
+
+  .plyr--audio .plyr__control {
+    border-radius: 6px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      width: 16px;
+    }
+  }
+  .plyr--audio .plyr__control[data-plyr="play"] {
+    border-radius: 6px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #eeeeee;
+
+    .dark & {
+      border: 1px solid #333333;
+    }
+    svg {
+      width: 16px;
+    }
+  }
+
+  .plyr__control svg {
+    .dark & {
+      fill: #f1f1f1;
+    }
+  }
+
+  .plyr__time {
+    .dark & {
+      color: #ffffff;
+    }
+  }
+
+  .plyr__control:hover svg {
+    fill: ${(props) => props.theme.brandColor};
+  }
+
+  .plyr--audio .plyr__control[aria-expanded="true"] svg {
+    fill: ${(props) => props.theme.brandColor};
+  }
+
+  .plyr__control:focus-visible svg {
+    fill: ${(props) => props.theme.brandColor};
+  }
+
+  .plyr--full-ui input[type="range"] {
+    color: ${(props) => props.theme.brandColor};
+  }
+
+  @media (max-width: 767px) {
+    .plyr__time + .plyr__time {
+      display: block;
+    }
+  }
+`;