feat: stats in sidebar

GetStream · Dec 18, 2023 · e583c4a · e583c4a
1 parent 9d2b251
commit e583c4a
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 68 deletions.
diff --git a/packages/react-sdk/src/components/CallStats/CallStatsLatencyChart.tsx b/packages/react-sdk/src/components/CallStats/CallStatsLatencyChart.tsx
@@ -41,12 +41,20 @@ export const CallStatsLatencyChart = (props: {
       animation: {
         duration: 0,
       },
+      elements: {
+        line: {
+          borderWidth: 1,
+        },
+        point: {
+          radius: 2,
+        },
+      },
       scales: {
         y: {
           position: 'right',
           stacked: true,
           min: 0,
-          max: Math.max(210, Math.ceil((max + 10) / 10) * 10),
+          max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
           grid: {
             display: true,
             color: '#979ca0',

diff --git a/packages/styling/src/CallStats.scss b/packages/styling/src/CallStats.scss
@@ -1,8 +1,6 @@
 .str-video__call-stats {
   border-radius: var(--str-video__border-radius-lg);
-
   background-color: var(--str-video__base-color7);
-  border-radius: var(--str-video__border-radius-lg);
   padding: var(--str-video__spacing-md);
   width: 100%;
   display: flex;
@@ -92,7 +90,7 @@
   .str-video__call-stats-line-chart-container {
     position: relative;
     margin: auto;
-    height: 250px;
+    height: 170px;
     width: 100%;
   }
 

diff --git a/packages/styling/src/_global-theme-variables.scss b/packages/styling/src/_global-theme-variables.scss
@@ -141,7 +141,7 @@
   --str-video__icon--download: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik01MTIgNjY2LjUgMzY3LjIgNTIxLjdsMzYuMi0zNi4yIDgzIDgzVjI1Nmg1MS4ydjMxMi41bDgzLTgzIDM2LjIgMzYuMkw1MTIgNjY2LjV6bS0yMDQuOCA1MC4zVjc2OGg0MDkuNnYtNTEuMkgzMDcuMnoiLz48L3N2Zz4K');
   --str-video__icon--developer: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNvZGUiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNNy4yNDkwOSAxMy4yNUwzLjk5OTA5IDEwTDcuMjQ5MDkgNi43NTAwMkM3LjU3NDA5IDYuNDI1MDIgNy41NzQwOSA1LjkwODM1IDcuMjQ5MDkgNS41ODMzNUM2LjkyNDA5IDUuMjU4MzUgNi40MDc0MiA1LjI1ODM1IDYuMDgyNDIgNS41ODMzNUwyLjI1NzQyIDkuNDA4MzVDMS45MzI0MiA5LjczMzM1IDEuOTMyNDIgMTAuMjU4MyAyLjI1NzQyIDEwLjU4MzNMNi4wODI0MiAxNC40MTY3QzYuNDA3NDIgMTQuNzQxNyA2LjkyNDA5IDE0Ljc0MTcgNy4yNDkwOSAxNC40MTY3QzcuNTc0MDkgMTQuMDkxNyA3LjU3NDA5IDEzLjU3NSA3LjI0OTA5IDEzLjI1Wk0xMi43NDkxIDEzLjI1TDE1Ljk5OTEgMTBMMTIuNzQ5MSA2Ljc1MDAyQzEyLjQyNDEgNi40MjUwMiAxMi40MjQxIDUuOTA4MzUgMTIuNzQ5MSA1LjU4MzM1QzEzLjA3NDEgNS4yNTgzNSAxMy41OTA4IDUuMjU4MzUgMTMuOTE1OCA1LjU4MzM1TDE3Ljc0MDggOS40MDgzNUMxOC4wNjU4IDkuNzMzMzUgMTguMDY1OCAxMC4yNTgzIDE3Ljc0MDggMTAuNTgzM0wxMy45MTU4IDE0LjQxNjdDMTMuNTkwOCAxNC43NDE3IDEzLjA3NDEgMTQuNzQxNyAxMi43NDkxIDE0LjQxNjdDMTIuNDI0MSAxNC4wOTE3IDEyLjQyNDEgMTMuNTc1IDEyLjc0OTEgMTMuMjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
   --str-video__icon--ellipsis: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTBDNC45IDEwIDQgMTAuOSA0IDEyQzQgMTMuMSA0LjkgMTQgNiAxNEM3LjEgMTQgOCAxMy4xIDggMTJDOCAxMC45IDcuMSAxMCA2IDEwWk0xOCAxMEMxNi45IDEwIDE2IDEwLjkgMTYgMTJDMTYgMTMuMSAxNi45IDE0IDE4IDE0QzE5LjEgMTQgMjAgMTMuMSAyMCAxMkMyMCAxMC45IDE5LjEgMTAgMTggMTBaTTEyIDEwQzEwLjkgMTAgMTAgMTAuOSAxMCAxMkMxMCAxMy4xIDEwLjkgMTQgMTIgMTRDMTMuMSAxNCAxNCAxMy4xIDE0IDEyQzE0IDEwLjkgMTMuMSAxMCAxMiAxMFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--feedback: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE5Ljk5NDkgMkg0LjAwNDg4QzIuOTA0ODggMiAyLjAwNDg4IDIuOSAyLjAwNDg4IDRWMjJMNS45OTQ4OCAxOEgxOS45OTQ5QzIxLjA5NDkgMTggMjEuOTk0OSAxNy4xIDIxLjk5NDkgMTZWNEMyMS45OTQ5IDIuOSAyMS4wOTQ5IDIgMTkuOTk0OSAyWk0xMi45OTQ5IDE0SDEwLjk5NDlWMTJIMTIuOTk0OVYxNFpNMTIuOTk0OSA5QzEyLjk5NDkgOS41NSAxMi41NDQ5IDEwIDExLjk5NDkgMTBDMTEuNDQ0OSAxMCAxMC45OTQ5IDkuNTUgMTAuOTk0OSA5VjdDMTAuOTk0OSA2LjQ1IDExLjQ0NDkgNiAxMS45OTQ5IDZDMTIuNTQ0OSA2IDEyLjk5NDkgNi40NSAxMi45OTQ5IDdWOVoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--feedback: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjUwMDMgNy4xNjkzNkMxMy41MDAzIDcuNjI3NjkgMTMuODc1MyA4LjAwMjY5IDE0LjMzMzcgOC4wMDI2OUgxNi4wMDAzQzE2LjQ1ODcgOC4wMDI2OSAxNi44MzM3IDcuNjI3NjkgMTYuODMzNyA3LjE2OTM2QzE2LjgzMzcgNi43MTEwMyAxNi40NTg3IDYuMzM2MDMgMTYuMDAwMyA2LjMzNjAzSDE0LjMzMzdDMTMuODc1MyA2LjMzNjAzIDEzLjUwMDMgNi43MTEwMyAxMy41MDAzIDcuMTY5MzZaIiBmaWxsPSIjRTNFNEU1Ii8+CjxwYXRoIGQ9Ik0xMi4zMjUzIDExLjE4NkMxMi4wNTAzIDExLjU1MjcgMTIuMTI1MyAxMi4wNjEgMTIuNDkyIDEyLjMyNzdDMTIuOTMzNyAxMi42NTI3IDEzLjQwMDMgMTMuMDAyNyAxMy44NDIgMTMuMzM2QzE0LjIwODcgMTMuNjExIDE0LjcyNTMgMTMuNTM2IDE0Ljk5MiAxMy4xNjk0QzE0Ljk5MiAxMy4xNjEgMTUuMDAwMyAxMy4xNjEgMTUuMDAwMyAxMy4xNTI3QzE1LjI3NTMgMTIuNzg2IDE1LjIwMDMgMTIuMjY5NCAxNC44MzM3IDEyLjAwMjdDMTQuMzkyIDExLjY2OTQgMTMuOTI1MyAxMS4zMTk0IDEzLjQ5MiAxMC45OTQ0QzEzLjEyNTMgMTAuNzE5NCAxMi42MDg3IDEwLjgwMjcgMTIuMzMzNyAxMS4xNjk0QzEyLjMzMzcgMTEuMTc3NyAxMi4zMjUzIDExLjE4NiAxMi4zMjUzIDExLjE4NloiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTE1LjAwODcgMS4xNzc2OUMxNS4wMDg3IDEuMTY5MzYgMTUuMDAwMyAxLjE2OTM2IDE1LjAwMDMgMS4xNjEwM0MxNC43MjUzIDAuNzk0MzU5IDE0LjIwODcgMC43MTkzNTkgMTMuODUwMyAwLjk5NDM1OUMxMy40MDg3IDEuMzI3NjkgMTIuOTMzNyAxLjY3NzY5IDEyLjUwMDMgMi4wMTEwM0MxMi4xMzM3IDIuMjg2MDMgMTIuMDY3IDIuODAyNjkgMTIuMzQyIDMuMTYxMDNDMTIuMzQyIDMuMTY5MzYgMTIuMzUwMyAzLjE2OTM2IDEyLjM1MDMgMy4xNzc2OUMxMi42MjUzIDMuNTQ0MzYgMTMuMTMzNyAzLjYxOTM2IDEzLjUwMDMgMy4zNDQzNkMxMy45NDIgMy4wMTkzNiAxNC40MDg3IDIuNjYxMDMgMTQuODUwMyAyLjMyNzY5QzE1LjIwODcgMi4wNjEwMyAxNS4yNzUzIDEuNTQ0MzYgMTUuMDA4NyAxLjE3NzY5WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNNS4xNjY5OSA0LjY2OTM2SDEuODMzNjZDMC45MTY5OTIgNC42NjkzNiAwLjE2Njk5MiA1LjQxOTM2IDAuMTY2OTkyIDYuMzM2MDNWOC4wMDI2OUMwLjE2Njk5MiA4LjkxOTM2IDAuOTE2OTkyIDkuNjY5MzYgMS44MzM2NiA5LjY2OTM2SDIuNjY2OTlWMTIuMTY5NEMyLjY2Njk5IDEyLjYyNzcgMy4wNDE5OSAxMy4wMDI3IDMuNTAwMzMgMTMuMDAyN0MzLjk1ODY2IDEzLjAwMjcgNC4zMzM2NiAxMi42Mjc3IDQuMzMzNjYgMTIuMTY5NFY5LjY2OTM2SDUuMTY2OTlMOS4zMzM2NiAxMi4xNjk0VjIuMTY5MzZMNS4xNjY5OSA0LjY2OTM2WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNMTEuNDE3IDcuMTY5MzZDMTEuNDE3IDYuMDYxMDMgMTAuOTMzNyA1LjA2MTAzIDEwLjE2NyA0LjM3NzY5VjkuOTUyNjlDMTAuOTMzNyA5LjI3NzY5IDExLjQxNyA4LjI3NzY5IDExLjQxNyA3LjE2OTM2WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
   --str-video__icon--film-roll: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgNkMyLjQ1IDYgMiA2LjQ1IDIgN1YyMEMyIDIxLjEgMi45IDIyIDQgMjJIMTdDMTcuNTUgMjIgMTggMjEuNTUgMTggMjFDMTggMjAuNDUgMTcuNTUgMjAgMTcgMjBINUM0LjQ1IDIwIDQgMTkuNTUgNCAxOVY3QzQgNi40NSAzLjU1IDYgMyA2Wk0yMCAySDhDNi45IDIgNiAyLjkgNiA0VjE2QzYgMTcuMSA2LjkgMTggOCAxOEgyMEMyMS4xIDE4IDIyIDE3LjEgMjIgMTZWNEMyMiAyLjkgMjEuMSAyIDIwIDJaTTEyIDE0LjVWNS41TDE3LjQ3IDkuNkMxNy43NCA5LjggMTcuNzQgMTAuMiAxNy40NyAxMC40TDEyIDE0LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
   --str-video__icon--filter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMSAzLjc1QS43NS43NSAwIDAgMSAxLjc1IDNoMTIuNWEuNzUuNzUgMCAwIDEgMCAxLjVIMS43NUEuNzUuNzUgMCAwIDEgMSAzLjc1em0yLjUgNEEuNzUuNzUgMCAwIDEgNC4yNSA3aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXpNNi43NSAxMWEuNzUuNzUgMCAwIDAgMCAxLjVoMi41YS43NS43NSAwIDAgMCAwLTEuNWgtMi41eiIgZmlsbD0iY3VycmVudENvbG9yIi8+XAo8L3N2Zz4K');
   --str-video__icon--folder: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImZvbGRlciI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik05LjMyNjMgMy44MjQ5MkM5LjAwOTY0IDMuNTA4MjUgOC41ODQ2NCAzLjMzMzI1IDguMTQyOTcgMy4zMzMyNUgzLjgzNDY0QzIuOTE3OTcgMy4zMzMyNSAyLjE3NjMgNC4wODMyNSAyLjE3NjMgNC45OTk5MkwyLjE2Nzk3IDE0Ljk5OTlDMi4xNjc5NyAxNS45MTY2IDIuOTE3OTcgMTYuNjY2NiAzLjgzNDY0IDE2LjY2NjZIMTcuMTY4QzE4LjA4NDYgMTYuNjY2NiAxOC44MzQ2IDE1LjkxNjYgMTguODM0NiAxNC45OTk5VjYuNjY2NTlDMTguODM0NiA1Ljc0OTkyIDE4LjA4NDYgNC45OTk5MiAxNy4xNjggNC45OTk5MkgxMC41MDEzTDkuMzI2MyAzLjgyNDkyWiIgZmlsbD0iI0UzRTRFNSIvPgo8L2c+Cjwvc3ZnPgo=');

diff --git a/sample-apps/react/react-dogfood/components/ActiveCall.tsx b/sample-apps/react/react-dogfood/components/ActiveCall.tsx
@@ -20,20 +20,23 @@ import { Stage } from './Stage';
 import { InvitePanel, InvitePopup } from './InvitePanel/InvitePanel';
 import { ChatWrapper } from './ChatWrapper';
 import { ChatUI } from './ChatUI';
+import { CallStatsSidebar, ToggleStatsButton } from './CallStatsWrapper';
 import { ToggleSettingsTabModal } from './Settings/SettingsTabModal';
 import { ToggleFeedbackButton } from './ToggleFeedbackButton';
 import { ToggleDeveloperButton } from './ToggleDeveloperButton';
 import { ToggleMoreOptionsListButton } from './ToggleMoreOptionsListButton';
 import { ToggleLayoutButton } from './ToggleLayoutButton';
-import { ToggleStatsButton } from './ToggleStatsButton';
 import { ToggleParticipantListButton } from './ToggleParticipantListButton';
 import { ToggleDualCameraButton } from './ToggleDualCameraButton';
 import { ToggleDualMicButton } from './ToggleDualMicButton';
 import { NewMessageNotification } from './NewMessageNotification';
 import { UnreadCountBadge } from './UnreadCountBadge';
 
 import { useBreakpoint, useLayoutSwitcher, useWatchChannel } from '../hooks';
-import { useIsProntoEnvironment } from '../context/AppEnvironmentContext';
+import {
+  useIsDemoEnvironment,
+  useIsProntoEnvironment,
+} from '../context/AppEnvironmentContext';
 
 export type ActiveCallProps = {
   chatClient?: StreamChat | null;
@@ -42,12 +45,10 @@ export type ActiveCallProps = {
   onJoin: (fastJoin: boolean) => void;
 };
 
+type SidebarContent = 'participants' | 'chat' | 'stats' | null;
+
 export const ActiveCall = (props: ActiveCallProps) => {
   const { chatClient, activeCall, onLeave, onJoin } = props;
-  const [showParticipants, setShowParticipants] = useState(false);
-  const [showInvitePopup, setShowInvitePopup] = useState(true);
-  const [showChat, setShowChat] = useState(false);
-
   const { useParticipantCount } = useCallStateHooks();
   const participantCount = useParticipantCount();
 
@@ -62,7 +63,13 @@ export const ActiveCall = (props: ActiveCallProps) => {
     }
   }, [breakpoint, layout, setLayout]);
 
-  const showSidebar = showParticipants || showChat;
+  const isDemoEnvironment = useIsDemoEnvironment();
+  const [showInvitePopup, setShowInvitePopup] = useState(isDemoEnvironment);
+  const [sidebarContent, setSidebarContent] = useState<SidebarContent>(null);
+  const showSidebar = sidebarContent != null;
+  const showParticipants = sidebarContent === 'participants';
+  const showChat = sidebarContent === 'chat';
+  const showStats = sidebarContent === 'stats';
 
   // FIXME: could be replaced with "notification.message_new" but users would have to be at least members
   // possible fix with "allow to join" permissions in place (expensive?)
@@ -107,22 +114,24 @@ export const ActiveCall = (props: ActiveCallProps) => {
               {showParticipants && (
                 <div className="rd__participants">
                   <CallParticipantsList
-                    onClose={() => setShowParticipants(false)}
+                    onClose={() => setSidebarContent(null)}
                   />
                   <InvitePanel />
                 </div>
               )}
 
-              <ChatWrapper chatClient={chatClient}>
-                {showChat && (
+              {showChat && (
+                <ChatWrapper chatClient={chatClient}>
                   <div className="str-video__chat">
                     <ChatUI
-                      onClose={() => setShowChat(false)}
+                      onClose={() => setSidebarContent(null)}
                       channelId={activeCall.id}
                     />
                   </div>
-                )}
-              </ChatWrapper>
+                </ChatWrapper>
+              )}
+
+              {showStats && <CallStatsSidebar />}
             </div>
           )}
         </div>
@@ -167,21 +176,24 @@ export const ActiveCall = (props: ActiveCallProps) => {
             </div>
           </div>
           <div className="str-video__call-controls--group str-video__call-controls--sidebar">
-            {isPronto && (
-              <div className="str-video__call-controls__desktop">
-                <ToggleStatsButton />
-              </div>
-            )}
             <ToggleLayoutButton
               selectedLayout={layout}
               onMenuItemClick={setLayout}
             />
 
+            {isPronto && (
+              <div className="str-video__call-controls__desktop">
+                <ToggleStatsButton
+                  active={showStats}
+                  onClick={() => setSidebarContent(showStats ? null : 'stats')}
+                />
+              </div>
+            )}
+
             <ToggleParticipantListButton
               enabled={showParticipants}
               onClick={() => {
-                setShowParticipants((prev) => !prev);
-                setShowChat(false);
+                setSidebarContent(showParticipants ? null : 'participants');
               }}
             />
             <NewMessageNotification
@@ -195,10 +207,7 @@ export const ActiveCall = (props: ActiveCallProps) => {
                     enabled={showChat}
                     disabled={!chatClient}
                     title="Chat"
-                    onClick={() => {
-                      setShowChat((prev) => !prev);
-                      setShowParticipants(false);
-                    }}
+                    onClick={() => setSidebarContent(showChat ? null : 'chat')}
                     icon="chat"
                   />
                 </CompositeButton>

diff --git a/sample-apps/react/react-dogfood/components/CallStatsWrapper.tsx b/sample-apps/react/react-dogfood/components/CallStatsWrapper.tsx
@@ -0,0 +1,25 @@
+import {
+  CallStats,
+  CompositeButton,
+  IconButton,
+} from '@stream-io/video-react-sdk';
+
+export const ToggleStatsButton = (props: {
+  active?: boolean;
+  onClick?: () => void;
+}) => {
+  const { active, onClick } = props;
+  return (
+    <CompositeButton active={active} variant="primary">
+      <IconButton icon="stats" title="Stats" onClick={onClick} />
+    </CompositeButton>
+  );
+};
+
+export const CallStatsSidebar = () => {
+  return (
+    <div className="rd__sidebar__call-stats">
+      <CallStats />
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleStatsButton.tsx b/sample-apps/react/react-dogfood/components/ToggleStatsButton.tsx
diff --git a/sample-apps/react/react-dogfood/style/CallControls/CallControls-layout.scss b/sample-apps/react/react-dogfood/style/CallControls/CallControls-layout.scss
@@ -100,7 +100,3 @@
   width: 16px;
   margin-left: 20px;
 }
-
-.rd__stats-wrapper {
-  max-width: 400px;
-}
diff --git a/sample-apps/react/react-dogfood/style/layout.scss b/sample-apps/react/react-dogfood/style/layout.scss
@@ -31,6 +31,10 @@
   }
 }
 
+.rd__sidebar__call-stats {
+  overflow-y: scroll;
+}
+
 .rd__participants {
   display: flex;
   flex-direction: column;
@@ -44,8 +48,8 @@
 @include respond-above(sm) {
   .rd__sidebar {
     position: relative;
-    max-width: 300px;
-    min-width: 300px;
+    max-width: 350px;
+    min-width: 350px;
     display: flex;
     gap: var(--str-video__spacing-md);
     height: auto;