From 650f4b454595c131b8249a52f44944880fd209bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A1=D1=82=D0=B0=D0=BD=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?=
 =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B5=D0=B2?=
 <st163@MacBook-Pro-Stanislav.local>
Date: Thu, 2 Apr 2026 14:17:43 +0400
Subject: [PATCH] fix(SLW-6762): added side by side card to the
 sdk-web-demo-develop

---
 src/App.tsx                             | 11 +++++++++--
 src/components/SDKLayout/index.tsx      |  4 +++-
 src/components/VideoComponent/index.tsx |  8 +++++---
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c3c3184..63cce3d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { ContentActivateParams, StreamLayerProvider, StreamLayerSDKNotification } from '@streamlayer/react'
 import { StreamLayerSDKPoints } from '@streamlayer/react/points'
 import { StreamLayerSDKReact } from '@streamlayer/react'
@@ -22,6 +22,7 @@ export type ITheme = 'light' | 'dark' | 'tgl'
 const plugins = new Set([anonymous])
 
 function App() {
+  const videoRef = useRef<HTMLVideoElement>(null)
   const [mode, setMode] = useState<IMode>('side-panel')
   const [theme, setTheme] = useState<ITheme>('dark')
   const [tabs, setTabs] = useState(false)
@@ -94,7 +95,7 @@ function App() {
             )}
             banner={<StreamLayerSDKAdvertisement banner='bottom' persistent />}
             video={<>
-              <VideoComponent setInteracted={setInteracted} muted={muted} setMuted={setMuted} interacted={interacted} />
+              <VideoComponent setInteracted={setInteracted} muted={muted} setMuted={setMuted} interacted={interacted} videoRef={videoRef} />
             </>}
             overlay={(
               <>
@@ -103,6 +104,12 @@ function App() {
                 {interacted && <StreamLayerSDKAdvertisement muted={!muted} persistent skipTypeCheck externalAd />}
               </>
             )}
+            sbs={(
+              <>
+                <StreamLayerSDKAdvertisement muted={!muted} persistent skipTypeCheck sideBySide videoRef={videoRef} />
+                {interacted && <StreamLayerSDKAdvertisement muted={!muted} persistent skipTypeCheck externalAd sideBySide videoRef={videoRef} />}
+              </>
+            )}
             appNotification={<StreamLayerSDKNotification />}
             adNotification={<StreamLayerSDKAdvertisement notification persistent />}
           />
diff --git a/src/components/SDKLayout/index.tsx b/src/components/SDKLayout/index.tsx
index fd21fa6..fde2a71 100644
--- a/src/components/SDKLayout/index.tsx
+++ b/src/components/SDKLayout/index.tsx
@@ -10,6 +10,7 @@ type SDKLayoutProps = {
   banner?: React.ReactNode
   video?: React.ReactNode
   overlay?: React.ReactNode
+  sbs?: React.ReactNode
   appNotification?: React.ReactNode
   adNotification?: React.ReactNode
   points?: React.ReactNode
@@ -41,7 +42,7 @@ const useResponsive = () => {
   return store
 }
 
-export const SDKLayout: React.FC<SDKLayoutProps> = ({ mode, interacted, points, sidebar, overlay, appNotification, adNotification, banner, video }) => {
+export const SDKLayout: React.FC<SDKLayoutProps> = ({ mode, interacted, points, sidebar, overlay, sbs, appNotification, adNotification, banner, video }) => {
   const uiState = useStreamLayerUI()
 
   const videoContainerRef = useRef<HTMLDivElement>(null)
@@ -115,6 +116,7 @@ export const SDKLayout: React.FC<SDKLayoutProps> = ({ mode, interacted, points,
           <VideoBox ref={videoBoxRef} className="VideoBox">
             <VideoPlayer className="VideoPlayer">
               {video}
+              {sbs}
               {!hasPromotion && <StreamLayerSDKPolymarketButton />}
             </VideoPlayer>
             {!hasSidebar && !hasAppNotification && !hasPromotionNotification && !hasPromotion && <PointsContainer>{points}</PointsContainer>}
diff --git a/src/components/VideoComponent/index.tsx b/src/components/VideoComponent/index.tsx
index 698e426..3c783f8 100644
--- a/src/components/VideoComponent/index.tsx
+++ b/src/components/VideoComponent/index.tsx
@@ -28,11 +28,12 @@ const searchParams = new URLSearchParams(window.location.search)
 // @ts-ignore
 const pauseAdPreset = pauseAdPresets[searchParams.get('pause_ad')] || null
 
-export const VideoComponent: React.FC<{ muted: boolean, setMuted: React.Dispatch<React.SetStateAction<boolean>>, interacted: boolean, setInteracted: (interacted: boolean) => void
-}> = ({ interacted, setInteracted, muted }) => {
+export const VideoComponent: React.FC<{ muted: boolean, setMuted: React.Dispatch<React.SetStateAction<boolean>>, interacted: boolean, setInteracted: (interacted: boolean) => void, videoRef?: React.RefObject<HTMLVideoElement>
+}> = ({ interacted, setInteracted, muted, videoRef: externalVideoRef }) => {
   const [showPauseAd, setShowPauseAd] = useState(false)
   const [pauseAdRendered, setPauseAdRendered] = useState(false)
-  const videoRef = useRef<HTMLVideoElement>(null);
+  const internalVideoRef = useRef<HTMLVideoElement>(null);
+  const videoRef = externalVideoRef ?? internalVideoRef;
   const timeoutRef = useRef<NodeJS.Timeout>();
   const sdk = useStreamLayer()
   const [streamSrc, setStreamSrc] = useState('')
@@ -134,6 +135,7 @@ export const VideoComponent: React.FC<{ muted: boolean, setMuted: React.Dispatch
         onRenderPauseAd={onRenderPauseAd}
         onClosePauseAd={onClosePauseAd}
         videoPlayerController={videoPlayerController}
+        // @ts-ignore
         pauseAdExternalUrls={pauseAdPreset || (pauseAdUrl ? [
           {
             template: 'default',