\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n\nexport default PrivacyConsentDialog;\n"
},
{
"path": "src/client-viewer/src/components/PrivacyControlDialog/index.css",
"content": ".privacy-control-dialog-backdrop {\n\tbackdrop-filter: blur(2px);\n}\n\n.privacy-control-dialog {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.privacy-control-buttons-container {\n\tflex-shrink: 0;\n\tbackground: white;\n\tborder-top: 1px solid rgba(16, 22, 26, 0.15);\n}\n\n.bp4-dark .privacy-control-buttons-container {\n\tbackground: #30404d;\n\tborder-top-color: rgba(255, 255, 255, 0.2);\n}\n\n.privacy-control-dialog a {\n\tcolor: #137cbd;\n\ttext-decoration: none;\n}\n\n.privacy-control-dialog a:hover {\n\ttext-decoration: underline;\n\tcolor: #106ba3;\n}\n\n.allow-analytics-button {\n\tbox-shadow:\n\t\t0 4px 16px rgba(15, 153, 96, 0.5),\n\t\t0 0 20px rgba(15, 153, 96, 0.3) !important;\n\ttransition: all 0.2s ease-in-out !important;\n\tbackground: linear-gradient(135deg, #0f9960 0%, #0a7a4a 100%) !important;\n\tborder: none !important;\n\tcolor: white !important;\n}\n\n.allow-analytics-button:hover {\n\tbox-shadow:\n\t\t0 6px 24px rgba(15, 153, 96, 0.6),\n\t\t0 0 30px rgba(15, 153, 96, 0.4) !important;\n\ttransform: translateY(-2px);\n\tbackground: linear-gradient(135deg, #15b371 0%, #0f9960 100%) !important;\n}\n\n.allow-analytics-button:active {\n\ttransform: translateY(0);\n\tbox-shadow: 0 2px 12px rgba(15, 153, 96, 0.5) !important;\n}\n\n.disagree-analytics-button {\n\topacity: 0.7;\n\ttransition: opacity 0.2s ease-in-out;\n\tcolor: #5c7080 !important;\n\tborder-color: #ced9e0 !important;\n}\n\n.disagree-analytics-button:hover {\n\topacity: 0.9;\n\tbackground-color: #f5f8fa !important;\n}\n\n.bp4-dark .disagree-analytics-button {\n\tcolor: #8a9ba8 !important;\n\tborder-color: #5c7080 !important;\n}\n\n.bp4-dark .disagree-analytics-button:hover {\n\tbackground-color: #394b59 !important;\n}\n"
},
{
"path": "src/client-viewer/src/components/PrivacyControlDialog/index.tsx",
"content": "import { useEffect, useState } from 'react';\nimport {\n\tButton,\n\tClasses,\n\tDialog,\n\tDivider,\n\tH2,\n\tH3,\n\tHTMLSelect,\n\tIcon,\n} from '@blueprintjs/core';\nimport { Col, Row } from 'react-flexbox-grid';\nimport { useTranslation } from 'react-i18next';\nimport i18nInstance from '../../config/i18n';\nimport { getConsentStatus, type ConsentStatus } from '../../utils/analytics';\nimport './index.css';\n\ninterface PrivacyControlDialogProps {\n\tisOpen: boolean;\n\tonClose: () => void;\n\tonAccept: () => void;\n\tonOptOut: () => void;\n}\n\nconst AVAILABLE_LANGUAGES = [\n\t{ code: 'en', name: 'English' },\n\t{ code: 'es', name: 'Español' },\n\t{ code: 'de', name: 'Deutsch' },\n\t{ code: 'fr', name: 'Français' },\n\t{ code: 'ko', name: '한국어' },\n\t{ code: 'fi', name: 'Suomi' },\n\t{ code: 'it', name: 'Italiano' },\n\t{ code: 'da', name: 'Dansk' },\n\t{ code: 'sv', name: 'Svenska' },\n\t{ code: 'nl', name: 'Nederlands' },\n\t{ code: 'ua', name: 'Українська' },\n\t{ code: 'ru', name: 'Русский' },\n\t{ code: 'zh_CN', name: '简体中文' },\n\t{ code: 'zh_TW', name: '繁體中文' },\n\t{ code: 'ja', name: '日本語' },\n];\n\nfunction TranslatedContent() {\n\tconst { t } = useTranslation();\n\n\treturn (\n\t\t<>\n\t\t\t{t('Analytics Reference')}
\n\t\t\t\n\t\t\t\t{t(\n\t\t\t\t\t'This app uses Google Analytics (a free service by Google) to anonymously track basic usage data. This helps us understand how people use the app so we can improve it for everyone.',\n\t\t\t\t)}\n\t\t\t
\n\n\t\t\t\n\t\t\t\t{t('What we collect:')}\n\t\t\t
\n\t\t\t\n\t\t\t\t- {t('Page views (which screens you visit)')}
\n\t\t\t\t- {t('Time spent on pages')}
\n\t\t\t\t- {t('Basic device info (browser type, screen size)')}
\n\t\t\t\t- \n\t\t\t\t\t{t('Your IP address (anonymized — last part removed for privacy)')}\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\n\t\t\t\t{t(\"What we DON'T collect:\")}\n\t\t\t
\n\t\t\t\n\t\t\t\t- {t('Personal info (names, emails, passwords)')}
\n\t\t\t\t- {t('Exact location')}
\n\t\t\t\t- {t('Any files or content you interact with')}
\n\t\t\t
\n\n\t\t\t\n\t\t\t\t{t('Why anonymous?')}\n\t\t\t
\n\t\t\t\n\t\t\t\t{t(\n\t\t\t\t\t'Your IP is automatically shortened, and no one can identify you personally from this data.',\n\t\t\t\t)}\n\t\t\t
\n\n\t\t\t\n\t\t\t\t{t('Change your preference:')}\n\t\t\t
\n\t\t\t\n\t\t\t\t{t('Enable analytics:')}{' '}\n\t\t\t\t{t(\"We'll track anonymized usage to help improve the app.\")}\n\t\t\t
\n\t\t\t\n\t\t\t\t{t('Disable analytics:')}{' '}\n\t\t\t\t{t(\n\t\t\t\t\t\"Click the Disable button below to stop tracking. (We'll respect this choice, but you might miss out on future improvements based on collective feedback.)\",\n\t\t\t\t)}\n\t\t\t
\n\n\t\t\t\n\t\t\t\t{t('Data goes to: Google Analytics. See')}{' '}\n\t\t\t\t\n\t\t\t\t\t{t('their privacy policy')}\n\t\t\t\t\n\t\t\t\t.\n\t\t\t
\n\t\t\n\t);\n}\n\nfunction TranslatedButtons({\n\tonAccept,\n\tonOptOut,\n\tcurrentStatus,\n}: {\n\tonAccept: () => void;\n\tonOptOut: () => void;\n\tcurrentStatus: ConsentStatus;\n}) {\n\tconst { t } = useTranslation();\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{t('Enable Analytics')}\n\t\t\t\t\n\t\t\t\n\t\t\t{currentStatus === 'accepted' && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{t('Disable Analytics')}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t
\n\t);\n}\n\nfunction PrivacyControlDialog(props: PrivacyControlDialogProps) {\n\tconst { t, i18n } = useTranslation();\n\tconst { isOpen, onClose, onAccept, onOptOut } = props;\n\tconst [currentLanguage, setCurrentLanguage] = useState(i18n.language || 'en');\n\tconst [forceUpdate, setForceUpdate] = useState(0);\n\tconst [currentStatus, setCurrentStatus] = useState(null);\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tsetCurrentStatus(getConsentStatus());\n\t\t}\n\t}, [isOpen]);\n\n\tuseEffect(() => {\n\t\tconst updateLanguage = () => {\n\t\t\tconst newLang = i18nInstance.language || 'en';\n\t\t\tsetCurrentLanguage(newLang);\n\t\t\tsetForceUpdate((prev) => prev + 1);\n\t\t};\n\n\t\tconst handleLanguageChanged = () => {\n\t\t\tupdateLanguage();\n\t\t};\n\n\t\ti18nInstance.on('languageChanged', handleLanguageChanged);\n\t\ti18nInstance.on('loaded', handleLanguageChanged);\n\n\t\treturn () => {\n\t\t\ti18nInstance.off('languageChanged', handleLanguageChanged);\n\t\t\ti18nInstance.off('loaded', handleLanguageChanged);\n\t\t};\n\t}, []);\n\n\tconst handleLanguageChange = (\n\t\tevent: React.ChangeEvent,\n\t) => {\n\t\tconst newLang = event.target.value;\n\t\ti18nInstance\n\t\t\t.changeLanguage(newLang)\n\t\t\t.then(() => {\n\t\t\t\tsetCurrentLanguage(newLang);\n\t\t\t\tsetForceUpdate((prev) => prev + 1);\n\t\t\t})\n\t\t\t.catch((err) => {\n\t\t\t\tconsole.error('Error changing language:', err);\n\t\t\t});\n\t};\n\n\tconst handleAcceptClick = () => {\n\t\tonAccept();\n\t\tsetCurrentStatus('accepted');\n\t};\n\n\tconst handleOptOutClick = () => {\n\t\tonOptOut();\n\t\tsetCurrentStatus('opted-out');\n\t};\n\n\tconst langKey = `${currentLanguage}-${forceUpdate}`;\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t ({\n\t\t\t\t\t\t\t\tvalue: lang.code,\n\t\t\t\t\t\t\t\tlabel: lang.name,\n\t\t\t\t\t\t\t}))}\n\t\t\t\t\t\t\tminimal\n\t\t\t\t\t\t\tstyle={{ minWidth: '120px' }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{t('Privacy Settings')}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n\nexport default PrivacyControlDialog;\n"
},
{
"path": "src/client-viewer/src/components/VideoJSPlayer/index.tsx",
"content": "import { useEffect, useRef } from 'react';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore no types provided by video.js in this setup\nimport videojs from 'video.js';\nimport 'video.js/dist/video-js.css';\nimport './videojs-contain.css';\n\ninterface VideoJSPlayerProps {\n\tstream: MediaStream | null;\n\tplaying: boolean;\n\tcontainerEl: HTMLElement | null;\n}\n\ntype VideoJsPlayerInstance = {\n\tplay?: () => void | Promise;\n\tpause?: () => void;\n\tdispose?: () => void;\n};\n\nfunction VideoJSPlayer(props: VideoJSPlayerProps) {\n\tconst { stream, playing, containerEl } = props;\n\tconst videoElRef = useRef(null);\n\tconst playerRef = useRef(null);\n\n\tuseEffect(() => {\n\t\tif (!containerEl || !videojs) return;\n\t\tif (playerRef.current) return;\n\n\t\tconst videoEl = document.createElement('video');\n\t\tvideoEl.className = 'video-js vjs-default-skin';\n\t\tvideoEl.setAttribute('playsinline', 'true');\n\t\tvideoEl.setAttribute('webkit-playsinline', 'true');\n\t\tvideoEl.muted = true; // allow autoplay on mobile/safari\n\t\tvideoEl.style.width = '100%';\n\t\tvideoEl.style.height = '100%';\n\t\tvideoEl.style.objectFit = 'contain';\n\t\tvideoEl.style.backgroundColor = 'black';\n\t\t// set container background to black to show letterboxing\n\t\ttry {\n\t\t\tcontainerEl.style.backgroundColor = 'black';\n\t\t} catch {\n\t\t\t// ignore styling errors\n\t\t}\n\t\tcontainerEl.appendChild(videoEl);\n\t\tvideoElRef.current = videoEl;\n\n\t\tplayerRef.current = videojs(videoEl, {\n\t\t\tcontrols: false,\n\t\t\tautoplay: false,\n\t\t\tpreload: 'auto',\n\t\t\tfluid: false,\n\t\t\tfill: false,\n\t\t\tresponsive: false,\n\t\t\tinactivityTimeout: 0,\n\t\t});\n\n\t\treturn () => {\n\t\t\ttry {\n\t\t\t\tif (playerRef.current) {\n\t\t\t\t\tconst instance = playerRef.current;\n\t\t\t\t\tinstance.dispose?.();\n\t\t\t\t\tplayerRef.current = null;\n\t\t\t\t}\n\t\t\t} finally {\n\t\t\t\tif (videoElRef.current && videoElRef.current.parentNode) {\n\t\t\t\t\tvideoElRef.current.parentNode.removeChild(videoElRef.current);\n\t\t\t\t}\n\t\t\t\tvideoElRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [containerEl]);\n\n\tuseEffect(() => {\n\t\tconst el = videoElRef.current;\n\t\tif (!el) return;\n\t\ttry {\n\t\t\tif (stream instanceof MediaStream) {\n\t\t\t\t// @ts-ignore srcObject exists on HTMLMediaElement\n\t\t\t\tel.srcObject = stream;\n\t\t\t\tel.style.objectFit = 'contain';\n\t\t\t\tel.style.backgroundColor = 'black';\n\t\t\t\tif (playing) {\n\t\t\t\t\t// attempt play after attaching\n\t\t\t\t\tconst p = el.play();\n\t\t\t\t\tif (p && typeof p.catch === 'function') {\n\t\t\t\t\t\tp.catch(() => {\n\t\t\t\t\t\t\t// ignore autoplay failures\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// @ts-ignore\n\t\t\t\tel.srcObject = null;\n\t\t\t\tel.removeAttribute('src');\n\t\t\t\tel.load();\n\t\t\t}\n\t\t} catch (e) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error('Failed to attach MediaStream to element', e);\n\t\t}\n\t}, [stream, playing]);\n\n\tuseEffect(() => {\n\t\tconst player = playerRef.current;\n\t\tif (!player) return;\n\t\tif (playing) {\n\t\t\tplayer.play && player.play();\n\t\t} else {\n\t\t\tplayer.pause && player.pause();\n\t\t}\n\t}, [playing]);\n\n\treturn null;\n}\n\nexport default VideoJSPlayer;\n"
},
{
"path": "src/client-viewer/src/components/VideoJSPlayer/videojs-contain.css",
"content": ".video-js,\n.video-js .vjs-tech {\n\twidth: 100% !important;\n\theight: 100% !important;\n\tbackground-color: #000 !important;\n}\n\n.video-js .vjs-tech,\n.video-js .vjs-tech[style] {\n\tobject-fit: contain !important;\n}\n\n:fullscreen .video-js,\n:fullscreen .video-js .vjs-tech,\n:-webkit-full-screen .video-js,\n:-webkit-full-screen .video-js .vjs-tech {\n\twidth: 100% !important;\n\theight: 100% !important;\n\tobject-fit: contain !important;\n\tbackground-color: #000 !important;\n}\n"
},
{
"path": "src/client-viewer/src/config/i18n.ts",
"content": "/* istanbul ignore file */\n\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport Backend from 'i18next-http-backend';\n\n// don't want to use this?\n// have a look at the Quick start guide\n// for passing in lng and translations on init\n\ni18n\n\t// load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)\n\t// learn more: https://github.com/i18next/i18next-http-backend\n\t.use(Backend)\n\t// pass the i18n instance to react-i18next.\n\t.use(initReactI18next)\n\t// init i18next\n\t// for all options read: https://www.i18next.com/overview/configuration-options\n\t.init({\n\t\tlng: 'en',\n\t\tsaveMissing: true,\n\t\tsaveMissingTo: 'all',\n\t\tfallbackLng: 'en', // TODO: to generate missing keys use false as value here, will be useful when custom nodejs server is created to store missing values\n\t\tdebug: false, // change to true to see debug message logs in browser console\n\t\t// whitelist: ['en', 'es', 'ru', 'ua', 'zh_CN', 'zh_TW', 'da', 'de', 'fi', 'ko', 'it', 'ja', 'nl', 'fr', 'sv'],\n\t\tbackend: {\n\t\t\t// path where resources get loaded from\n\t\t\tloadPath: '/locales/{{lng}}/{{ns}}.json',\n\t\t\t// TODO: in future implement custom nodejs server that accepts missing translations POST requests and updates .missing.json files accordingly. Here is how to do so: https://www.robinwieruch.de/react-internationalization . it can be simple nodejs server that can be started when 'yarn dev' is running, need to ckagne package.json file then\n\t\t\t// path to post missing resources\n\t\t\taddPath: '/locales/{{lng}}/{{ns}}.json',\n\t\t\t// jsonIndent to use when storing json files\n\t\t\tjsonIndent: 2,\n\t\t},\n\n\t\tkeySeparator: false, // we do not use keys in form messages.welcome\n\n\t\tinterpolation: {\n\t\t\tescapeValue: false, // react already safes from xss\n\t\t},\n\t});\n\nexport default i18n;\n"
},
{
"path": "src/client-viewer/src/constants/appConstants.ts",
"content": "export const PLAYER_WRAPPER_ID = 'player-wrapper-id';\nexport const VIDEO_QUALITY_TO_DECIMAL = {\n\t'25%': 0.25, // Q_25_PERCENT\n\t'40%': 0.4, // Q_40_PERCENT\n\t'60%': 0.6, // Q_60_PERCENT\n\t'80%': 0.8, // Q_80_PERCENT\n\t'100%': 1, // Q_100_PERCENT\n};\nexport const COMPARISON_CANVAS_ID = 'comparison-canvas';\nexport const DUMMY_MY_DEVICE_DETAILS = {\n\tmyIP: '',\n\tmyOS: '',\n\tmyDeviceType: '',\n\tmyBrowser: '',\n\tmyRoomId: '',\n};\n"
},
{
"path": "src/client-viewer/src/constants/styleConstants.ts",
"content": "export const LIGHT_UI_BACKGROUND = 'rgba(240, 248, 250, 1)';\n"
},
{
"path": "src/client-viewer/src/containers/ConnectionPrompts/index.tsx",
"content": "import { Row, Col } from 'react-flexbox-grid';\nimport { useTranslation } from 'react-i18next';\nimport { LIGHT_UI_BACKGROUND } from '../../constants/styleConstants';\nimport MyDeviceInfoCard from '../../components/MyDeviceInfoCard';\nimport type { TFunction } from 'i18next';\nimport { Button, H3 } from '@blueprintjs/core';\nimport ConnectingIndicator from '../../components/ConnectingIndicator';\nimport DeskreenLogo from '../../images/deskreen_logo_128x128.png';\n\ninterface ConnectionPropmptsProps {\n\tmyDeviceDetails: DeviceDetails;\n\tisShownTextPrompt: boolean;\n\tpromptStep: number;\n\tconnectionIconType: ConnectionIconType;\n\tisShownSpinnerIcon: boolean;\n\tspinnerIconType: LoadingSharingIconType;\n}\n\nfunction getPromptContent(t: TFunction, step: number) {\n\tswitch (step) {\n\t\tcase 1:\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t{\n\t\t\t\t\t\tt(\n\t\t\t\t\t\t\t'Waiting for user to click ALLOW button on screen sharing device...',\n\t\t\t\t\t\t) as string\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t);\n\t\tcase 2:\n\t\t\treturn {t('Connected!') as string}
;\n\t\tcase 3:\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t{\n\t\t\t\t\t\tt(\n\t\t\t\t\t\t\t'Waiting for user to select source to share from screen sharing device...',\n\t\t\t\t\t\t) as string\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t);\n\t\tdefault:\n\t\t\treturn {`${t('Error occurred')} :(`}
;\n\t}\n}\n\nfunction ConnectionPropmpts(props: ConnectionPropmptsProps) {\n\tconst {\n\t\tmyDeviceDetails,\n\t\tpromptStep,\n\t\tconnectionIconType,\n\t\tisShownSpinnerIcon,\n\t\tspinnerIconType,\n\t} = props;\n\n\tconst { t } = useTranslation();\n\n\tconst handleReinitiateConnection = () => {\n\t\twindow.location.reload();\n\t};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tDeskreen CE Viewer
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{getPromptContent(t, promptStep)}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{t('re-initiate-connection') as string}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nexport default ConnectionPropmpts;\n"
},
{
"path": "src/client-viewer/src/containers/MainView/ConnectionIconEnum.ts",
"content": "const ConnectionIcon = {\n\tFEED: 'feed',\n\tFEED_SUBSCRIBED: 'feed-subscribed',\n} as const;\n\nexport default ConnectionIcon;\n"
},
{
"path": "src/client-viewer/src/containers/MainView/LoadingSharingIconEnum.ts",
"content": "export const LoadingSharingIconEnum = {\n\tDESKTOP: 'desktop',\n\tAPPLICATION: 'application',\n} as const;\n\nexport type LoadingSharingIconType =\n\t(typeof LoadingSharingIconEnum)[keyof typeof LoadingSharingIconEnum];\n"
},
{
"path": "src/client-viewer/src/containers/MainView/changeLanguage.ts",
"content": "import i18n from '../../config/i18n';\n\nexport default (lng: string) => {\n\ti18n.changeLanguage(lng);\n};\n"
},
{
"path": "src/client-viewer/src/containers/MainView/handleCreatePeerConnection.ts",
"content": "import PeerConnection from '../../features/PeerConnection';\nimport PeerConnectionUIHandler from '../../features/PeerConnection/PeerConnectionUIHandler';\nimport VideoAutoQualityOptimizer from '../../features/VideoAutoQualityOptimizer';\nimport changeLanguage from './changeLanguage';\nimport ConnectionIcon from './ConnectionIconEnum';\n\nexport default (params: CreatePeerConnectionUseEffectParams) => {\n\tconst {\n\t\tpeer,\n\t\tconnectionRoomId,\n\t\tsetMyDeviceDetails,\n\t\tsetConnectionIconType,\n\t\tsetIsShownTextPrompt,\n\t\tsetPromptStep,\n\t\tsetScreenSharingSourceType,\n\t\tsetDialogErrorMessage,\n\t\tsetIsErrorDialogOpen,\n\t\tsetUrl,\n\t\tsetPeer,\n\t} = params;\n\n\t// return the effect function\n\treturn () => {\n\t\tif (!peer) {\n\t\t\tif (connectionRoomId === '') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst UIHandler = new PeerConnectionUIHandler(\n\t\t\t\tsetMyDeviceDetails,\n\t\t\t\t() => {\n\t\t\t\t\tsetConnectionIconType(ConnectionIcon.FEED_SUBSCRIBED);\n\n\t\t\t\t\tsetIsShownTextPrompt(false);\n\t\t\t\t\tsetIsShownTextPrompt(true);\n\t\t\t\t\tsetPromptStep(2);\n\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tsetIsShownTextPrompt(false);\n\t\t\t\t\t\tsetIsShownTextPrompt(true);\n\t\t\t\t\t\tsetPromptStep(3);\n\t\t\t\t\t}, 2000);\n\t\t\t\t},\n\t\t\t\tsetScreenSharingSourceType,\n\t\t\t\tchangeLanguage,\n\t\t\t\tsetDialogErrorMessage,\n\t\t\t\tsetIsErrorDialogOpen,\n\t\t\t);\n\n\t\t\tconst _peer = new PeerConnection(\n\t\t\t\tconnectionRoomId,\n\t\t\t\tsetUrl,\n\t\t\t\tnew VideoAutoQualityOptimizer(),\n\t\t\t\tUIHandler,\n\t\t\t);\n\n\t\t\tsetPeer(_peer);\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsShownTextPrompt(true);\n\t\t\t}, 100);\n\t\t}\n\n\t\t// return cleanup function - cleanup when connectionRoomId changes or component unmounts\n\t\treturn () => {\n\t\t\tif (peer) {\n\t\t\t\tpeer.destroy();\n\t\t\t\tsetPeer(undefined);\n\t\t\t}\n\t\t};\n\t};\n};\n"
},
{
"path": "src/client-viewer/src/containers/MainView/handleDisplayingLoadingSharingIconLoop.ts",
"content": "import { LoadingSharingIconEnum } from './LoadingSharingIconEnum';\n\nexport default (params: handleDisplayingLoadingSharingIconLoopParams) => {\n\tconst {\n\t\tpromptStep,\n\t\turl,\n\t\tsetIsShownLoadingSharingIcon,\n\t\tloadingSharingIconType,\n\t\tisShownLoadingSharingIcon,\n\t\tsetLoadingSharingIconType,\n\t} = params;\n\treturn () => {\n\t\tlet interval: NodeJS.Timeout;\n\t\tif (promptStep === 3 && url === null) {\n\t\t\tsetIsShownLoadingSharingIcon(true);\n\n\t\t\tlet currentIcon = loadingSharingIconType;\n\t\t\tlet isShownIcon = isShownLoadingSharingIcon;\n\t\t\tlet isShownWithFadingUIEffect = false;\n\t\t\tinterval = setInterval(() => {\n\t\t\t\tisShownIcon = !isShownIcon;\n\t\t\t\tsetIsShownLoadingSharingIcon(isShownIcon);\n\t\t\t\tif (isShownWithFadingUIEffect) {\n\t\t\t\t\tcurrentIcon =\n\t\t\t\t\t\tcurrentIcon === LoadingSharingIconEnum.DESKTOP\n\t\t\t\t\t\t\t? LoadingSharingIconEnum.APPLICATION\n\t\t\t\t\t\t\t: LoadingSharingIconEnum.DESKTOP;\n\t\t\t\t\tsetLoadingSharingIconType(currentIcon);\n\t\t\t\t\tisShownWithFadingUIEffect = false;\n\t\t\t\t} else {\n\t\t\t\t\tisShownWithFadingUIEffect = true;\n\t\t\t\t}\n\t\t\t}, 1500);\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t};\n};\n"
},
{
"path": "src/client-viewer/src/containers/MainView/handleNoConnectionTimeout.ts",
"content": "import { DUMMY_MY_DEVICE_DETAILS } from '../../constants/appConstants';\n\nexport default (\n\tmyDeviceDetails: DeviceDetails,\n\tsetIsErrorDialogOpen: (_: boolean) => void,\n) => {\n\treturn () => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tif (myDeviceDetails === DUMMY_MY_DEVICE_DETAILS) {\n\t\t\t\tsetIsErrorDialogOpen(true);\n\t\t\t}\n\t\t}, 10000);\n\t\treturn () => {\n\t\t\tclearTimeout(timeout);\n\t\t};\n\t};\n};\n"
},
{
"path": "src/client-viewer/src/containers/MainView/handleRemoveDanglingReactRevealContainer.ts",
"content": "export default (url: MediaStream | null) => {\n\treturn () => {\n\t\tif (url !== null) {\n\t\t\tsetTimeout(() => {\n\t\t\t\t// @ts-ignore\n\t\t\t\tdocument.querySelector('.container > div:nth-child(1)').style.display =\n\t\t\t\t\t'none';\n\t\t\t}, 1000);\n\t\t}\n\t};\n};\n"
},
{
"path": "src/client-viewer/src/containers/MainView/handleSetVideoQuality.ts",
"content": "import PeerConnection from '../../features/PeerConnection';\nimport { type VideoQualityType } from '../../features/VideoAutoQualityOptimizer/VideoQualityEnum';\n\nexport default (\n\tvideoQuality: VideoQualityType,\n\tpeer: PeerConnection | undefined,\n) => {\n\treturn () => {\n\t\tif (!peer) return;\n\t\tif (!peer.isStreamStarted) return;\n\t\tpeer.setVideoQuality(videoQuality);\n\t};\n};\n"
},
{
"path": "src/client-viewer/src/containers/MainView/index.css",
"content": "@media (prefers-reduced-motion: no-preference) {\n\t.App-logo {\n\t\tanimation: App-logo-spin infinite 20s linear;\n\t}\n\n\t#pulsing-circle-1 {\n\t\tanimation: pulse1 infinite 6s linear;\n\t}\n\n\t#pulsing-circle-2 {\n\t\tanimation: pulse2 infinite 6s linear;\n\t}\n\n\t.pulse-3-once {\n\t\tanimation: pulse3twice 2 750ms linear;\n\t}\n}\n\n@keyframes pulse1 {\n\t0% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(72, 175, 240, 0.7);\n\t}\n\n\t80% {\n\t\ttransform: scale(1);\n\t\tbox-shadow: 0 0 0 15px rgba(72, 175, 240, 0.4);\n\t}\n\n\t100% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(72, 175, 240, 0);\n\t}\n}\n\n@keyframes pulse2 {\n\t100% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(72, 175, 240, 0);\n\t}\n\n\t80% {\n\t\ttransform: scale(1);\n\t\tbox-shadow: 0 0 0 33px rgba(72, 175, 240, 0.3);\n\t}\n\n\t0% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(72, 175, 240, 1);\n\t}\n}\n\n@keyframes pulse3twice {\n\t0% {\n\t\tbox-shadow: 0 0 0 0 rgba(21, 179, 113, 0.7);\n\t}\n\n\t50% {\n\t\tbox-shadow: 0 0 0 30px rgba(21, 179, 113, 0.3);\n\t}\n\n\t100% {\n\t\tbox-shadow: 0 0 0 0 rgba(21, 179, 113, 0);\n\t}\n}\n\n.container > .react-reveal {\n\toverflow: hidden;\n}\n"
},
{
"path": "src/client-viewer/src/containers/MainView/index.tsx",
"content": "import { useEffect, useState, useCallback } from 'react';\nimport { Grid } from 'react-flexbox-grid';\nimport screenfull from 'screenfull';\nimport './index.css';\nimport PeerConnection from '../../features/PeerConnection';\nimport {\n\tVideoQuality,\n\ttype VideoQualityType,\n} from '../../features/VideoAutoQualityOptimizer/VideoQualityEnum';\nimport ErrorDialog from '../../components/ErrorDialog';\nimport {\n\tErrorMessage,\n\ttype ErrorMessageType,\n} from '../../components/ErrorDialog/ErrorMessageEnum';\nimport ConnectionPropmpts from '../../containers/ConnectionPrompts';\nimport PlayerView from '../../containers/PlayerView';\nimport handleSetVideoQuality from './handleSetVideoQuality';\nimport { DUMMY_MY_DEVICE_DETAILS } from '../../constants/appConstants';\nimport handleNoConnectionTimeout from './handleNoConnectionTimeout';\nimport handleCreatePeerConnection from './handleCreatePeerConnection';\nimport handleRemoveDanglingReactRevealContainer from './handleRemoveDanglingReactRevealContainer';\nimport handleDisplayingLoadingSharingIconLoop from './handleDisplayingLoadingSharingIconLoop';\nimport { ScreenSharingSource } from '../../features/PeerConnection/ScreenSharingSourceEnum';\nimport ConnectionIcon from './ConnectionIconEnum';\nimport { LoadingSharingIconEnum } from './LoadingSharingIconEnum';\nimport { useScreenViewingTracker } from './useScreenViewingTracker';\n\nfunction MainView() {\n\tconst [isErrorDialogOpen, setIsErrorDialogOpen] = useState(false);\n\n\tconst [promptStep, setPromptStep] = useState(1);\n\tconst [dialogErrorMessage, setDialogErrorMessage] =\n\t\tuseState(ErrorMessage.UNKNOWN_ERROR);\n\tconst [connectionIconType, setConnectionIconType] =\n\t\tuseState(ConnectionIcon.FEED);\n\tconst [myDeviceDetails, setMyDeviceDetails] = useState(\n\t\tDUMMY_MY_DEVICE_DETAILS,\n\t);\n\n\tconst [playing, setPlaying] = useState(true);\n\tconst [url, setUrl] = useState(null);\n\tconst [screenSharingSourceType, setScreenSharingSourceType] =\n\t\tuseState(ScreenSharingSource.SCREEN);\n\tconst [isWithControls, setIsWithControls] = useState(!screenfull.isEnabled);\n\tconst [isShownTextPrompt, setIsShownTextPrompt] = useState(false);\n\tconst [isShownLoadingSharingIcon, setIsShownLoadingSharingIcon] =\n\t\tuseState(false);\n\tconst [loadingSharingIconType, setLoadingSharingIconType] =\n\t\tuseState(LoadingSharingIconEnum.DESKTOP);\n\tconst [videoQuality, setVideoQuality] = useState(\n\t\tVideoQuality.Q_100_PERCENT,\n\t);\n\tconst [peer, setPeer] = useState();\n\tconst [connectionRoomId, setConnectionRoomId] = useState('');\n\n\tuseEffect(() => {\n\t\tconst { pathname } = window.location;\n\t\tconst normalizedPath = pathname.startsWith('/')\n\t\t\t? pathname.slice(1)\n\t\t\t: pathname;\n\t\tconst extractedRoomId = normalizedPath.split('/').filter(Boolean)[0] || '';\n\n\t\tif (extractedRoomId !== '') {\n\t\t\tsetConnectionRoomId(extractedRoomId);\n\t\t\treturn;\n\t\t}\n\n\t\tconst fallbackRoomId = Math.random().toString(36).substring(2, 10);\n\t\tsetConnectionRoomId(fallbackRoomId);\n\t}, []);\n\n\tuseEffect(handleSetVideoQuality(videoQuality, peer), [videoQuality, peer]);\n\n\tuseEffect(handleNoConnectionTimeout(myDeviceDetails, setIsErrorDialogOpen), [\n\t\tmyDeviceDetails,\n\t]);\n\n\tuseEffect(\n\t\thandleCreatePeerConnection({\n\t\t\tpeer,\n\t\t\tconnectionRoomId,\n\t\t\tsetMyDeviceDetails,\n\t\t\tsetConnectionIconType,\n\t\t\tsetIsShownTextPrompt,\n\t\t\tsetPromptStep,\n\t\t\tsetScreenSharingSourceType,\n\t\t\tsetDialogErrorMessage,\n\t\t\tsetIsErrorDialogOpen,\n\t\t\tsetUrl,\n\t\t\tsetPeer,\n\t\t}),\n\t\t[connectionRoomId],\n\t);\n\n\tconst handlePlayPause = useCallback(() => {\n\t\tsetPlaying(!playing);\n\t}, [playing]);\n\n\tuseEffect(handleRemoveDanglingReactRevealContainer(url), [url]);\n\n\tuseEffect(\n\t\thandleDisplayingLoadingSharingIconLoop({\n\t\t\tpromptStep,\n\t\t\turl,\n\t\t\tsetIsShownLoadingSharingIcon,\n\t\t\tloadingSharingIconType,\n\t\t\tisShownLoadingSharingIcon,\n\t\t\tsetLoadingSharingIconType,\n\t\t}),\n\t\t[promptStep, url],\n\t);\n\n\tuseScreenViewingTracker({\n\t\tstreamUrl: url,\n\t\tisPlaying: playing,\n\t\tisErrorDialogOpen,\n\t\tdialogErrorMessage,\n\t});\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nexport default MainView;\n"
},
{
"path": "src/client-viewer/src/containers/MainView/useScreenViewingTracker.ts",
"content": "import { useEffect, useRef } from 'react';\nimport { trackAnalyticsEvent } from '../../utils/analytics';\nimport { type ErrorMessageType } from '../../components/ErrorDialog/ErrorMessageEnum';\n\ninterface UseScreenViewingTrackerParams {\n\tstreamUrl: MediaStream | null;\n\tisPlaying: boolean;\n\tisErrorDialogOpen: boolean;\n\tdialogErrorMessage: ErrorMessageType;\n}\n\nfunction formatErrorMessageForEvent(errorMessage: ErrorMessageType): string {\n\t// convert error message to event-friendly format\n\t// e.g., \"An unknown error occurred\" -> \"an_unknown_error_occurred\"\n\treturn errorMessage\n\t\t.toLowerCase()\n\t\t.replace(/[^a-z0-9\\s]/g, '')\n\t\t.replace(/\\s+/g, '_');\n}\n\nexport function useScreenViewingTracker(\n\tparams: UseScreenViewingTrackerParams,\n): void {\n\tconst { streamUrl, isPlaying, isErrorDialogOpen, dialogErrorMessage } =\n\t\tparams;\n\n\tconst startTimeRef = useRef(null);\n\tconst intervalRef = useRef(null);\n\tconst lastMinuteTrackedRef = useRef(0);\n\tconst errorEventSentRef = useRef(false);\n\tconst previousErrorDialogOpenRef = useRef(false);\n\tconst isErrorDialogOpenRef = useRef(false);\n\n\t// determine if stream is currently visible (without error dialog check)\n\tconst isStreamVisible = streamUrl !== null && isPlaying;\n\n\t// update error dialog ref\n\tisErrorDialogOpenRef.current = isErrorDialogOpen;\n\n\t// handle error dialog appearance\n\tuseEffect(() => {\n\t\t// if error dialog just appeared and we were tracking\n\t\tif (\n\t\t\tisErrorDialogOpen &&\n\t\t\t!previousErrorDialogOpenRef.current &&\n\t\t\tstartTimeRef.current !== null &&\n\t\t\t!errorEventSentRef.current\n\t\t) {\n\t\t\t// clear interval\n\t\t\tif (intervalRef.current !== null) {\n\t\t\t\tclearInterval(intervalRef.current);\n\t\t\t\tintervalRef.current = null;\n\t\t\t}\n\n\t\t\t// calculate total minutes spent viewing\n\t\t\tconst elapsedMs = Date.now() - startTimeRef.current;\n\t\t\tconst elapsedMinutes = Math.floor(elapsedMs / 60000);\n\t\t\tconst errorReason = formatErrorMessageForEvent(dialogErrorMessage);\n\n\t\t\t// send error event\n\t\t\ttrackAnalyticsEvent(\n\t\t\t\t`error_dialog_reason_${errorReason}_spent_screen_viewing_${elapsedMinutes}_minutes`,\n\t\t\t\t{},\n\t\t\t);\n\n\t\t\terrorEventSentRef.current = true;\n\t\t}\n\n\t\tpreviousErrorDialogOpenRef.current = isErrorDialogOpen;\n\t}, [isErrorDialogOpen, dialogErrorMessage]);\n\n\t// handle stream visibility tracking\n\tuseEffect(() => {\n\t\t// if stream becomes visible and no error dialog, start tracking\n\t\tif (\n\t\t\tisStreamVisible &&\n\t\t\t!isErrorDialogOpen &&\n\t\t\tstartTimeRef.current === null\n\t\t) {\n\t\t\tstartTimeRef.current = Date.now();\n\t\t\tlastMinuteTrackedRef.current = 0;\n\t\t\terrorEventSentRef.current = false;\n\n\t\t\t// set up interval to check every minute\n\t\t\tintervalRef.current = setInterval(() => {\n\t\t\t\tif (startTimeRef.current === null || isErrorDialogOpenRef.current) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst elapsedMs = Date.now() - startTimeRef.current;\n\t\t\t\tconst elapsedMinutes = Math.floor(elapsedMs / 60000);\n\n\t\t\t\t// send event for each new minute\n\t\t\t\tif (elapsedMinutes > lastMinuteTrackedRef.current) {\n\t\t\t\t\tlastMinuteTrackedRef.current = elapsedMinutes;\n\t\t\t\t\ttrackAnalyticsEvent(`screen_viewing_${elapsedMinutes}_minutes`, {});\n\t\t\t\t}\n\t\t\t}, 60000); // check every minute\n\t\t}\n\n\t\t// if stream is not visible (and no error dialog), stop tracking and reset\n\t\tif (\n\t\t\t(!isStreamVisible || isErrorDialogOpen) &&\n\t\t\tintervalRef.current !== null\n\t\t) {\n\t\t\tclearInterval(intervalRef.current);\n\t\t\tintervalRef.current = null;\n\t\t}\n\n\t\t// reset tracking state when stream is not visible (only if no error dialog)\n\t\tif (!isStreamVisible && !isErrorDialogOpen) {\n\t\t\tstartTimeRef.current = null;\n\t\t\tlastMinuteTrackedRef.current = 0;\n\t\t\terrorEventSentRef.current = false;\n\t\t}\n\n\t\t// if error dialog closes and stream is still visible, restart tracking\n\t\tif (\n\t\t\t!isErrorDialogOpen &&\n\t\t\tpreviousErrorDialogOpenRef.current &&\n\t\t\tisStreamVisible &&\n\t\t\terrorEventSentRef.current\n\t\t) {\n\t\t\t// reset error event flag and restart tracking\n\t\t\terrorEventSentRef.current = false;\n\t\t\tstartTimeRef.current = Date.now();\n\t\t\tlastMinuteTrackedRef.current = 0;\n\n\t\t\t// restart interval\n\t\t\tif (intervalRef.current === null) {\n\t\t\t\tintervalRef.current = setInterval(() => {\n\t\t\t\t\tif (startTimeRef.current === null || isErrorDialogOpenRef.current) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst elapsedMs = Date.now() - startTimeRef.current;\n\t\t\t\t\tconst elapsedMinutes = Math.floor(elapsedMs / 60000);\n\n\t\t\t\t\t// send event for each new minute\n\t\t\t\t\tif (elapsedMinutes > lastMinuteTrackedRef.current) {\n\t\t\t\t\t\tlastMinuteTrackedRef.current = elapsedMinutes;\n\t\t\t\t\t\ttrackAnalyticsEvent(`screen_viewing_${elapsedMinutes}_minutes`, {});\n\t\t\t\t\t}\n\t\t\t\t}, 60000);\n\t\t\t}\n\t\t}\n\n\t\t// cleanup on unmount\n\t\treturn () => {\n\t\t\tif (intervalRef.current !== null) {\n\t\t\t\tclearInterval(intervalRef.current);\n\t\t\t\tintervalRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [isStreamVisible, isErrorDialogOpen]);\n}\n"
},
{
"path": "src/client-viewer/src/containers/PlayerView/index.tsx",
"content": "import { useEffect, useRef, useCallback } from 'react';\nimport { OverlayToaster, Position } from '@blueprintjs/core';\nimport { useTranslation } from 'react-i18next';\nimport VideoJSPlayer from '../../components/VideoJSPlayer';\nimport PlayerControlPanel from '../../components/PlayerControlPanel';\nimport {\n\tCOMPARISON_CANVAS_ID,\n\tPLAYER_WRAPPER_ID,\n} from '../../constants/appConstants';\nimport { type VideoQualityType } from '../../features/VideoAutoQualityOptimizer/VideoQualityEnum';\nimport { togglePlayerFullscreen } from '../../utils/playerFullscreen';\n\ninterface PlayerViewProps {\n\tisWithControls: boolean;\n\tsetIsWithControls: (_: boolean) => void;\n\thandlePlayPause: () => void;\n\tisPlaying: boolean;\n\tsetPlaying: (playing: boolean) => void;\n\tsetVideoQuality: (_: VideoQualityType) => void;\n\tvideoQuality: VideoQualityType;\n\tscreenSharingSourceType: ScreenSharingSourceType;\n\tstreamUrl: MediaStream | null;\n}\n\ntype IOSVideoElement = HTMLVideoElement & {\n\twebkitEnterFullscreen?: () => void;\n\twebkitExitFullscreen?: () => void;\n\twebkitSupportsFullscreen?: boolean;\n\twebkitDisplayingFullscreen?: boolean;\n};\n\nfunction PlayerView(props: PlayerViewProps) {\n\tconst { t } = useTranslation();\n\tconst {\n\t\tscreenSharingSourceType,\n\t\tsetIsWithControls,\n\t\tisWithControls,\n\t\thandlePlayPause,\n\t\tisPlaying,\n\t\tsetPlaying,\n\t\tsetVideoQuality,\n\t\tvideoQuality,\n\t\tstreamUrl,\n\t} = props;\n\n\t// const player = useRef(null);\n\n\tconst videoRef = useRef(null);\n\tconst toasterRef = useRef> | null>(null);\n\t// no external player ref needed for video.js variant\n\n\tuseEffect(() => {\n\t\tif (!streamUrl) return;\n\n\t\t// html5 video mode\n\t\tif (isWithControls && videoRef.current) {\n\t\t\tif (streamUrl instanceof MediaStream) {\n\t\t\t\tvideoRef.current.srcObject = streamUrl;\n\t\t\t} else {\n\t\t\t\tvideoRef.current.src = streamUrl;\n\t\t\t}\n\t\t\tvideoRef.current.play().catch((error) => {\n\t\t\t\tconsole.error('Error playing video:', error);\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\t// video.js mode (default) doesn't need imperative src assignment here\n\t}, [streamUrl, isWithControls]);\n\n\tuseEffect(() => {\n\t\tif (isWithControls) {\n\t\t\tif (!videoRef.current) return;\n\t\t\tif (isPlaying) {\n\t\t\t\tvideoRef.current.play().catch((error) => {\n\t\t\t\t\tconsole.error('Error playing video:', error);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tvideoRef.current.pause();\n\t\t\t}\n\t\t}\n\t\t// react-player play/pause is handled via its `playing` prop\n\t}, [isPlaying, isWithControls]);\n\n\t// initialize toaster\n\tuseEffect(() => {\n\t\tconst initToaster = async () => {\n\t\t\tif (!toasterRef.current) {\n\t\t\t\ttoasterRef.current = await OverlayToaster.create({\n\t\t\t\t\tposition: Position.BOTTOM,\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\t\tinitToaster();\n\t}, []);\n\n\t// wrap handlePlayPause to show toaster notifications\n\tconst handlePlayPauseWithNotification = useCallback(() => {\n\t\tconst nextPlaying = !isPlaying;\n\t\thandlePlayPause();\n\t\t\n\t\t// show notification after a small delay to ensure state is updated\n\t\tsetTimeout(() => {\n\t\t\tif (toasterRef.current) {\n\t\t\t\ttoasterRef.current.show({\n\t\t\t\t\tmessage: nextPlaying ? t('Video stream is playing') : t('Video stream is paused'),\n\t\t\t\t\tintent: nextPlaying ? 'success' : 'warning',\n\t\t\t\t\ttimeout: 2000,\n\t\t\t\t});\n\t\t\t}\n\t\t}, 50);\n\t}, [handlePlayPause, isPlaying, t]);\n\n\t// handle iPhone fullscreen exit - detect when video stops and auto-resume\n\tuseEffect(() => {\n\t\tif (!streamUrl) return;\n\n\t\tconst getVideoElement = (): IOSVideoElement | null => {\n\t\t\tif (isWithControls && videoRef.current) {\n\t\t\t\treturn videoRef.current as IOSVideoElement;\n\t\t\t}\n\t\t\tconst container = document.getElementById(PLAYER_WRAPPER_ID);\n\t\t\tif (!container) return null;\n\t\t\tconst maybeVideo = container.querySelector('video');\n\t\t\tif (!(maybeVideo instanceof HTMLVideoElement)) return null;\n\t\t\treturn maybeVideo as IOSVideoElement;\n\t\t};\n\n\t\tconst handleFullscreenEnd = () => {\n\t\t\t// small delay to ensure video state is updated after fullscreen exit\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst video = getVideoElement();\n\t\t\t\tif (!video) return;\n\n\t\t\t\t// check if video is paused after exiting fullscreen\n\t\t\t\tif (video.paused) {\n\t\t\t\t\t// sync play state - ensure button shows \"Play\" instead of \"Pause\"\n\t\t\t\t\tsetPlaying(false);\n\n\t\t\t\t\t// show warning notification that video stopped and user needs to click play\n\t\t\t\t\tif (toasterRef.current) {\n\t\t\t\t\t\ttoasterRef.current.show({\n\t\t\t\t\t\t\tmessage: t('Video stream paused after exiting fullscreen. Please click Play to continue.'),\n\t\t\t\t\t\t\tintent: 'warning',\n\t\t\t\t\t\t\ttimeout: 5000,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// video is playing, but state might be wrong - sync it\n\t\t\t\t\tif (!isPlaying) {\n\t\t\t\t\t\tsetPlaying(true);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}, 150);\n\t\t};\n\n\t\tconst attachListener = (video: IOSVideoElement | null) => {\n\t\t\tif (video) {\n\t\t\t\tvideo.addEventListener('webkitendfullscreen', handleFullscreenEnd);\n\t\t\t}\n\t\t};\n\n\t\tconst detachListener = (video: IOSVideoElement | null) => {\n\t\t\tif (video) {\n\t\t\t\tvideo.removeEventListener('webkitendfullscreen', handleFullscreenEnd);\n\t\t\t}\n\t\t};\n\n\t\tlet currentVideo: IOSVideoElement | null = getVideoElement();\n\t\tattachListener(currentVideo);\n\n\t\t// watch for video element changes (especially for VideoJSPlayer)\n\t\tconst container = document.getElementById(PLAYER_WRAPPER_ID);\n\t\tlet observer: MutationObserver | null = null;\n\n\t\tif (container) {\n\t\t\tobserver = new MutationObserver(() => {\n\t\t\t\tconst newVideo = getVideoElement();\n\t\t\t\tif (newVideo !== currentVideo) {\n\t\t\t\t\tdetachListener(currentVideo);\n\t\t\t\t\tcurrentVideo = newVideo;\n\t\t\t\t\tattachListener(currentVideo);\n\t\t\t\t}\n\t\t\t});\n\t\t\tobserver.observe(container, { childList: true, subtree: true });\n\t\t}\n\n\t\treturn () => {\n\t\t\tdetachListener(currentVideo);\n\t\t\tif (observer) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [streamUrl, isWithControls, isPlaying, setPlaying, t]);\n\n\t// @ts-ignore\n\treturn (\n\t\t\n\t\t\t setIsWithControls(isEnabled)}\n\t\t\t\tisDefaultPlayerTurnedOn={isWithControls}\n\t\t\t\thandleClickFullscreen={() => {\n\t\t\t\t\tconst result = togglePlayerFullscreen();\n\t\t\t\t\tif (result === 'failed') {\n\t\t\t\t\t\tconsole.warn('Unable to toggle fullscreen');\n\t\t\t\t\t}\n\t\t\t\t\treturn result;\n\t\t\t\t}}\n\t\t\t\thandleClickPlayPause={handlePlayPauseWithNotification}\n\t\t\t\tisPlaying={isPlaying}\n\t\t\t\tsetVideoQuality={setVideoQuality}\n\t\t\t\tselectedVideoQuality={videoQuality}\n\t\t\t\tscreenSharingSourceType={screenSharingSourceType}\n\t\t\t/>\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{isWithControls ? (\n\t\t\t\t\t\t\n\t\t\t\t\t) : (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nexport default PlayerView;\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/NullUser.ts",
"content": "export default { username: '', id: '' };\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/PartnerPeerUser.d.ts",
"content": "interface PartnerPeerUser {\n\tusername: string;\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/PeerConnection.d.ts",
"content": "type PeerConnection = import('.').default;\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/PeerConnectionUIHandler.ts",
"content": "import {\n\tErrorMessage,\n\ttype ErrorMessageType,\n} from '../../components/ErrorDialog/ErrorMessageEnum';\n\nexport default class PeerConnectionUIHandler {\n\tsetMyDeviceDetails: (details: DeviceDetails) => void;\n\n\thostAllowedToConnectCallback: () => void;\n\n\tsetScreenSharingSourceTypeCallback: (s: ScreenSharingSourceType) => void;\n\n\tsetAppLanguageCallback: (newLang: string) => void;\n\n\tsetDialogErrorMessageCallback: (message: ErrorMessageType) => void;\n\n\tsetIsErrorDialogOpen: (val: boolean) => void;\n\n\terrorDialogMessage: ErrorMessageType = ErrorMessage.UNKNOWN_ERROR;\n\n\tconstructor(\n\t\tsetMyDeviceDetails: (details: DeviceDetails) => void,\n\t\thostAllowedToConnectCallback: () => void,\n\t\tsetScreenSharingSourceTypeCallback: (s: ScreenSharingSourceType) => void,\n\t\tsetAppLanguageCallback: (newLang: string) => void,\n\t\tsetDialogErrorMessageCallback: (message: ErrorMessageType) => void,\n\t\tsetIsErrorDialogOpen: (val: boolean) => void,\n\t) {\n\t\tthis.hostAllowedToConnectCallback = hostAllowedToConnectCallback;\n\t\tthis.setMyDeviceDetails = setMyDeviceDetails;\n\t\tthis.setScreenSharingSourceTypeCallback =\n\t\t\tsetScreenSharingSourceTypeCallback;\n\t\tthis.setAppLanguageCallback = setAppLanguageCallback;\n\t\tthis.setDialogErrorMessageCallback = setDialogErrorMessageCallback;\n\t\tthis.setIsErrorDialogOpen = setIsErrorDialogOpen;\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/ReceiveEncryptedMessagePayload.d.ts",
"content": "interface ReceiveEncryptedMessagePayload {\n\tfromSocketID: string;\n\ttype: string;\n\tpayload: Record;\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/ScreenSharingSourceEnum.ts",
"content": "export const ScreenSharingSource = {\n\tWINDOW: 'window',\n\tSCREEN: 'screen',\n} as const;\n\nexport type ScreenSharingSourceType =\n\t(typeof ScreenSharingSource)[keyof typeof ScreenSharingSource];\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/errors/PeerConnectionPartnerIsNotDefinedError.ts",
"content": "export default class PeerConnectionPartnerIsNotDefinedError extends Error {\n\tconstructor() {\n\t\tsuper('partner should be defined!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(\n\t\t\tthis,\n\t\t\tPeerConnectionPartnerIsNotDefinedError.prototype,\n\t\t);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/errors/PeerConnectionPeerIsNullError.ts",
"content": "export default class PeerConnectionPeerIsNullError extends Error {\n\tconstructor() {\n\t\tsuper('peer of PeerConnection should not be null!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, PeerConnectionPeerIsNullError.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/errors/PeerConnectionSocketNotDefined.ts",
"content": "export default class PeerConnectionSocketNotDefined extends Error {\n\tconstructor() {\n\t\tsuper('socket should be defined!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, PeerConnectionSocketNotDefined.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/errors/PeerConnectionUserIsNotDefinedError.ts",
"content": "export default class PeerConnectionUserIsNotDefinedError extends Error {\n\tconstructor() {\n\t\tsuper('user should be defined!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, PeerConnectionUserIsNotDefinedError.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/index.ts",
"content": "import shortId from 'shortid';\nimport SimplePeer from 'simple-peer';\nimport { UAParser } from 'ua-parser-js';\nimport type { Socket } from 'socket.io-client';\nimport type { LocalPeerUser } from '../../../../common/LocalPeerUser';\nimport type { SendEncryptedMessagePayload } from '../../../../common/SendEncryptedMessagePayload';\nimport { connect as connectSocket } from '../../utils/socket';\nimport {\n\tprepare as prepareMessage,\n\ttype ProcessedPayload,\n} from '../../utils/message';\nimport setSdpMediaBitrate from './setSdpMediaBitrate';\nimport VideoAutoQualityOptimizer from '../VideoAutoQualityOptimizer';\nimport {\n\tVideoQuality,\n\ttype VideoQualityType,\n} from '../VideoAutoQualityOptimizer/VideoQualityEnum';\nimport { prepareDataMessageToChangeQuality } from './simplePeerDataMessages';\nimport { VIDEO_QUALITY_TO_DECIMAL } from './../../constants/appConstants';\nimport { ErrorMessage } from '../../components/ErrorDialog/ErrorMessageEnum';\nimport peerConnectionHandleSocket from './peerConnectionHandleSocket';\nimport peerConnectionHandlePeer from './peerConnectionHandlePeer';\nimport peerConnectionReceiveEncryptedMessage from './peerConnectionReceiveEncryptedMessage';\nimport startSocketConnectedCheckingLoop from './startSocketConnectedCheckingLoop';\nimport NullUser from './NullUser';\nimport PeerConnectionUIHandler from './PeerConnectionUIHandler';\nimport setAndShowErrorDialogMessage from './setAndShowErrorDialogMessage';\nimport PeerConnectionSocketNotDefined from './errors/PeerConnectionSocketNotDefined';\nimport PeerConnectionUserIsNotDefinedError from './errors/PeerConnectionUserIsNotDefinedError';\nimport PeerConnectionPartnerIsNotDefinedError from './errors/PeerConnectionPartnerIsNotDefinedError';\n\nexport default class PeerConnection {\n\troomId: string;\n\n\tsocket: Socket | null = null;\n\n\tuser: LocalPeerUser = NullUser;\n\n\tpartner: PartnerPeerUser = NullUser;\n\n\tpeer: null | SimplePeer.Instance = null;\n\n\tmyDeviceDetails: DeviceDetails = {\n\t\tmyIP: '',\n\t\tmyOS: '',\n\t\tmyDeviceType: '',\n\t\tmyBrowser: '',\n\t\tmyRoomId: '',\n\t};\n\n\tsetUrlCallback: (url: MediaStream | null) => void;\n\n\tuaParser: UAParser;\n\n\tscreenSharingSourceType: string | undefined = undefined;\n\n\tvideoQuality: VideoQualityType = VideoQuality.Q_100_PERCENT;\n\n\tvideoAutoQualityOptimizer: VideoAutoQualityOptimizer;\n\n\tisStreamStarted: boolean = false;\n\n\tUIHandler: PeerConnectionUIHandler;\n\n\tbeforeunloadHandler: (() => void) | null = null;\n\n\tconnectionCheckInterval: NodeJS.Timeout | null = null;\n\n\treconnectTimeout: NodeJS.Timeout | null = null;\n\n\tgetMyIPTimeout: NodeJS.Timeout | null = null;\n\n\tsetMyDeviceDetailsTimeout: NodeJS.Timeout | null = null;\n\n\tconstructor(\n\t\troomId: string,\n\t\tsetUrlCallback: (url: MediaStream | null) => void,\n\t\tvideoAutoQualityOptimizer: VideoAutoQualityOptimizer,\n\t\tUIHandler: PeerConnectionUIHandler,\n\t) {\n\t\tthis.setUrlCallback = setUrlCallback;\n\t\tthis.videoAutoQualityOptimizer = videoAutoQualityOptimizer;\n\t\tthis.UIHandler = UIHandler;\n\t\tthis.roomId = roomId;\n\t\tthis.socket = connectSocket(this.roomId);\n\t\tthis.uaParser = new UAParser();\n\t\tthis.createUserAndInitSocket();\n\t\tthis.createPeer();\n\n\t\tif (!this.roomId || this.roomId === '') {\n\t\t\tsetAndShowErrorDialogMessage(this, ErrorMessage.NOT_ALLOWED);\n\t\t}\n\n\t\tthis.connectionCheckInterval = startSocketConnectedCheckingLoop(this);\n\t}\n\n\tsetVideoQuality(videoQuality: VideoQualityType) {\n\t\tthis.videoQuality = videoQuality;\n\t\tthis.videoQualityChangedCallback();\n\t}\n\n\tvideoQualityChangedCallback() {\n\t\tif (!this.peer) return;\n\t\tif (this.videoQuality === VideoQuality.Q_AUTO) {\n\t\t\tthis.peer.send(prepareDataMessageToChangeQuality(1));\n\t\t} else {\n\t\t\tthis.peer.send(\n\t\t\t\tprepareDataMessageToChangeQuality(\n\t\t\t\t\tVIDEO_QUALITY_TO_DECIMAL[this.videoQuality],\n\t\t\t\t),\n\t\t\t);\n\t\t}\n\t}\n\n\tstopStream() {\n\t\t// stop the video stream by clearing the stream URL\n\t\tthis.setUrlCallback(null);\n\t\tthis.isStreamStarted = false;\n\n\t\t// destroy the peer connection\n\t\tif (this.peer) {\n\t\t\ttry {\n\t\t\t\tthis.peer.removeAllListeners();\n\t\t\t\tthis.peer.destroy();\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error destroying peer connection:', error);\n\t\t\t}\n\t\t\tthis.peer = null;\n\t\t}\n\t}\n\n\tdestroy() {\n\t\t// remove window event listener\n\t\tif (this.beforeunloadHandler) {\n\t\t\twindow.removeEventListener('beforeunload', this.beforeunloadHandler);\n\t\t\tthis.beforeunloadHandler = null;\n\t\t}\n\n\t\t// clear connection check interval\n\t\tif (this.connectionCheckInterval) {\n\t\t\tclearInterval(this.connectionCheckInterval);\n\t\t\tthis.connectionCheckInterval = null;\n\t\t}\n\n\t\t// clear all timeouts\n\t\tif (this.reconnectTimeout) {\n\t\t\tclearTimeout(this.reconnectTimeout);\n\t\t\tthis.reconnectTimeout = null;\n\t\t}\n\t\tif (this.getMyIPTimeout) {\n\t\t\tclearTimeout(this.getMyIPTimeout);\n\t\t\tthis.getMyIPTimeout = null;\n\t\t}\n\t\tif (this.setMyDeviceDetailsTimeout) {\n\t\t\tclearTimeout(this.setMyDeviceDetailsTimeout);\n\t\t\tthis.setMyDeviceDetailsTimeout = null;\n\t\t}\n\n\t\t// stop stream if started\n\t\tif (this.isStreamStarted) {\n\t\t\tthis.stopStream();\n\t\t}\n\n\t\t// cleanup peer connection\n\t\tif (this.peer) {\n\t\t\ttry {\n\t\t\t\tthis.peer.removeAllListeners();\n\t\t\t\tthis.peer.destroy();\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error destroying peer:', error);\n\t\t\t}\n\t\t\tthis.peer = null;\n\t\t}\n\n\t\t// cleanup socket\n\t\tif (this.socket) {\n\t\t\tthis.socket.removeAllListeners();\n\t\t\tthis.socket.disconnect();\n\t\t}\n\t}\n\n\tcreatePeer() {\n\t\t// cleanup existing peer before creating new one\n\t\tif (this.peer) {\n\t\t\ttry {\n\t\t\t\tthis.peer.removeAllListeners();\n\t\t\t\tthis.peer.destroy();\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error cleaning up existing peer:', error);\n\t\t\t}\n\t\t\tthis.peer = null;\n\t\t}\n\n\t\t// When we are testing with jest, SimplePeer() can not be created, so we just return\n\t\tconst peer = new SimplePeer({\n\t\t\tinitiator: false,\n\t\t\tconfig: { iceServers: [] },\n\t\t\tsdpTransform: (sdp) => {\n\t\t\t\tlet newSDP = sdp;\n\t\t\t\tnewSDP = setSdpMediaBitrate(\n\t\t\t\t\tnewSDP as unknown as string,\n\t\t\t\t\t'video',\n\t\t\t\t\t500000,\n\t\t\t\t) as unknown as typeof sdp;\n\t\t\t\treturn newSDP;\n\t\t\t},\n\t\t});\n\n\t\tthis.peer = peer;\n\t\tthis.peer.on('error', (e) => {\n\t\t\tconsole.error('error in simple peer happened!');\n\t\t\tconsole.error(e);\n\t\t\tsetAndShowErrorDialogMessage(this, ErrorMessage.WEBRTC_ERROR);\n\t\t});\n\t\tpeerConnectionHandlePeer(this);\n\t}\n\n\tinitApp(user: LocalPeerUser, myIP: string) {\n\t\tif (!this.socket) {\n\t\t\tthrow new PeerConnectionSocketNotDefined();\n\t\t}\n\t\tthis.socket.emit('USER_ENTER', {\n\t\t\tusername: user.username,\n\t\t\tip: myIP, // TODO: remove as it is not used\n\t\t});\n\t}\n\n\tcreateUser() {\n\t\treturn new Promise((resolve) => {\n\t\t\tconst username = shortId.generate();\n\t\t\tconst id = shortId.generate();\n\n\t\t\tresolve({\n\t\t\t\tusername,\n\t\t\t\tid,\n\t\t\t});\n\t\t});\n\t}\n\n\tsendEncryptedMessage(payload: SendEncryptedMessagePayload) {\n\t\tconst socket = this.socket;\n\t\tif (!socket) {\n\t\t\tthrow new PeerConnectionSocketNotDefined();\n\t\t}\n\t\tif (!this.user || this.user === NullUser) {\n\t\t\tthrow new PeerConnectionUserIsNotDefinedError();\n\t\t}\n\t\tif (!this.partner || this.partner === NullUser) {\n\t\t\tthrow new PeerConnectionPartnerIsNotDefinedError();\n\t\t}\n\t\tif (!this.partner.username) return;\n\t\tprepareMessage(payload, this.user).then((msg: ProcessedPayload) => {\n\t\t\tsocket.emit('MESSAGE', msg.toSend);\n\t\t});\n\t}\n\n\treceiveEncryptedMessage(payload: ReceiveEncryptedMessagePayload) {\n\t\tpeerConnectionReceiveEncryptedMessage(this, payload);\n\t}\n\n\tcreateUserAndInitSocket() {\n\t\tconst socket = this.socket;\n\t\tif (!socket) {\n\t\t\tthrow new PeerConnectionSocketNotDefined();\n\t\t}\n\n\t\tsocket.removeAllListeners();\n\n\t\tconst userCreatedCallback = (createdUser: LocalPeerUser) => {\n\t\t\tthis.user = createdUser;\n\n\t\t\tpeerConnectionHandleSocket(this);\n\n\t\t\tthis.beforeunloadHandler = () => {\n\t\t\t\tsocket.emit('USER_DISCONNECT');\n\t\t\t};\n\t\t\twindow.addEventListener('beforeunload', this.beforeunloadHandler);\n\t\t};\n\n\t\tthis.createUser().then((newUser: LocalPeerUser) =>\n\t\t\tuserCreatedCallback(newUser),\n\t\t);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/mocks/INPUTtestWindowNavigatorUserAgent.ts",
"content": "export const INPUTtestWindowNavigatorUserAgent =\n\t'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36';\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/mocks/INPUTvideo500000testSdpMediaBitrate.ts",
"content": "export const INPUTtestSdpMediaBitrate = `\nv=0\no=- 5730467698688819135 2 IN IP4 127.0.0.1\ns=-\nt=0 0\na=group:BUNDLE 0 1\na=msid-semantic: WMS\nm=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 121 127 120 125 107 108 109 114 115 116\nc=IN IP4 0.0.0.0\na=rtcp:9 IN IP4 0.0.0.0\na=ice-ufrag:PY+h\na=ice-pwd:eYoy9PHXsilgXAbK7MSIMUJc\na=ice-options:trickle\na=fingerprint:sha-256 73:1D:63:11:3E:2F:A4:AA:ED:37:4B:D6:0F:A2:60:7A:A3:9B:EC:D9:D1:AF:C3:E0:53:59:4A:E1:D5:A9:EF:2D\na=setup:active\na=mid:0\na=extmap:1 urn:ietf:params:rtp-hdrext:toffset\na=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\na=extmap:3 urn:3gpp:video-orientation\na=extmap:4 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01\na=extmap:5 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay\na=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type\na=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing\na=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/color-space\na=extmap:9 urn:ietf:params:rtp-hdrext:sdes:mid\na=extmap:10 urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id\na=extmap:11 urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id\na=recvonly\na=rtcp-mux\na=rtcp-rsize\na=rtpmap:96 VP8/90000\na=rtcp-fb:96 goog-remb\na=rtcp-fb:96 transport-cc\na=rtcp-fb:96 ccm fir\na=rtcp-fb:96 nack\na=rtcp-fb:96 nack pli\na=rtpmap:97 rtx/90000\na=fmtp:97 apt=96\na=rtpmap:98 VP9/90000\na=rtcp-fb:98 goog-remb\na=rtcp-fb:98 transport-cc\na=rtcp-fb:98 ccm fir\na=rtcp-fb:98 nack\na=rtcp-fb:98 nack pli\na=fmtp:98 profile-id=0\na=rtpmap:99 rtx/90000\na=fmtp:99 apt=98\na=rtpmap:100 VP9/90000\na=rtcp-fb:100 goog-remb\na=rtcp-fb:100 transport-cc\na=rtcp-fb:100 ccm fir\na=rtcp-fb:100 nack\na=rtcp-fb:100 nack pli\na=fmtp:100 profile-id=2\na=rtpmap:101 rtx/90000\na=fmtp:101 apt=100\na=rtpmap:102 H264/90000\na=rtcp-fb:102 goog-remb\na=rtcp-fb:102 transport-cc\na=rtcp-fb:102 ccm fir\na=rtcp-fb:102 nack\na=rtcp-fb:102 nack pli\na=fmtp:102 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f\na=rtpmap:121 rtx/90000\na=fmtp:121 apt=102\na=rtpmap:127 H264/90000\na=rtcp-fb:127 goog-remb\na=rtcp-fb:127 transport-cc\na=rtcp-fb:127 ccm fir\na=rtcp-fb:127 nack\na=rtcp-fb:127 nack pli\na=fmtp:127 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f\na=rtpmap:120 rtx/90000\na=fmtp:120 apt=127\na=rtpmap:125 H264/90000\na=rtcp-fb:125 goog-remb\na=rtcp-fb:125 transport-cc\na=rtcp-fb:125 ccm fir\na=rtcp-fb:125 nack\na=rtcp-fb:125 nack pli\na=fmtp:125 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f\na=rtpmap:107 rtx/90000\na=fmtp:107 apt=125\na=rtpmap:108 H264/90000\na=rtcp-fb:108 goog-remb\na=rtcp-fb:108 transport-cc\na=rtcp-fb:108 ccm fir\na=rtcp-fb:108 nack\na=rtcp-fb:108 nack pli\na=fmtp:108 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f\na=rtpmap:109 rtx/90000\na=fmtp:109 apt=108\na=rtpmap:114 red/90000\na=rtpmap:115 rtx/90000\na=fmtp:115 apt=114\na=rtpmap:116 ulpfec/90000\nm=application 9 UDP/DTLS/SCTP webrtc-datachannel\nc=IN IP4 0.0.0.0\nb=AS:30\na=ice-ufrag:PY+h\na=ice-pwd:eYoy9PHXsilgXAbK7MSIMUJc\na=ice-options:trickle\na=fingerprint:sha-256 73:1D:63:11:3E:2F:A4:AA:ED:37:4B:D6:0F:A2:60:7A:A3:9B:EC:D9:D1:AF:C3:E0:53:59:4A:E1:D5:A9:EF:2D\na=setup:active\na=mid:1\na=sctp-port:5000\na=max-message-size:262144\n`;\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/mocks/OUTPUTDeviceDetailsFromUAParsed.ts",
"content": "export const OUTPUTDeviceDetailsFromUAParsed: DeviceDetails = {\n\tmyBrowser: 'Chrome 87.0.4280.88',\n\tmyDeviceType: 'computer',\n\tmyIP: '123.123.123.123',\n\tmyOS: 'Mac OS 10.15.6',\n\tmyRoomId: 'asdf2314',\n};\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/mocks/OUTPUTvideo500000testSdpMediaBitrate.ts",
"content": "export const OUTPUTtestSdpMediaBitrate = `\nv=0\no=- 5730467698688819135 2 IN IP4 127.0.0.1\ns=-\nt=0 0\na=group:BUNDLE 0 1\na=msid-semantic: WMS\nm=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 121 127 120 125 107 108 109 114 115 116\nc=IN IP4 0.0.0.0\nb=AS:500000\na=rtcp:9 IN IP4 0.0.0.0\na=ice-ufrag:PY+h\na=ice-pwd:eYoy9PHXsilgXAbK7MSIMUJc\na=ice-options:trickle\na=fingerprint:sha-256 73:1D:63:11:3E:2F:A4:AA:ED:37:4B:D6:0F:A2:60:7A:A3:9B:EC:D9:D1:AF:C3:E0:53:59:4A:E1:D5:A9:EF:2D\na=setup:active\na=mid:0\na=extmap:1 urn:ietf:params:rtp-hdrext:toffset\na=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\na=extmap:3 urn:3gpp:video-orientation\na=extmap:4 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01\na=extmap:5 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay\na=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type\na=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing\na=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/color-space\na=extmap:9 urn:ietf:params:rtp-hdrext:sdes:mid\na=extmap:10 urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id\na=extmap:11 urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id\na=recvonly\na=rtcp-mux\na=rtcp-rsize\na=rtpmap:96 VP8/90000\na=rtcp-fb:96 goog-remb\na=rtcp-fb:96 transport-cc\na=rtcp-fb:96 ccm fir\na=rtcp-fb:96 nack\na=rtcp-fb:96 nack pli\na=rtpmap:97 rtx/90000\na=fmtp:97 apt=96\na=rtpmap:98 VP9/90000\na=rtcp-fb:98 goog-remb\na=rtcp-fb:98 transport-cc\na=rtcp-fb:98 ccm fir\na=rtcp-fb:98 nack\na=rtcp-fb:98 nack pli\na=fmtp:98 profile-id=0\na=rtpmap:99 rtx/90000\na=fmtp:99 apt=98\na=rtpmap:100 VP9/90000\na=rtcp-fb:100 goog-remb\na=rtcp-fb:100 transport-cc\na=rtcp-fb:100 ccm fir\na=rtcp-fb:100 nack\na=rtcp-fb:100 nack pli\na=fmtp:100 profile-id=2\na=rtpmap:101 rtx/90000\na=fmtp:101 apt=100\na=rtpmap:102 H264/90000\na=rtcp-fb:102 goog-remb\na=rtcp-fb:102 transport-cc\na=rtcp-fb:102 ccm fir\na=rtcp-fb:102 nack\na=rtcp-fb:102 nack pli\na=fmtp:102 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f\na=rtpmap:121 rtx/90000\na=fmtp:121 apt=102\na=rtpmap:127 H264/90000\na=rtcp-fb:127 goog-remb\na=rtcp-fb:127 transport-cc\na=rtcp-fb:127 ccm fir\na=rtcp-fb:127 nack\na=rtcp-fb:127 nack pli\na=fmtp:127 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f\na=rtpmap:120 rtx/90000\na=fmtp:120 apt=127\na=rtpmap:125 H264/90000\na=rtcp-fb:125 goog-remb\na=rtcp-fb:125 transport-cc\na=rtcp-fb:125 ccm fir\na=rtcp-fb:125 nack\na=rtcp-fb:125 nack pli\na=fmtp:125 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f\na=rtpmap:107 rtx/90000\na=fmtp:107 apt=125\na=rtpmap:108 H264/90000\na=rtcp-fb:108 goog-remb\na=rtcp-fb:108 transport-cc\na=rtcp-fb:108 ccm fir\na=rtcp-fb:108 nack\na=rtcp-fb:108 nack pli\na=fmtp:108 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f\na=rtpmap:109 rtx/90000\na=fmtp:109 apt=108\na=rtpmap:114 red/90000\na=rtpmap:115 rtx/90000\na=fmtp:115 apt=114\na=rtpmap:116 ulpfec/90000\nm=application 9 UDP/DTLS/SCTP webrtc-datachannel\nc=IN IP4 0.0.0.0\nb=AS:30\na=ice-ufrag:PY+h\na=ice-pwd:eYoy9PHXsilgXAbK7MSIMUJc\na=ice-options:trickle\na=fingerprint:sha-256 73:1D:63:11:3E:2F:A4:AA:ED:37:4B:D6:0F:A2:60:7A:A3:9B:EC:D9:D1:AF:C3:E0:53:59:4A:E1:D5:A9:EF:2D\na=setup:active\na=mid:1\na=sctp-port:5000\na=max-message-size:262144\n`;\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/peerConnectionHandlePeer.ts",
"content": "import {\n\tprepareDataMessageToChangeQuality,\n\tprepareDataMessageToGetSharingSourceType,\n} from './simplePeerDataMessages';\nimport { VideoQuality } from '../VideoAutoQualityOptimizer/VideoQualityEnum';\nimport { ErrorMessage } from '../../components/ErrorDialog/ErrorMessageEnum';\nimport PeerConnectionPeerIsNullError from './errors/PeerConnectionPeerIsNullError';\nimport { ScreenSharingSource } from './ScreenSharingSourceEnum';\n\nexport function getSharingShourceType(peerConnection: PeerConnection) {\n\ttry {\n\t\tpeerConnection.peer?.send(prepareDataMessageToGetSharingSourceType());\n\t} catch (e) {\n\t\tconsole.log(e);\n\t}\n}\n\nexport default (peerConnection: PeerConnection) => {\n\tif (peerConnection.peer === null) {\n\t\tthrow new PeerConnectionPeerIsNullError();\n\t}\n\tpeerConnection.peer.on('stream', (stream) => {\n\t\tpeerConnection.setUrlCallback(stream);\n\n\t\tsetTimeout(() => {\n\t\t\tpeerConnection.videoAutoQualityOptimizer.setGoodQualityCallback(() => {\n\t\t\t\tif (peerConnection.videoQuality === VideoQuality.Q_AUTO) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tpeerConnection.peer?.send(prepareDataMessageToChangeQuality(1));\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tconsole.log(e);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tpeerConnection.videoAutoQualityOptimizer.setHalfQualityCallbak(() => {\n\t\t\t\tif (peerConnection.videoQuality === VideoQuality.Q_AUTO) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tpeerConnection.peer?.send(prepareDataMessageToChangeQuality(0.5));\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tconsole.log(e);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}, 1000);\n\n\t\tpeerConnection.videoAutoQualityOptimizer.startOptimizationLoop();\n\n\t\tsetTimeout(getSharingShourceType, 1000, peerConnection);\n\n\t\tpeerConnection.isStreamStarted = true;\n\n\t\t// if any transient error dialog was shown earlier, close it now\n\t\ttry {\n\t\t\tpeerConnection.UIHandler.setIsErrorDialogOpen(false);\n\t\t\tpeerConnection.UIHandler.errorDialogMessage = ErrorMessage.UNKNOWN_ERROR;\n\t\t} catch (_) {\n\t\t\t// ignore\n\t\t}\n\t});\n\n\tpeerConnection.peer.on('signal', (data) => {\n\t\t// fired when webrtc done preparation to start call on peerConnection machine\n\t\tpeerConnection.sendEncryptedMessage({\n\t\t\ttype: 'CALL_ACCEPTED',\n\t\t\tpayload: {\n\t\t\t\tsignalData: data,\n\t\t\t},\n\t\t});\n\t});\n\n\tpeerConnection.peer.on('data', (data) => {\n\t\tconst dataJSON = JSON.parse(data);\n\n\t\tif (dataJSON.type === 'screen_sharing_source_type') {\n\t\t\tpeerConnection.screenSharingSourceType = dataJSON.payload.value;\n\t\t\tif (\n\t\t\t\tpeerConnection.screenSharingSourceType === ScreenSharingSource.SCREEN ||\n\t\t\t\tpeerConnection.screenSharingSourceType === ScreenSharingSource.WINDOW\n\t\t\t) {\n\t\t\t\tpeerConnection.UIHandler.setScreenSharingSourceTypeCallback(\n\t\t\t\t\tpeerConnection.screenSharingSourceType,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t});\n};\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/peerConnectionHandleSocket.ts",
"content": "import { ErrorMessage } from '../../components/ErrorDialog/ErrorMessageEnum';\nimport {\n\tgetBrowserFromUAParser,\n\tgetDeviceTypeFromUAParser,\n\tgetOSFromUAParser,\n} from '../../utils/userAgentParserHelpers';\nimport PeerConnectionSocketNotDefined from './errors/PeerConnectionSocketNotDefined';\nimport setAndShowErrorDialogMessage from './setAndShowErrorDialogMessage';\n\nexport function getMyIPCallback(\n\tpeerConnection: PeerConnection,\n\tip: string,\n\tuserAgent: string,\n) {\n\tpeerConnection.myDeviceDetails.myIP = ip;\n\n\tpeerConnection.uaParser.setUA(userAgent);\n\tpeerConnection.myDeviceDetails.myOS = getOSFromUAParser(\n\t\tpeerConnection.uaParser,\n\t);\n\tpeerConnection.myDeviceDetails.myDeviceType = getDeviceTypeFromUAParser(\n\t\tpeerConnection.uaParser,\n\t);\n\tpeerConnection.myDeviceDetails.myBrowser = getBrowserFromUAParser(\n\t\tpeerConnection.uaParser,\n\t);\n\n\tpeerConnection.initApp(peerConnection.user, ip);\n}\n\nexport default (peerConnection: PeerConnection) => {\n\tlet disconnectCount = 0;\n\tlet isAllowed = true;\n\tconst socket = peerConnection.socket;\n\tif (!socket) {\n\t\tthrow new PeerConnectionSocketNotDefined();\n\t}\n\n\tsocket.on('disconnect', () => {\n\t\tdisconnectCount++;\n\t\t// handle disconnect even when stream is started - stop stream and show error\n\t\tif (peerConnection.isStreamStarted && disconnectCount >= 1) {\n\t\t\tpeerConnection.stopStream();\n\t\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.DISCONNECTED);\n\t\t\treturn;\n\t\t}\n\t\t// for pre-stream disconnects, wait for sustained disconnection before showing error\n\t\tif (disconnectCount > 6 && isAllowed) {\n\t\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.DISCONNECTED);\n\t\t}\n\t});\n\n\tsocket.on('connect', () => {\n\t\tlet ipCallbackReceived = false;\n\n\t\t// clear any existing reconnect timeout\n\t\tif (peerConnection.reconnectTimeout) {\n\t\t\tclearTimeout(peerConnection.reconnectTimeout);\n\t\t}\n\n\t\tpeerConnection.reconnectTimeout = setTimeout(() => {\n\t\t\tif (!ipCallbackReceived && isAllowed) {\n\t\t\t\tconsole.log('GET_MY_IP callback not received, reconnecting socket');\n\t\t\t\tsocket.disconnect();\n\t\t\t\tsocket.connect();\n\t\t\t}\n\t\t}, 2500); // 2 seconds timeout to wait for callback\n\n\t\t// clear any existing getMyIP timeout\n\t\tif (peerConnection.getMyIPTimeout) {\n\t\t\tclearTimeout(peerConnection.getMyIPTimeout);\n\t\t}\n\n\t\tpeerConnection.getMyIPTimeout = setTimeout(() => {\n\t\t\tif (!isAllowed) return;\n\t\t\tsocket.emit('GET_MY_IP', (ip: string) => {\n\t\t\t\tconsole.log('GET_MY_IP', ip);\n\t\t\t\tipCallbackReceived = true;\n\t\t\t\tif (peerConnection.reconnectTimeout) {\n\t\t\t\t\tclearTimeout(peerConnection.reconnectTimeout);\n\t\t\t\t\tpeerConnection.reconnectTimeout = null;\n\t\t\t\t}\n\t\t\t\tgetMyIPCallback(peerConnection, ip, window.navigator.userAgent);\n\t\t\t});\n\t\t}, 500);\n\t});\n\n\tsocket.on('NOT_ALLOWED', () => {\n\t\tisAllowed = false;\n\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.NOT_ALLOWED);\n\t});\n\n\tsocket.on('USER_ENTER', (payload: { users: PartnerPeerUser[] }) => {\n\t\tif (!isAllowed) return;\n\t\tconst filteredPartner = payload.users.filter((v) => {\n\t\t\treturn peerConnection.user.username !== v.username;\n\t\t});\n\n\t\tpeerConnection.partner = filteredPartner[0];\n\n\t\tif (!peerConnection.partner) return;\n\n\t\tpeerConnection.sendEncryptedMessage({\n\t\t\ttype: 'DEVICE_DETAILS',\n\t\t\t// TODO: add deviceIP in this payload\n\t\t\tpayload: {\n\t\t\t\tos: peerConnection.myDeviceDetails.myOS,\n\t\t\t\tdeviceType: peerConnection.myDeviceDetails.myDeviceType,\n\t\t\t\tbrowser: peerConnection.myDeviceDetails.myBrowser,\n\t\t\t\tdeviceScreenWidth: window.screen.width,\n\t\t\t\tdeviceScreenHeight: window.screen.height,\n\t\t\t},\n\t\t});\n\n\t\tpeerConnection.sendEncryptedMessage({\n\t\t\ttype: 'GET_APP_LANGUAGE',\n\t\t\tpayload: {},\n\t\t});\n\n\t\t// clear any existing timeout\n\t\tif (peerConnection.setMyDeviceDetailsTimeout) {\n\t\t\tclearTimeout(peerConnection.setMyDeviceDetailsTimeout);\n\t\t}\n\n\t\tpeerConnection.setMyDeviceDetailsTimeout = setTimeout(() => {\n\t\t\tpeerConnection.UIHandler.setMyDeviceDetails({\n\t\t\t\tmyIP: peerConnection.myDeviceDetails.myIP,\n\t\t\t\tmyOS: peerConnection.myDeviceDetails.myOS,\n\t\t\t\tmyBrowser: peerConnection.myDeviceDetails.myBrowser,\n\t\t\t\tmyDeviceType: peerConnection.myDeviceDetails.myDeviceType,\n\t\t\t\tmyRoomId: peerConnection.roomId,\n\t\t\t});\n\t\t}, 100);\n\t});\n\n\t// peerConnection.socket.on('USER_EXIT', (payload: any) => {\n\t// // peerConnection.props.receiveUnencryptedMessage('USER_EXIT', payload);\n\t// });\n\n\tsocket.on('MESSAGE', (payload: ReceiveEncryptedMessagePayload) => {\n\t\tif (!isAllowed) return;\n\t\tpeerConnection.receiveEncryptedMessage(payload);\n\t});\n\n\tsocket.on('ROOM_LOCKED', () => {\n\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.DENY_TO_CONNECT);\n\t});\n};\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/peerConnectionReceiveEncryptedMessage.ts",
"content": "import { ErrorMessage } from '../../components/ErrorDialog/ErrorMessageEnum';\nimport { process as processMessage } from '../../utils/message';\nimport NullUser from './NullUser';\nimport PeerConnectionUserIsNotDefinedError from './errors/PeerConnectionUserIsNotDefinedError';\nimport setAndShowErrorDialogMessage from './setAndShowErrorDialogMessage';\n\nexport default async (\n\tpeerConnection: PeerConnection,\n\tpayload: ReceiveEncryptedMessagePayload,\n) => {\n\tif (peerConnection.user === NullUser) {\n\t\tthrow new PeerConnectionUserIsNotDefinedError();\n\t}\n\tconst message = await processMessage(payload);\n\t// const message = payload as any;\n\tif (message.type === 'CALL_USER') {\n\t\tpeerConnection.peer?.signal(message.payload.signalData);\n\t}\n\tif (message.type === 'DENY_TO_CONNECT') {\n\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.DENY_TO_CONNECT);\n\t}\n\tif (message.type === 'DISCONNECT_BY_HOST_MACHINE_USER') {\n\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.DISCONNECTED);\n\t}\n\tif (message.type === 'ALLOWED_TO_CONNECT') {\n\t\tpeerConnection.UIHandler.hostAllowedToConnectCallback();\n\t}\n\tif (message.type === 'APP_LANGUAGE') {\n\t\tpeerConnection.UIHandler.setAppLanguageCallback(message.payload.value);\n\t}\n};\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/setAndShowErrorDialogMessage.ts",
"content": "import {\n\tErrorMessage,\n\ttype ErrorMessageType,\n} from '../../components/ErrorDialog/ErrorMessageEnum';\n\nexport default (\n\tpeerConnection: PeerConnection,\n\terrorMessage: ErrorMessageType,\n) => {\n\t// allow showing disconnect errors even when stream is started\n\tconst isDisconnectError = errorMessage === ErrorMessage.DISCONNECTED;\n\tif (peerConnection.isStreamStarted && !isDisconnectError) {\n\t\t// avoid flashing an error if the stream already started (except for disconnect errors)\n\t\treturn;\n\t}\n\tif (\n\t\tpeerConnection.UIHandler.errorDialogMessage ===\n\t\t\tErrorMessage.UNKNOWN_ERROR ||\n\t\tisDisconnectError\n\t) {\n\t\tpeerConnection.UIHandler.setDialogErrorMessageCallback(errorMessage);\n\t\tpeerConnection.UIHandler.setIsErrorDialogOpen(true);\n\t\tpeerConnection.UIHandler.errorDialogMessage = errorMessage;\n\t}\n};\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/setSdpMediaBitrate.ts",
"content": "export default (sdp: string, mediaType: string, bitrate: number) => {\n\tconst sdpLines = sdp.split('\\n');\n\tlet mediaLineIndex = -1;\n\tconst mediaLine = `m=${mediaType}`;\n\tlet bitrateLineIndex = -1;\n\tconst bitrateLine = `b=AS:${bitrate}`;\n\tmediaLineIndex = sdpLines.findIndex((line) => line.startsWith(mediaLine));\n\n\t// If we find a line matching “m={mediaType}”\n\tif (mediaLineIndex && mediaLineIndex < sdpLines.length) {\n\t\t// Skip the media line\n\t\tbitrateLineIndex = mediaLineIndex + 1;\n\n\t\t// Skip both i=* and c=* lines (bandwidths limiters have to come afterwards)\n\t\twhile (\n\t\t\tsdpLines[bitrateLineIndex].startsWith('i=') ||\n\t\t\tsdpLines[bitrateLineIndex].startsWith('c=')\n\t\t) {\n\t\t\tbitrateLineIndex += 1;\n\t\t}\n\n\t\tif (sdpLines[bitrateLineIndex].startsWith('b=')) {\n\t\t\t// If the next line is a b=* line, replace it with our new bandwidth\n\t\t\tsdpLines[bitrateLineIndex] = bitrateLine;\n\t\t} else {\n\t\t\t// Otherwise insert a new bitrate line.\n\t\t\tsdpLines.splice(bitrateLineIndex, 0, bitrateLine);\n\t\t}\n\t}\n\n\t// Then return the updated sdp content as a string\n\treturn sdpLines.join('\\n');\n};\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/simplePeerDataMessages.ts",
"content": "export function prepareDataMessageToChangeQuality(q: number) {\n\treturn `\n {\n \"type\": \"set_video_quality\",\n \"payload\": {\n \"value\": ${q}\n }\n }\n `;\n}\n\nexport function prepareDataMessageToGetSharingSourceType() {\n\treturn `\n {\n \"type\": \"get_sharing_source_type\",\n \"payload\": {\n }\n }\n `;\n}\n"
},
{
"path": "src/client-viewer/src/features/PeerConnection/startSocketConnectedCheckingLoop/index.ts",
"content": "import PeerConnection from '..';\nimport { ErrorMessage } from '../../../components/ErrorDialog/ErrorMessageEnum';\nimport setAndShowErrorDialogMessage from '../setAndShowErrorDialogMessage';\n\nexport default (peerConnection: PeerConnection): NodeJS.Timeout => {\n\tlet disconnectedStreak = 0;\n\tlet pingTimeout: NodeJS.Timeout | null = null;\n\n\tconst checkConnection = () => {\n\t\tconst socket = peerConnection.socket;\n\t\tif (!socket) {\n\t\t\tdisconnectedStreak++;\n\t\t\thandleDisconnection();\n\t\t\treturn;\n\t\t}\n\t\tconst isSocketConnected = !!socket.connected;\n\n\t\tif (isSocketConnected) {\n\t\t\t// perform explicit ping/pong check to verify server is alive\n\t\t\ttry {\n\t\t\t\tif (pingTimeout) {\n\t\t\t\t\tclearTimeout(pingTimeout);\n\t\t\t\t}\n\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t// ping timeout - server didn't respond\n\t\t\t\t\tdisconnectedStreak++;\n\t\t\t\t\thandleDisconnection();\n\t\t\t\t}, 3000);\n\n\t\t\t\tpingTimeout = timeout;\n\n\t\t\t\tsocket.emit('PING', (response: string) => {\n\t\t\t\t\tif (pingTimeout) {\n\t\t\t\t\t\tclearTimeout(pingTimeout);\n\t\t\t\t\t\tpingTimeout = null;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (response === 'PONG') {\n\t\t\t\t\t\tdisconnectedStreak = 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdisconnectedStreak++;\n\t\t\t\t\t\thandleDisconnection();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch {\n\t\t\t\t// socket error during ping\n\t\t\t\tdisconnectedStreak++;\n\t\t\t\thandleDisconnection();\n\t\t\t}\n\t\t} else {\n\t\t\t// socket is not connected\n\t\t\tdisconnectedStreak++;\n\t\t\thandleDisconnection();\n\t\t}\n\t};\n\n\tconst handleDisconnection = () => {\n\t\t// show error and stop stream after sustained disconnection\n\t\tif (disconnectedStreak >= 3) {\n\t\t\t// stop the video stream\n\t\t\tif (peerConnection.isStreamStarted) {\n\t\t\t\tpeerConnection.stopStream();\n\t\t\t}\n\t\t\t// show error dialog (now allows showing even when stream was started)\n\t\t\tsetAndShowErrorDialogMessage(peerConnection, ErrorMessage.DISCONNECTED);\n\t\t}\n\t};\n\n\treturn setInterval(checkConnection, 5000);\n};\n"
},
{
"path": "src/client-viewer/src/features/VideoAutoQualityOptimizer/VideoQualityEnum.ts",
"content": "export const VideoQuality = {\n\tQ_AUTO: 'Auto',\n\tQ_25_PERCENT: '25%',\n\tQ_40_PERCENT: '40%',\n\tQ_60_PERCENT: '60%',\n\tQ_80_PERCENT: '80%',\n\tQ_100_PERCENT: '100%',\n} as const;\n\nexport type VideoQualityType = (typeof VideoQuality)[keyof typeof VideoQuality];\n"
},
{
"path": "src/client-viewer/src/features/VideoAutoQualityOptimizer/errors/CanvasNotDefinedError.ts",
"content": "export default class CanvasNotDefinedError extends Error {\n\tconstructor() {\n\t\tsuper('internal variable of canvas DOM element should be defined!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, CanvasNotDefinedError.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/VideoAutoQualityOptimizer/errors/ImageDataIsUndefinedError.ts",
"content": "export default class ImageDataIsUndefinedError extends Error {\n\tconstructor() {\n\t\tsuper('imageData retrieved is undefined!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, ImageDataIsUndefinedError.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/VideoAutoQualityOptimizer/errors/VideoDimensionsAreWrongError.ts",
"content": "export default class VideoDimensionsAreWrongError extends Error {\n\tconstructor() {\n\t\tsuper('video dimensions are wrong, neither width nor height can be zero!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, VideoDimensionsAreWrongError.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/VideoAutoQualityOptimizer/errors/VideoNotDefinedError.ts",
"content": "export default class VideoNotDefinedError extends Error {\n\tconstructor() {\n\t\tsuper('internal variable of video DOM element should be defined!');\n\t\t// Set the prototype explicitly.\n\t\tObject.setPrototypeOf(this, VideoNotDefinedError.prototype);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/features/VideoAutoQualityOptimizer/index.ts",
"content": "import { COMPARISON_CANVAS_ID } from './../../constants/appConstants';\nimport pixelmatch from 'pixelmatch';\nimport { PLAYER_WRAPPER_ID } from '../../constants/appConstants';\nimport CanvasNotDefinedError from './errors/CanvasNotDefinedError';\nimport VideoDimensionsAreWrongError from './errors/VideoDimensionsAreWrongError';\nimport VideoNotDefinedError from './errors/VideoNotDefinedError';\nimport ImageDataIsUndefinedError from './errors/ImageDataIsUndefinedError';\n\nexport const CANVAS_SCALE_MULTIPLIER = 0.125; // 1/8 of original canvas size, to speed up calculations\nexport const MISMATCH_PERCENT_THRESHOLD = 0.1;\n\nexport default class VideoAutoQualityOptimizer {\n\tvideo: undefined | HTMLVideoElement;\n\n\tcanvas: undefined | HTMLCanvasElement;\n\n\tprevFrame: undefined | ImageData;\n\n\tlargeMismatchFramesCount = 0;\n\n\tisRequestedHalfQuality = false;\n\n\tgoodQualityCallback = () => {\n\t\t// noop until callbacks are provided\n\t};\n\n\thalfQualityCallbak = () => {\n\t\t// noop until callbacks are provided\n\t};\n\n\tsetGoodQualityCallback(callback: () => void) {\n\t\tthis.goodQualityCallback = callback;\n\t}\n\n\tsetHalfQualityCallbak(callback: () => void) {\n\t\tthis.halfQualityCallbak = callback;\n\t}\n\n\tstartOptimizationLoop() {\n\t\tthis.prepareCanvasAndVideo();\n\t\tsetInterval(() => {\n\t\t\ttry {\n\t\t\t\tthis.doFrameComparisonAndQualityOptimization();\n\t\t\t} catch (e) {\n\t\t\t\t// some errors may be thrown here, better ignore them in production\n\t\t\t\tif (process.env.NODE_ENV === 'development') {\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tdoFrameComparisonAndQualityOptimization() {\n\t\tthis.validateBeforeCalculations();\n\t\tthis.clearCanvas();\n\t\tthis.scaleCanvas();\n\t\tthis.drawVideoFrameToCanvas();\n\t\tconst imageData = this.getImageDataFromCanvas();\n\n\t\tif (!imageData) {\n\t\t\tthrow new ImageDataIsUndefinedError();\n\t\t}\n\t\tif (!this.prevFrame) {\n\t\t\tthis.prevFrame = imageData;\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tconst mismatchInPercent =\n\t\t\t\tthis.getPreviousAndCurrentFrameMismatchInPercent(imageData);\n\t\t\tthis.handleFramesMismatch(mismatchInPercent);\n\t\t} catch (_e) {\n\t\t\t// usually frames size mismatch thrown here, so can be ignored as it happens\n\t\t\t// often when changing sharing window size\n\t\t\t// so logging this error may be not necessary\n\t\t}\n\n\t\tthis.prevFrame = imageData;\n\t}\n\n\tfindAndSetVideoInternalVariable(document: Document) {\n\t\tthis.video = document.querySelector(\n\t\t\t`#${PLAYER_WRAPPER_ID} > video`,\n\t\t) as HTMLVideoElement;\n\t}\n\n\tfindAndSetCanvasInternalVariable(document: Document) {\n\t\tthis.canvas = document.querySelector(\n\t\t\t`#${COMPARISON_CANVAS_ID}`,\n\t\t) as HTMLCanvasElement;\n\t}\n\n\tprepareCanvasAndVideo() {\n\t\tsetTimeout(() => {\n\t\t\tthis.findAndSetVideoInternalVariable(document);\n\t\t\tthis.findAndSetCanvasInternalVariable(document);\n\t\t}, 1000);\n\t}\n\n\tclearCanvas() {\n\t\tthis.canvas\n\t\t\t?.getContext('2d')\n\t\t\t?.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tvalidateVideoWidthAndHeight() {\n\t\tif (this.video?.videoWidth === 0 || this.video?.videoHeight === 0) {\n\t\t\tthrow new VideoDimensionsAreWrongError();\n\t\t}\n\t}\n\n\tvalidateBeforeCalculations() {\n\t\tthis.validateVideoWidthAndHeight();\n\t\tthis.validateVideoIsDefined();\n\t\tthis.validateCanvasIsDefined();\n\t}\n\n\tvalidateVideoIsDefined() {\n\t\tif (!this.video) {\n\t\t\tthrow new VideoNotDefinedError();\n\t\t}\n\t}\n\n\tvalidateCanvasIsDefined() {\n\t\tif (!this.canvas) {\n\t\t\tthrow new CanvasNotDefinedError();\n\t\t}\n\t}\n\n\tscaleCanvas() {\n\t\tif (!this.canvas || !this.video) return;\n\t\tthis.canvas.width = this.video.videoWidth * CANVAS_SCALE_MULTIPLIER;\n\t\tthis.canvas.height = this.video.videoHeight * CANVAS_SCALE_MULTIPLIER;\n\t}\n\n\tdrawVideoFrameToCanvas() {\n\t\tif (!this.video) return;\n\t\tthis.canvas\n\t\t\t?.getContext('2d')\n\t\t\t?.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tgetImageDataFromCanvas() {\n\t\treturn this.canvas\n\t\t\t?.getContext('2d')\n\t\t\t?.getImageData(0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tgetNumberOfMismatchedPixels(imageData: ImageData) {\n\t\tif (!this.canvas || !this.canvas.width || !this.prevFrame) return 0;\n\t\treturn pixelmatch(\n\t\t\tthis.prevFrame.data,\n\t\t\timageData.data,\n\t\t\tundefined,\n\t\t\tthis.canvas.width,\n\t\t\tthis.canvas.height,\n\t\t\t{ threshold: 0.1 },\n\t\t);\n\t}\n\n\tgetPreviousAndCurrentFrameMismatchInPercent(imageData: ImageData) {\n\t\tif (!this.canvas) return 0;\n\t\treturn (\n\t\t\tthis.getNumberOfMismatchedPixels(imageData) /\n\t\t\t(this.canvas.width * this.canvas.height)\n\t\t);\n\t}\n\n\thandleFramesMismatch(mismatchInPercent: number) {\n\t\tif (mismatchInPercent < 0.1 && this.largeMismatchFramesCount > 0) {\n\t\t\tthis.largeMismatchFramesCount -= 1;\n\t\t} else if (mismatchInPercent < 0.1 && this.isRequestedHalfQuality) {\n\t\t\tthis.largeMismatchFramesCount = 0;\n\t\t\tthis.isRequestedHalfQuality = false;\n\t\t\tthis.goodQualityCallback();\n\t\t} else if (mismatchInPercent >= 0.1 && !this.isRequestedHalfQuality) {\n\t\t\tif (this.largeMismatchFramesCount < 3) {\n\t\t\t\tthis.largeMismatchFramesCount += 1;\n\t\t\t} else {\n\t\t\t\tthis.halfQualityCallbak();\n\t\t\t\tthis.isRequestedHalfQuality = true;\n\t\t\t}\n\t\t}\n\t}\n\n\tisLowMismatchPercent(mismatchInPercent: number) {\n\t\treturn mismatchInPercent < MISMATCH_PERCENT_THRESHOLD;\n\t}\n\n\tisHighMismatchPercent(mismatchInPercent: number) {\n\t\treturn mismatchInPercent >= MISMATCH_PERCENT_THRESHOLD;\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/index.css",
"content": "@import \"normalize.css\";\n@import \"@blueprintjs/core/lib/css/blueprint.css\";\n/*@import \"@blueprintjs/icons/lib/css/blueprint-icons.css\";*/\n\nbody {\n\tmargin: 0;\n\tfont-family:\n\t\t-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\",\n\t\t\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n\tfont-family:\n\t\tsource-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n\n/*:root {*/\n/* font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;*/\n/* line-height: 1.5;*/\n/* font-weight: 400;*/\n\n/* color-scheme: light dark;*/\n/* color: rgba(255, 255, 255, 0.87);*/\n/* background-color: #242424;*/\n\n/* font-synthesis: none;*/\n/* text-rendering: optimizeLegibility;*/\n/* -webkit-font-smoothing: antialiased;*/\n/* -moz-osx-font-smoothing: grayscale;*/\n/*}*/\n\n/*a {*/\n/* font-weight: 500;*/\n/* color: #646cff;*/\n/* text-decoration: inherit;*/\n/*}*/\n/*a:hover {*/\n/* color: #535bf2;*/\n/*}*/\n\n/*body {*/\n/* margin: 0;*/\n/* display: flex;*/\n/* place-items: center;*/\n/* min-width: 320px;*/\n/* min-height: 100vh;*/\n/*}*/\n\n/*h1 {*/\n/* font-size: 3.2em;*/\n/* line-height: 1.1;*/\n/*}*/\n\n/*button {*/\n/* border-radius: 8px;*/\n/* border: 1px solid transparent;*/\n/* padding: 0.6em 1.2em;*/\n/* font-size: 1em;*/\n/* font-weight: 500;*/\n/* font-family: inherit;*/\n/* background-color: #1a1a1a;*/\n/* cursor: pointer;*/\n/* transition: border-color 0.25s;*/\n/*}*/\n/*button:hover {*/\n/* border-color: #646cff;*/\n/*}*/\n/*button:focus,*/\n/*button:focus-visible {*/\n/* outline: 4px auto -webkit-focus-ring-color;*/\n/*}*/\n\n/*@media (prefers-color-scheme: light) {*/\n/* :root {*/\n/* color: #213547;*/\n/* background-color: #ffffff;*/\n/* }*/\n/* a:hover {*/\n/* color: #747bff;*/\n/* }*/\n/* button {*/\n/* background-color: #f9f9f9;*/\n/* }*/\n/*}*/\n\n.rounded-pill-button {\n\tborder-radius: 9999px;\n}\n"
},
{
"path": "src/client-viewer/src/main.tsx",
"content": "import { initializeGARequestInterceptor } from './utils/gaRequestInterceptor';\n\n// initialize GA request interceptor immediately to block requests before consent\ninitializeGARequestInterceptor();\n\nimport { StrictMode, Suspense } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport './index.css';\nimport './config/i18n';\nimport App from './App.tsx';\nimport { AppContextProvider } from './providers/AppContextProvider';\nimport LoadingScreen from './components/LoadingScreen';\n\ncreateRoot(document.getElementById('root')!).render(\n\t\n\t\t}>\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t,\n);\n"
},
{
"path": "src/client-viewer/src/providers/AppContextProvider/index.tsx",
"content": "import React, { useState } from 'react';\n\ninterface AppContextInterface {\n\tappLanguage: string;\n\tsetAppLanguageHook: (val: string) => void;\n}\n\nconst defaultAppContextValue = {\n\tappLanguage: 'en',\n\tsetAppLanguageHook: () => {\n\t\t// noop default\n\t},\n};\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const AppContext = React.createContext(\n\tdefaultAppContextValue,\n);\n\nexport const AppContextProvider: React.FC<{ children: React.ReactNode }> = ({\n\tchildren,\n}) => {\n\tconst [appLanguage, setAppLanguage] = useState('en');\n\n\tconst setAppLanguageHook = (newLang: string) => {\n\t\tsetAppLanguage(newLang);\n\t};\n\n\tconst value = {\n\t\tappLanguage,\n\t\tsetAppLanguageHook,\n\t};\n\n\treturn {children};\n};\n"
},
{
"path": "src/client-viewer/src/utils/ProcessedMessage.d.ts",
"content": "type CallUserMessageWithPayload = {\n\ttype: 'CALL_USER';\n\tpayload: {\n\t\tsignalData: string;\n\t};\n};\n\ntype DeviceDetailsMessageWithPayload = {\n\ttype: 'DEVICE_DETAILS';\n\tpayload: {\n\t\tsocketID: string;\n\t\tdeviceType: { type: string };\n\t\tos: { name: string; version: string };\n\t\tbrowser: { name: string; version: string; major: string };\n\t\tdeviceScreenWidth: number;\n\t\tdeviceScreenHeight: number;\n\t};\n};\n\ntype DenyToConnectMessageWithPayload = {\n\ttype: 'DENY_TO_CONNECT';\n\tpayload: {};\n};\n\ntype DisconnectByHostMachineUserMessageWithPayload = {\n\ttype: 'DISCONNECT_BY_HOST_MACHINE_USER';\n\tpayload: {};\n};\n\ntype AllowedToConnectMessageWithPayload = {\n\ttype: 'ALLOWED_TO_CONNECT';\n\tpayload: {};\n};\n\ntype AppLanguageMessageWithPayload = {\n\ttype: 'APP_LANGUAGE';\n\tpayload: {\n\t\tvalue: string;\n\t};\n};\n\ntype ProcessedMessage =\n\t| CallUserMessageWithPayload\n\t| DeviceDetailsMessageWithPayload\n\t| DenyToConnectMessageWithPayload\n\t| DisconnectByHostMachineUserMessageWithPayload\n\t| AllowedToConnectMessageWithPayload\n\t| AppLanguageMessageWithPayload;\n"
},
{
"path": "src/client-viewer/src/utils/analytics.ts",
"content": "// google analytics type declarations\ndeclare global {\n\tinterface Window {\n\t\tdataLayer: unknown[];\n\t\tgtag: (...args: unknown[]) => void;\n\t}\n}\n\nconst CONSENT_KEY = 'deskreen_ga_consent';\nconst GA_TAG_PLACEHOLDER = '%VITE_CLIENT_VIEWER_GA_TAG%';\nconst CLIENT_VIEWER_VERSION_PLACEHOLDER = '%VITE_CLIENT_VIEWER_VERSION%';\n\nlet versionEventSent = false;\n\ntype AnalyticsEventParams = Record;\n\nexport type ConsentStatus = 'accepted' | 'opted-out' | null;\n\nexport function getConsentStatus(): ConsentStatus {\n\tif (typeof window === 'undefined') {\n\t\treturn null;\n\t}\n\n\tconst stored = localStorage.getItem(CONSENT_KEY);\n\tif (stored === 'accepted' || stored === 'opted-out') {\n\t\treturn stored;\n\t}\n\treturn null;\n}\n\nexport function setConsentStatus(status: 'accepted' | 'opted-out'): void {\n\tif (typeof window === 'undefined') {\n\t\treturn;\n\t}\n\tlocalStorage.setItem(CONSENT_KEY, status);\n}\n\nexport function clearConsentStatus(): void {\n\tif (typeof window === 'undefined') {\n\t\treturn;\n\t}\n\tlocalStorage.removeItem(CONSENT_KEY);\n}\n\nexport function loadGoogleAnalytics(gaTagId: string): void {\n\tif (\n\t\ttypeof window === 'undefined' ||\n\t\t!gaTagId ||\n\t\tgaTagId === GA_TAG_PLACEHOLDER\n\t) {\n\t\treturn;\n\t}\n\n\t// check if GA script is already loaded in DOM (from HTML)\n\tconst existingScript = document.querySelector(\n\t\t'script[src*=\"googletagmanager.com/gtag/js\"]',\n\t);\n\tif (existingScript && window.dataLayer && typeof window.gtag === 'function') {\n\t\t// GA is already loaded from HTML, just update consent and send page_view\n\t\tconst consentStatus = getConsentStatus();\n\t\tconst analyticsConsent =\n\t\t\tconsentStatus === 'accepted' ? 'granted' : 'denied';\n\n\t\t// update consent mode\n\t\twindow.gtag('consent', 'update', {\n\t\t\tanalytics_storage: analyticsConsent,\n\t\t\tad_storage: 'denied',\n\t\t});\n\n\t\t// if user has consent, wait for GA to be ready and send page_view\n\t\tif (analyticsConsent === 'granted') {\n\t\t\twaitForGAReady(() => {\n\t\t\t\tsendPageView();\n\t\t\t});\n\t\t}\n\t\treturn;\n\t}\n\n\t// initialize dataLayer BEFORE gtag.js loads (required for consent mode)\n\twindow.dataLayer = window.dataLayer || [];\n\n\tfunction gtag(...args: unknown[]) {\n\t\twindow.dataLayer.push(args);\n\t}\n\n\twindow.gtag = gtag;\n\tgtag('js', new Date());\n\n\t// set default consent mode to denied (will be updated when user accepts)\n\tgtag('consent', 'default', {\n\t\tanalytics_storage: 'denied',\n\t\tad_storage: 'denied',\n\t});\n\n\t// load gtag.js script\n\tconst script = document.createElement('script');\n\tscript.async = true;\n\tscript.src = `https://www.googletagmanager.com/gtag/js?id=${gaTagId}`;\n\n\tscript.onload = () => {\n\t\t// configure GA after script loads\n\t\tconst consentStatus = getConsentStatus();\n\t\tconst analyticsConsent =\n\t\t\tconsentStatus === 'accepted' ? 'granted' : 'denied';\n\n\t\twindow.gtag('config', gaTagId, {\n\t\t\tsend_page_view: true,\n\t\t\tanonymize_ip: true,\n\t\t});\n\n\t\t// update consent mode based on current status\n\t\twindow.gtag('consent', 'update', {\n\t\t\tanalytics_storage: analyticsConsent,\n\t\t\tad_storage: 'denied',\n\t\t});\n\n\t\t// send page_view event after script is ready\n\t\tif (analyticsConsent === 'granted') {\n\t\t\twaitForGAReady(() => {\n\t\t\t\tsendPageView();\n\t\t\t});\n\t\t}\n\t};\n\n\tdocument.head.appendChild(script);\n}\n\nfunction sendPageView(): void {\n\tif (typeof window === 'undefined' || !window.gtag) {\n\t\treturn;\n\t}\n\n\t// send page_view event with proper GA4 format for real-time tracking\n\ttrackAnalyticsEvent('page_view', {\n\t\tpage_title: document.title,\n\t\tpage_location: window.location.href,\n\t\tpage_path: window.location.pathname,\n\t});\n\n\tsendClientViewerVersionEvent();\n}\n\nfunction waitForGAReady(callback: () => void): void {\n\tif (typeof window === 'undefined') {\n\t\treturn;\n\t}\n\n\t// check if GA script exists\n\tconst script = document.querySelector(\n\t\t'script[src*=\"googletagmanager.com/gtag/js\"]',\n\t);\n\n\tif (!script || typeof window.gtag !== 'function' || !window.dataLayer) {\n\t\t// if script not loaded yet, wait for window load event\n\t\tif (document.readyState === 'loading') {\n\t\t\twindow.addEventListener('load', () => {\n\t\t\t\tsetTimeout(callback, 300);\n\t\t\t});\n\t\t} else {\n\t\t\t// document already loaded, wait a bit for GA to initialize\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (typeof window.gtag === 'function' && window.dataLayer) {\n\t\t\t\t\tcallback();\n\t\t\t\t}\n\t\t\t}, 300);\n\t\t}\n\t\treturn;\n\t}\n\n\t// script exists, wait for GA to fully initialize\n\t// if document is already loaded, GA should be ready soon\n\tif (document.readyState === 'complete') {\n\t\tsetTimeout(callback, 200);\n\t} else {\n\t\t// wait for document to finish loading first\n\t\twindow.addEventListener('load', () => {\n\t\t\tsetTimeout(callback, 200);\n\t\t});\n\t}\n}\n\nexport function updateAnalyticsConsent(consentStatus: ConsentStatus): void {\n\tif (typeof window === 'undefined' || !window.dataLayer) {\n\t\treturn;\n\t}\n\n\tconst analyticsConsent = consentStatus === 'accepted' ? 'granted' : 'denied';\n\n\t// update consent mode\n\tif (window.gtag) {\n\t\twindow.gtag('consent', 'update', {\n\t\t\tanalytics_storage: analyticsConsent,\n\t\t\tad_storage: 'denied',\n\t\t});\n\n\t\t// if consent granted, send page_view event after GA is ready\n\t\tif (analyticsConsent === 'granted') {\n\t\t\twaitForGAReady(() => {\n\t\t\t\tsendPageView();\n\t\t\t});\n\t\t}\n\t} else {\n\t\t// queue consent update if gtag not ready yet\n\t\twindow.dataLayer.push([\n\t\t\t'consent',\n\t\t\t'update',\n\t\t\t{\n\t\t\t\tanalytics_storage: analyticsConsent,\n\t\t\t\tad_storage: 'denied',\n\t\t\t},\n\t\t]);\n\n\t\t// if consent granted, queue page_view for when GA loads\n\t\tif (analyticsConsent === 'granted') {\n\t\t\twaitForGAReady(() => {\n\t\t\t\tsendPageView();\n\t\t\t});\n\t\t}\n\t}\n}\n\nexport function getGaTagIdFromMeta(): string | null {\n\tconst metaTag = document.querySelector('meta[name=\"ga-tag-id\"]');\n\tif (metaTag) {\n\t\treturn metaTag.getAttribute('content');\n\t}\n\n\t// fallback: try to extract from any existing script tags\n\tconst scripts = document.querySelectorAll(\n\t\t'script[src*=\"googletagmanager.com/gtag/js\"]',\n\t);\n\tfor (const script of scripts) {\n\t\tconst src = script.getAttribute('src');\n\t\tif (src) {\n\t\t\tconst match = src.match(/id=([^&]+)/);\n\t\t\tif (match && match[1] !== GA_TAG_PLACEHOLDER) {\n\t\t\t\treturn match[1];\n\t\t\t}\n\t\t}\n\t}\n\n\treturn null;\n}\n\nfunction getClientViewerVersion(): string | null {\n\tif (typeof window === 'undefined') {\n\t\treturn null;\n\t}\n\n\tconst metaTag = document.querySelector('meta[name=\"client-viewer-version\"]');\n\tif (!metaTag) {\n\t\treturn null;\n\t}\n\n\tconst version = metaTag.getAttribute('content');\n\tif (!version || version === CLIENT_VIEWER_VERSION_PLACEHOLDER) {\n\t\treturn null;\n\t}\n\n\treturn version;\n}\n\nfunction sendClientViewerVersionEvent(): void {\n\tif (versionEventSent || typeof window === 'undefined' || !window.gtag) {\n\t\treturn;\n\t}\n\n\tconst version = getClientViewerVersion();\n\tif (!version) {\n\t\treturn;\n\t}\n\n\tversionEventSent = true;\n\ttrackAnalyticsEvent('client_viewer_version', {\n\t\tclient_viewer_version: version,\n\t});\n}\n\nexport function trackAnalyticsEvent(\n\teventName: string,\n\tparams: AnalyticsEventParams = {},\n): void {\n\tif (typeof window === 'undefined') {\n\t\treturn;\n\t}\n\n\tif (typeof window.gtag === 'function') {\n\t\twindow.gtag('event', eventName, params);\n\t\treturn;\n\t}\n\n\tif (\n\t\twindow.dataLayer &&\n\t\ttypeof (window.dataLayer as unknown[]).push === 'function'\n\t) {\n\t\t(window.dataLayer as unknown[]).push(['event', eventName, params]);\n\t}\n}\n"
},
{
"path": "src/client-viewer/src/utils/gaRequestInterceptor.ts",
"content": "import { getConsentStatus } from './analytics';\n\nconst GA_DOMAINS = [\n\t'google-analytics.com',\n\t'googletagmanager.com',\n\t'google-analytics.co',\n\t'analytics.google.com',\n\t'region1.google-analytics.com',\n\t'region2.google-analytics.com',\n\t'region3.google-analytics.com',\n\t'region4.google-analytics.com',\n\t'region5.google-analytics.com',\n\t'region6.google-analytics.com',\n\t'region7.google-analytics.com',\n\t'region8.google-analytics.com',\n\t'region9.google-analytics.com',\n\t'region10.google-analytics.com',\n\t'region11.google-analytics.com',\n\t'region12.google-analytics.com',\n\t'region13.google-analytics.com',\n\t'region14.google-analytics.com',\n\t'region15.google-analytics.com',\n\t'region16.google-analytics.com',\n\t'region17.google-analytics.com',\n\t'region18.google-analytics.com',\n\t'region19.google-analytics.com',\n\t'region20.google-analytics.com',\n];\n\nfunction isGoogleAnalyticsUrl(url: string): boolean {\n\ttry {\n\t\tconst urlObj = new URL(url, window.location.href);\n\t\tconst hostname = urlObj.hostname.toLowerCase();\n\t\treturn GA_DOMAINS.some(\n\t\t\t(domain) => hostname === domain || hostname.endsWith('.' + domain),\n\t\t);\n\t} catch {\n\t\treturn false;\n\t}\n}\n\nfunction shouldBlockRequest(): boolean {\n\tconst consentStatus = getConsentStatus();\n\treturn consentStatus !== 'accepted';\n}\n\nfunction isLocalIP(ip: string): boolean {\n\tconst parts = ip.split('.').map(Number);\n\tif (parts.length !== 4 || parts.some(isNaN)) {\n\t\treturn false;\n\t}\n\n\t// 127.0.0.0/8\n\tif (parts[0] === 127) {\n\t\treturn true;\n\t}\n\n\t// 10.0.0.0/8\n\tif (parts[0] === 10) {\n\t\treturn true;\n\t}\n\n\t// 172.16.0.0/12\n\tif (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) {\n\t\treturn true;\n\t}\n\n\t// 192.168.0.0/16\n\tif (parts[0] === 192 && parts[1] === 168) {\n\t\treturn true;\n\t}\n\n\treturn false;\n}\n\nfunction sanitizeGAUrl(url: string): string {\n\ttry {\n\t\tconst urlObj = new URL(url);\n\n\t\t// only sanitize /g/collect requests\n\t\tif (!urlObj.pathname.includes('/g/collect')) {\n\t\t\treturn url;\n\t\t}\n\n\t\tconst dlParam = urlObj.searchParams.get('dl');\n\t\tif (!dlParam) {\n\t\t\treturn url;\n\t\t}\n\n\t\ttry {\n\t\t\tconst dlUrl = new URL(decodeURIComponent(dlParam));\n\t\t\tconst hostname = dlUrl.hostname;\n\n\t\t\t// check if hostname is a local IP address\n\t\t\tif (isLocalIP(hostname)) {\n\t\t\t\turlObj.searchParams.set('dl', encodeURIComponent('http://localhost'));\n\t\t\t\treturn urlObj.toString();\n\t\t\t}\n\t\t} catch {\n\t\t\t// if dl parameter is not a valid URL, leave it as is\n\t\t}\n\n\t\treturn url;\n\t} catch {\n\t\treturn url;\n\t}\n}\n\nlet originalFetch: typeof fetch;\nlet originalXHROpen: typeof XMLHttpRequest.prototype.open;\nlet originalXHRSend: typeof XMLHttpRequest.prototype.send;\nlet originalSendBeacon: typeof navigator.sendBeacon;\n\nfunction interceptFetch(): void {\n\tif (typeof window === 'undefined' || window.fetch === originalFetch) {\n\t\treturn;\n\t}\n\n\toriginalFetch = window.fetch;\n\n\twindow.fetch = function (input: RequestInfo | URL, init?: RequestInit) {\n\t\tlet url =\n\t\t\ttypeof input === 'string'\n\t\t\t\t? input\n\t\t\t\t: input instanceof Request\n\t\t\t\t\t? input.url\n\t\t\t\t\t: '';\n\n\t\tif (isGoogleAnalyticsUrl(url)) {\n\t\t\tif (shouldBlockRequest()) {\n\t\t\t\treturn Promise.reject(\n\t\t\t\t\tnew Error(\n\t\t\t\t\t\t'Google Analytics request blocked: user consent not granted',\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t\t// sanitize URL before making request\n\t\t\turl = sanitizeGAUrl(url);\n\t\t\t// if input was a Request object, we need to create a new one with sanitized URL\n\t\t\tif (input instanceof Request) {\n\t\t\t\tinput = new Request(url, init || input);\n\t\t\t} else {\n\t\t\t\tinput = url;\n\t\t\t}\n\t\t}\n\n\t\treturn originalFetch.call(this, input, init);\n\t};\n}\n\nfunction interceptXMLHttpRequest(): void {\n\tif (typeof window === 'undefined' || !window.XMLHttpRequest) {\n\t\treturn;\n\t}\n\n\tconst XHR = window.XMLHttpRequest;\n\tif (XHR.prototype.open === originalXHROpen) {\n\t\treturn;\n\t}\n\n\toriginalXHROpen = XHR.prototype.open;\n\toriginalXHRSend = XHR.prototype.send;\n\n\tXHR.prototype.open = function (...args: unknown[]) {\n\t\tlet url = args[1] as string | URL;\n\t\tlet urlString = typeof url === 'string' ? url : url.toString();\n\n\t\tif (isGoogleAnalyticsUrl(urlString)) {\n\t\t\tif (shouldBlockRequest()) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'Google Analytics request blocked: user consent not granted',\n\t\t\t\t);\n\t\t\t}\n\t\t\t// sanitize URL before making request\n\t\t\turlString = sanitizeGAUrl(urlString);\n\t\t\turl = urlString;\n\t\t\targs[1] = url;\n\t\t}\n\n\t\t(this as XMLHttpRequest & { _interceptedUrl?: string })._interceptedUrl =\n\t\t\turlString;\n\n\t\treturn (originalXHROpen as (...args: unknown[]) => void).apply(this, args);\n\t};\n\n\tXHR.prototype.send = function (...args) {\n\t\tconst url =\n\t\t\t(this as XMLHttpRequest & { _interceptedUrl?: string })._interceptedUrl ||\n\t\t\t'';\n\n\t\tif (isGoogleAnalyticsUrl(url) && shouldBlockRequest()) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn originalXHRSend.apply(this, args);\n\t};\n}\n\nfunction interceptSendBeacon(): void {\n\tif (\n\t\ttypeof window === 'undefined' ||\n\t\t!navigator.sendBeacon ||\n\t\tnavigator.sendBeacon === originalSendBeacon\n\t) {\n\t\treturn;\n\t}\n\n\toriginalSendBeacon = navigator.sendBeacon;\n\n\tnavigator.sendBeacon = function (\n\t\turl: string | URL,\n\t\tdata?: BodyInit | null,\n\t): boolean {\n\t\tlet urlString = typeof url === 'string' ? url : url.toString();\n\n\t\tif (isGoogleAnalyticsUrl(urlString)) {\n\t\t\tif (shouldBlockRequest()) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\t// sanitize URL before making request\n\t\t\turlString = sanitizeGAUrl(urlString);\n\t\t\turl = urlString;\n\t\t}\n\n\t\treturn originalSendBeacon.call(this, url, data);\n\t};\n}\n\nexport function initializeGARequestInterceptor(): void {\n\tif (typeof window === 'undefined') {\n\t\treturn;\n\t}\n\n\tinterceptFetch();\n\tinterceptXMLHttpRequest();\n\tinterceptSendBeacon();\n}\n"
},
{
"path": "src/client-viewer/src/utils/message.ts",
"content": "import type { LocalPeerUser } from '../../../common/LocalPeerUser';\nimport type { SendEncryptedMessagePayload } from '../../../common/SendEncryptedMessagePayload';\n\nexport interface ProcessedPayload {\n\ttoSend: ProcessedMessage;\n\toriginal: ProcessedMessage;\n}\n\nexport const process = (\n\tpayload: ReceiveEncryptedMessagePayload,\n): Promise => Promise.resolve(payload as ProcessedMessage);\n\nexport const prepare = (\n\tpayload: SendEncryptedMessagePayload,\n\tuser: LocalPeerUser,\n): Promise =>\n\tnew Promise((resolve) => {\n\t\tconst myUsername = user.username;\n\t\tconst myId = user.id;\n\t\tconst innerPayload = { ...payload.payload } as Record;\n\t\tif (typeof (innerPayload as { text?: unknown }).text === 'string') {\n\t\t\t(innerPayload as { text?: string }).text = encodeURI(\n\t\t\t\t(innerPayload as { text?: string }).text as string,\n\t\t\t);\n\t\t}\n\t\tconst jsonToSend = {\n\t\t\t...payload,\n\t\t\tpayload: {\n\t\t\t\t...innerPayload,\n\t\t\t\tsender: myId,\n\t\t\t\tusername: myUsername,\n\t\t\t},\n\t\t} as ProcessedMessage;\n\n\t\tresolve({\n\t\t\ttoSend: jsonToSend,\n\t\t\toriginal: jsonToSend,\n\t\t});\n\t});\n"
},
{
"path": "src/client-viewer/src/utils/playerFullscreen.ts",
"content": "import screenfull from 'screenfull';\nimport { PLAYER_WRAPPER_ID } from '../constants/appConstants';\n\ntype LegacyFullscreenElement = HTMLElement & {\n\twebkitRequestFullscreen?: () => Promise | void;\n\twebkitRequestFullScreen?: () => Promise | void;\n\tmozRequestFullScreen?: () => Promise | void;\n\tmsRequestFullscreen?: () => Promise | void;\n};\n\ntype LegacyFullscreenDocument = Document & {\n\twebkitExitFullscreen?: () => Promise | void;\n\tmozCancelFullScreen?: () => Promise | void;\n\tmsExitFullscreen?: () => Promise | void;\n\twebkitFullscreenElement?: Element | null;\n\tmozFullScreenElement?: Element | null;\n\tmsFullscreenElement?: Element | null;\n};\n\ntype IOSVideoElement = HTMLVideoElement & {\n\twebkitEnterFullscreen?: () => void;\n\twebkitExitFullscreen?: () => void;\n\twebkitSupportsFullscreen?: boolean;\n\twebkitDisplayingFullscreen?: boolean;\n};\n\ntype Unsubscribe = () => void;\n\nconst fullscreenEventNames = [\n\t'fullscreenchange',\n\t'webkitfullscreenchange',\n\t'MSFullscreenChange',\n\t'mozfullscreenchange',\n];\n\nconst getPlayerContainer = (): HTMLElement | null => {\n\treturn document.getElementById(PLAYER_WRAPPER_ID);\n};\n\nconst getPlayerVideo = (): IOSVideoElement | null => {\n\tconst container = getPlayerContainer();\n\tif (!container) return null;\n\tconst maybeVideo = container.querySelector('video');\n\tif (!(maybeVideo instanceof HTMLVideoElement)) return null;\n\treturn maybeVideo as IOSVideoElement;\n};\n\nconst requestStandardFullscreen = (element: HTMLElement | null): boolean => {\n\tif (!element) return false;\n\tconst target = element as LegacyFullscreenElement;\n\tconst request =\n\t\ttarget.requestFullscreen ||\n\t\ttarget.webkitRequestFullscreen ||\n\t\ttarget.webkitRequestFullScreen ||\n\t\ttarget.mozRequestFullScreen ||\n\t\ttarget.msRequestFullscreen;\n\tif (typeof request !== 'function') return false;\n\trequest.call(target);\n\treturn true;\n};\n\nconst exitStandardFullscreen = (): boolean => {\n\tconst doc = document as LegacyFullscreenDocument;\n\tconst exit =\n\t\tdoc.exitFullscreen ||\n\t\tdoc.webkitExitFullscreen ||\n\t\tdoc.mozCancelFullScreen ||\n\t\tdoc.msExitFullscreen;\n\tif (typeof exit !== 'function') return false;\n\texit.call(doc);\n\treturn true;\n};\n\nexport const isPlayerFullscreen = (): boolean => {\n\tconst doc = document as LegacyFullscreenDocument;\n\tif (\n\t\tdoc.fullscreenElement ||\n\t\tdoc.webkitFullscreenElement ||\n\t\tdoc.mozFullScreenElement ||\n\t\tdoc.msFullscreenElement\n\t) {\n\t\treturn true;\n\t}\n\tconst video = getPlayerVideo();\n\tif (!video) return false;\n\tif (typeof video.webkitDisplayingFullscreen === 'boolean') {\n\t\treturn video.webkitDisplayingFullscreen;\n\t}\n\treturn false;\n};\n\nexport const enterPlayerFullscreen = (): boolean => {\n\tconst container = getPlayerContainer();\n\tif (container && screenfull.isEnabled) {\n\t\tscreenfull.request(container);\n\t\treturn true;\n\t}\n\tif (requestStandardFullscreen(container)) return true;\n\tconst video = getPlayerVideo();\n\tif (requestStandardFullscreen(video)) return true;\n\tif (video && typeof video.webkitEnterFullscreen === 'function') {\n\t\tif (\n\t\t\ttypeof video.webkitSupportsFullscreen === 'boolean' &&\n\t\t\t!video.webkitSupportsFullscreen\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\t\tvideo.webkitEnterFullscreen();\n\t\treturn true;\n\t}\n\treturn false;\n};\n\nexport const exitPlayerFullscreen = (): boolean => {\n\tif (screenfull.isEnabled && screenfull.isFullscreen) {\n\t\tscreenfull.exit();\n\t\treturn true;\n\t}\n\tif (exitStandardFullscreen()) return true;\n\tconst video = getPlayerVideo();\n\tif (video && typeof video.webkitExitFullscreen === 'function') {\n\t\tif (\n\t\t\ttypeof video.webkitDisplayingFullscreen === 'boolean' &&\n\t\t\t!video.webkitDisplayingFullscreen\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\t\tvideo.webkitExitFullscreen();\n\t\treturn true;\n\t}\n\treturn false;\n};\n\nexport const togglePlayerFullscreen = (): 'entered' | 'exited' | 'failed' => {\n\tif (isPlayerFullscreen()) {\n\t\treturn exitPlayerFullscreen() ? 'exited' : 'failed';\n\t}\n\treturn enterPlayerFullscreen() ? 'entered' : 'failed';\n};\n\nexport const subscribeToPlayerFullscreenChange = (\n\tlistener: (isFullscreen: boolean) => void,\n): Unsubscribe => {\n\tconst handleChange = () => listener(isPlayerFullscreen());\n\tconst handleVideoBegin = () => listener(true);\n\tconst handleVideoEnd = () => listener(false);\n\n\tif (screenfull.isEnabled) {\n\t\tscreenfull.on('change', handleChange);\n\t}\n\n\tfullscreenEventNames.forEach((eventName) => {\n\t\tdocument.addEventListener(eventName, handleChange);\n\t});\n\n\tlet currentVideo: IOSVideoElement | null = null;\n\n\tconst attachVideoListeners = (video: IOSVideoElement | null) => {\n\t\tif (currentVideo === video) return;\n\t\tif (currentVideo) {\n\t\t\tcurrentVideo.removeEventListener(\n\t\t\t\t'webkitbeginfullscreen',\n\t\t\t\thandleVideoBegin,\n\t\t\t);\n\t\t\tcurrentVideo.removeEventListener('webkitendfullscreen', handleVideoEnd);\n\t\t}\n\t\tcurrentVideo = video;\n\t\tif (currentVideo) {\n\t\t\tcurrentVideo.addEventListener('webkitbeginfullscreen', handleVideoBegin);\n\t\t\tcurrentVideo.addEventListener('webkitendfullscreen', handleVideoEnd);\n\t\t}\n\t};\n\n\tattachVideoListeners(getPlayerVideo());\n\n\tconst container = getPlayerContainer();\n\tlet observer: MutationObserver | null = null;\n\n\tif (container) {\n\t\tobserver = new MutationObserver(() => {\n\t\t\tattachVideoListeners(getPlayerVideo());\n\t\t});\n\t\tobserver.observe(container, { childList: true, subtree: true });\n\t}\n\n\tlistener(isPlayerFullscreen());\n\n\treturn () => {\n\t\tif (screenfull.isEnabled) {\n\t\t\tscreenfull.off('change', handleChange);\n\t\t}\n\t\tfullscreenEventNames.forEach((eventName) => {\n\t\t\tdocument.removeEventListener(eventName, handleChange);\n\t\t});\n\t\tif (currentVideo) {\n\t\t\tcurrentVideo.removeEventListener(\n\t\t\t\t'webkitbeginfullscreen',\n\t\t\t\thandleVideoBegin,\n\t\t\t);\n\t\t\tcurrentVideo.removeEventListener('webkitendfullscreen', handleVideoEnd);\n\t\t}\n\t\tif (observer) {\n\t\t\tobserver.disconnect();\n\t\t}\n\t};\n};\n"
},
{
"path": "src/client-viewer/src/utils/socket.ts",
"content": "import socketIO, { Socket } from 'socket.io-client';\nimport { generateUrl } from '../api/generator';\n\nlet socket: Socket;\n\nexport const connect = (roomId: string) => {\n\tsocket = socketIO(generateUrl(), {\n\t\tquery: {\n\t\t\troomId,\n\t\t},\n\t\tforceNew: true,\n\t});\n\treturn socket;\n};\n\nexport const getSocket = () => socket;\n"
},
{
"path": "src/client-viewer/src/utils/userAgentParserHelpers.ts",
"content": "// @ts-ignore\nimport { UAParser } from 'ua-parser-js';\n\nexport function getOSFromUAParser(uaParser: UAParser) {\n\tconst osFromUAParser = uaParser.getResult().os;\n\n\treturn `${osFromUAParser.name ? osFromUAParser.name : ''} ${\n\t\tosFromUAParser.version ? osFromUAParser.version : ''\n\t}`;\n}\n\nexport function getDeviceTypeFromUAParser(uaParser: UAParser) {\n\tconst deviceTypeFromUAParser = uaParser.getResult().device;\n\n\treturn deviceTypeFromUAParser.type\n\t\t? deviceTypeFromUAParser.type.toString()\n\t\t: 'computer';\n}\n\nexport function getBrowserFromUAParser(uaParser: UAParser) {\n\tconst browserFromUAParser = uaParser.getResult().browser;\n\n\treturn `${browserFromUAParser.name ? browserFromUAParser.name : ''} ${\n\t\tbrowserFromUAParser.version ? browserFromUAParser.version : ''\n\t}`;\n}\n"
},
{
"path": "src/client-viewer/src/vite-env.d.ts",
"content": "/// \ntype ConnectionIconType =\n\t| ConnectionIconEnum.FEED\n\t| ConnectionIconEnum.FEED_SUBSCRIBED;\ntype LoadingSharingIconType =\n\t| LoadingSharingIconEnum.DESKTOP\n\t| LoadingSharingIconEnum.APPLICATION;\ntype ScreenSharingSourceType =\n\t| ScreenSharingSourceEnum.SCREEN\n\t| ScreenSharingSourceEnum.WINDOW;\ntype CreatePeerConnectionUseEffectParams = {\n\tconnectionRoomId: string;\n\tpeer: undefined | PeerConnection;\n\tsetMyDeviceDetails: (_: DeviceDetails) => void;\n\tsetConnectionIconType: (_: ConnectionIconType) => void;\n\tsetIsShownTextPrompt: (_: boolean) => void;\n\tsetPromptStep: (_: number) => void;\n\tsetScreenSharingSourceType: (_: ScreenSharingSourceType) => void;\n\tsetDialogErrorMessage: (_: ErrorMessage) => void;\n\tsetIsErrorDialogOpen: (_: boolean) => void;\n\tsetUrl: (_: MediaStream | null) => void;\n\tsetPeer: (_: undefined | PeerConnection) => void;\n};\ntype handleDisplayingLoadingSharingIconLoopParams = {\n\tpromptStep: number;\n\turl: MediaStream | null;\n\tsetIsShownLoadingSharingIcon: (_: boolean) => void;\n\tloadingSharingIconType: LoadingSharingIconType;\n\tisShownLoadingSharingIcon: boolean;\n\tsetLoadingSharingIconType: (_: LoadingSharingIconType) => void;\n};\n\ninterface Document {\n\t/**\n\t * Indicates whether the document is currently in the process of prerendering.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/prerendering\n\t * @see https://wicg.github.io/nav-speculation/prerendering.html#document-prerendering\n\t */\n\tprerendering?: boolean;\n\n\t/**\n\t * An event handler for the prerenderingchange event, which is fired when\n\t * a prerendered document is activated.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/prerenderingchange_event\n\t */\n\tonprerenderingchange?: ((this: Document, ev: Event) => void) | null;\n}\n"
},
{
"path": "src/client-viewer/tsconfig.app.json",
"content": "{\n\t\"compilerOptions\": {\n\t\t\"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\",\n\t\t\"target\": \"ES2022\",\n\t\t\"useDefineForClassFields\": true,\n\t\t\"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n\t\t\"module\": \"ESNext\",\n\t\t\"skipLibCheck\": true,\n\n\t\t/* Bundler mode */\n\t\t\"moduleResolution\": \"bundler\",\n\t\t\"allowImportingTsExtensions\": true,\n\t\t\"verbatimModuleSyntax\": true,\n\t\t\"moduleDetection\": \"force\",\n\t\t\"noEmit\": true,\n\t\t\"jsx\": \"react-jsx\",\n\n\t\t/* Linting */\n\t\t\"strict\": true,\n\t\t\"noUnusedLocals\": true,\n\t\t\"noUnusedParameters\": true,\n\t\t\"erasableSyntaxOnly\": true,\n\t\t\"noFallthroughCasesInSwitch\": true,\n\t\t\"noUncheckedSideEffectImports\": true\n\t},\n\t\"include\": [\"src\"]\n}\n"
},
{
"path": "src/client-viewer/tsconfig.json",
"content": "{\n\t\"files\": [],\n\t\"references\": [\n\t\t{ \"path\": \"./tsconfig.app.json\" },\n\t\t{ \"path\": \"./tsconfig.node.json\" }\n\t]\n}\n"
},
{
"path": "src/client-viewer/tsconfig.node.json",
"content": "{\n\t\"compilerOptions\": {\n\t\t\"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.node.tsbuildinfo\",\n\t\t\"target\": \"ES2023\",\n\t\t\"lib\": [\"ES2023\"],\n\t\t\"module\": \"ESNext\",\n\t\t\"skipLibCheck\": true,\n\n\t\t/* Bundler mode */\n\t\t\"moduleResolution\": \"bundler\",\n\t\t\"allowImportingTsExtensions\": true,\n\t\t\"verbatimModuleSyntax\": true,\n\t\t\"moduleDetection\": \"force\",\n\t\t\"noEmit\": true,\n\n\t\t/* Linting */\n\t\t\"strict\": true,\n\t\t\"noUnusedLocals\": true,\n\t\t\"noUnusedParameters\": true,\n\t\t\"erasableSyntaxOnly\": true,\n\t\t\"noFallthroughCasesInSwitch\": true,\n\t\t\"noUncheckedSideEffectImports\": true\n\t},\n\t\"include\": [\"vite.config.ts\"]\n}\n"
},
{
"path": "src/client-viewer/vite.config.ts",
"content": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport legacy from '@vitejs/plugin-legacy';\nimport { nodePolyfills } from 'vite-plugin-node-polyfills';\nimport type { Plugin } from 'vite';\nimport { readFileSync } from 'node:fs';\nimport { fileURLToPath } from 'node:url';\nimport { dirname, join } from 'node:path';\n\ninterface PackageJson {\n\tversion?: string;\n}\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nconst packageJson = JSON.parse(\n\treadFileSync(new URL('./package.json', import.meta.url), 'utf-8'),\n) as PackageJson;\nconst clientViewerVersion =\n\tprocess.env.VITE_CLIENT_VIEWER_VERSION || packageJson.version || '';\n\n// load GA interceptor script from separate file\nconst gaInterceptorScript = readFileSync(\n\tjoin(__dirname, 'scripts', 'ga-interceptor.js'),\n\t'utf-8',\n);\n\n// plugin to replace html placeholders with env variables and inject GA interceptor\nconst replaceHtmlEnvPlugin = (): Plugin => {\n\treturn {\n\t\tname: 'replace-html-env',\n\t\ttransformIndexHtml(html) {\n\t\t\tconst gaTagId = process.env.VITE_CLIENT_VIEWER_GA_TAG || '';\n\t\t\tlet transformed = html\n\t\t\t\t.replace(/%VITE_CLIENT_VIEWER_GA_TAG%/g, gaTagId)\n\t\t\t\t.replace(/%VITE_CLIENT_VIEWER_VERSION%/g, clientViewerVersion);\n\n\t\t\t// inject GA interceptor script before GA script loads\n\t\t\tif (\n\t\t\t\ttransformed.includes(\n\t\t\t\t\t'\\n \n