💄Restored styling on livestream widget to former state

SSWConsulting · Sep 17, 2024 · 4885d2c · 4885d2c
1 parent 69d8bbd
commit 4885d2c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/app/live-steam-banner/liveStreamWidget.tsx b/app/live-steam-banner/liveStreamWidget.tsx
@@ -128,6 +128,9 @@ export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {
                 <VideoEmbed
                   data={{
                     url: youtubeUrls?.videoUrl,
+                    videoWidth: "w-full",
+                    removeMargin: true,
+                    roundedEdges: false,
                   }}
                 />
               </div>
@@ -144,6 +147,9 @@ export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {
             <VideoEmbed
               data={{
                 url: youtubeUrls?.videoUrl,
+                videoWidth: "w-full",
+                removeMargin: true,
+                roundedEdges: false,
               }}
             />
           </div>

diff --git a/components/blocks/videoEmbed.tsx b/components/blocks/videoEmbed.tsx
@@ -5,6 +5,7 @@ import { VideoModal } from "../videoModal";
 type VideoEmbedProps = {
   data: {
     url: string;
+    roundedEdges?: boolean;
     videoWidth?: string;
     removeMargin?: boolean;
     overflow?: boolean;
@@ -26,6 +27,7 @@ export const VideoEmbed = ({ data }: VideoEmbedProps) => {
       <VideoModal
         url={data.url}
         overflow={data.overflow}
+        roundedEdges={data.roundedEdges}
         className="cursor-pointer"
       />
       {data.caption && (

diff --git a/components/liveStream/liveStreamWidget.tsx b/components/liveStream/liveStreamWidget.tsx
@@ -130,6 +130,9 @@ export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {
                 <VideoEmbed
                   data={{
                     url: youtubeUrls.videoUrl,
+                    videoWidth: "w-full",
+                    removeMargin: true,
+                    roundedEdges: false,
                   }}
                 />
               </div>
@@ -146,6 +149,9 @@ export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {
             <VideoEmbed
               data={{
                 url: youtubeUrls.videoUrl,
+                videoWidth: "w-full",
+                removeMargin: true,
+                roundedEdges: false,
               }}
             />
           </div>

diff --git a/components/videoModal.tsx b/components/videoModal.tsx
@@ -29,6 +29,7 @@ const VimeoEmbed = dynamic(
 type VideoModalProps = {
   children?: React.ReactNode;
   className?: string;
+  roundedEdges?: boolean;
   url: string;
   overflow?: boolean;
 };
@@ -43,12 +44,12 @@ export const VideoModal = ({
   children = null,
   url,
   overflow,
+  roundedEdges,
   className,
 }: VideoModalProps) => {
   const [videoId, setVideoId] = useState<string>();
   const [clicked, setClicked] = useState<boolean>(false);
   const [imageSrc, setImageSrc] = useState<string>("");
-
   const isYouTube = MATCH_URL_YOUTUBE.test(url);
   const isVimeo = MATCH_URL_VIMEO.test(url);
 
@@ -72,7 +73,12 @@ export const VideoModal = ({
   return (
     <div
       className={classNames(
-        "h-full rounded",
+        "h-full",
+        roundedEdges === null ||
+          roundedEdges === undefined ||
+          roundedEdges === true
+          ? "rounded"
+          : "rounded-none",
         overflow ? "clear-both" : "overflow-hidden",
         className
       )}