@100mslive/roomkit-react 0.2.6-alpha.5 → 0.2.6-alpha.7

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-HWYKJQTV.js";
+} from "./chunk-YHMYZQEP.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -4523,7 +4523,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 322541,
+      "bytes": 322683,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6287,7 +6287,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-      "bytes": 7747,
+      "bytes": 8005,
       "imports": [
         {
           "path": "react",
@@ -7489,7 +7489,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatBody.tsx": {
-      "bytes": 14776,
+      "bytes": 14835,
       "imports": [
         {
           "path": "react",
@@ -7973,7 +7973,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/PinnedMessage.tsx": {
-      "bytes": 5067,
+      "bytes": 5026,
       "imports": [
         {
           "path": "react",
@@ -10741,7 +10741,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 18115,
+      "bytes": 17554,
       "imports": [
         {
           "path": "react",
@@ -12790,7 +12790,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3167561
+      "bytes": 3167600
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15499,7 +15499,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18159
+          "bytesInOutput": 18167
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -16090,7 +16090,7 @@
           "bytesInOutput": 1165
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-          "bytesInOutput": 9104
+          "bytesInOutput": 9610
         },
         "src/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.tsx": {
           "bytesInOutput": 2786
@@ -16177,7 +16177,7 @@
           "bytesInOutput": 920
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 17105
+          "bytesInOutput": 17147
         },
         "src/Prebuilt/components/Chat/ChatSelector.tsx": {
           "bytesInOutput": 8560
@@ -16204,7 +16204,7 @@
           "bytesInOutput": 827
         },
         "src/Prebuilt/components/Chat/PinnedMessage.tsx": {
-          "bytesInOutput": 6150
+          "bytesInOutput": 6106
         },
         "src/Prebuilt/components/Chat/Chat.tsx": {
           "bytesInOutput": 4402
@@ -16378,7 +16378,7 @@
           "bytesInOutput": 4598
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 21671
+          "bytesInOutput": 21219
         },
         "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
           "bytesInOutput": 4111
@@ -16507,7 +16507,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1488659
+      "bytes": 1488719
     }
   }
 }

package/dist/meta.esbuild.json

@@ -4523,7 +4523,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 322541,
+      "bytes": 322683,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6287,7 +6287,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-      "bytes": 7747,
+      "bytes": 8005,
       "imports": [
         {
           "path": "react",
@@ -7489,7 +7489,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatBody.tsx": {
-      "bytes": 14776,
+      "bytes": 14835,
       "imports": [
         {
           "path": "react",
@@ -7973,7 +7973,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/PinnedMessage.tsx": {
-      "bytes": 5067,
+      "bytes": 5026,
       "imports": [
         {
           "path": "react",
@@ -10741,7 +10741,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 18115,
+      "bytes": 17554,
       "imports": [
         {
           "path": "react",
@@ -12795,7 +12795,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-HWYKJQTV.js",
+          "path": "dist/chunk-YHMYZQEP.js",
           "kind": "import-statement"
         }
       ],
@@ -12868,16 +12868,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-EWCMUTSW.js.map": {
+    "dist/HLSView-XYQZRLID.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 59619
+      "bytes": 58854
     },
-    "dist/HLSView-EWCMUTSW.js": {
+    "dist/HLSView-XYQZRLID.js": {
       "imports": [
         {
-          "path": "dist/chunk-HWYKJQTV.js",
+          "path": "dist/chunk-YHMYZQEP.js",
           "kind": "import-statement"
         },
         {
@@ -12997,7 +12997,7 @@
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 17725
+          "bytesInOutput": 17353
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3521
@@ -13039,15 +13039,15 @@
           "bytesInOutput": 3992
         }
       },
-      "bytes": 37344
+      "bytes": 36972
     },
-    "dist/chunk-HWYKJQTV.js.map": {
+    "dist/chunk-YHMYZQEP.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3103727
+      "bytes": 3104535
     },
-    "dist/chunk-HWYKJQTV.js": {
+    "dist/chunk-YHMYZQEP.js": {
       "imports": [
         {
           "path": "react",
@@ -15300,7 +15300,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-EWCMUTSW.js",
+          "path": "dist/HLSView-XYQZRLID.js",
           "kind": "dynamic-import"
         },
         {
@@ -15722,7 +15722,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18159
+          "bytesInOutput": 18167
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224267
@@ -16292,7 +16292,7 @@
           "bytesInOutput": 735
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-          "bytesInOutput": 7536
+          "bytesInOutput": 7983
         },
         "src/Prebuilt/components/Streaming/Common.jsx": {
           "bytesInOutput": 2247
@@ -16367,7 +16367,7 @@
           "bytesInOutput": 3466
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14354
+          "bytesInOutput": 14396
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9785
@@ -16409,7 +16409,7 @@
           "bytesInOutput": 2916
         },
         "src/Prebuilt/components/Chat/PinnedMessage.tsx": {
-          "bytesInOutput": 4980
+          "bytesInOutput": 4944
         },
         "src/Prebuilt/components/Chat/ArrowNavigation.tsx": {
           "bytesInOutput": 1021
@@ -16649,7 +16649,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1266239
+      "bytes": 1266700
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.6-alpha.5",
+  "version": "0.2.6-alpha.7",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.6-alpha.5",
-    "@100mslive/hms-virtual-background": "1.12.6-alpha.5",
-    "@100mslive/react-icons": "0.9.6-alpha.5",
-    "@100mslive/react-sdk": "0.9.6-alpha.5",
+    "@100mslive/hls-player": "0.2.6-alpha.7",
+    "@100mslive/hms-virtual-background": "1.12.6-alpha.7",
+    "@100mslive/react-icons": "0.9.6-alpha.7",
+    "@100mslive/react-sdk": "0.9.6-alpha.7",
     "@100mslive/types-prebuilt": "0.12.6",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "dd470c3002085468208fabc315a48ce80321e4ed"
+  "gitHead": "bfc59894d860031e9aac66d839b0b3febdc3961b"
 }

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -136,7 +136,7 @@ const Link = styled('a', {
   },
 });
 
-export const AnnotisedMessage = ({ message }: { message: string }) => {
+export const AnnotisedMessage = ({ message, length }: { message: string; length?: number }) => {
   if (!message) {
     return <Fragment />;
   }
@@ -149,10 +149,10 @@ export const AnnotisedMessage = ({ message }: { message: string }) => {
         .map(part =>
           URL_REGEX.test(part) ? (
             <Link href={part} key={part} target="_blank" rel="noopener noreferrer">
-              {part}
+              {part.slice(0, length)}
             </Link>
           ) : (
-            part
+            part.slice(0, length)
           ),
         )}
     </Fragment>

package/src/Prebuilt/components/Chat/PinnedMessage.tsx

@@ -103,10 +103,8 @@ export const PinnedMessage = () => {
             title={pinnedMessages[pinnedMessageIndex]?.text}
           >
             <AnnotisedMessage
-              message={`${currentPinnedMessage.slice(
-                0,
-                hideOverflow ? PINNED_MESSAGE_LENGTH : currentPinnedMessage.length,
-              )}`}
+              message={currentPinnedMessage}
+              length={hideOverflow ? PINNED_MESSAGE_LENGTH : currentPinnedMessage.length}
             />
             {canOverflow ? (
               <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(prev => !prev)}>

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx

@@ -195,6 +195,13 @@ const AddMenu = () => {
 const PrevMenu = () => {
   const hmsActions = useHMSActions();
   const polls = useHMSStore(selectPolls);
+  const sortedPolls = useMemo(
+    () =>
+      polls
+        ?.sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
+        ?.sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0)),
+    [polls],
+  );
   const permissions = useHMSStore(selectPermissions);
 
   useEffect(() => {
@@ -217,7 +224,7 @@ const PrevMenu = () => {
         Previous Polls and Quizzes
       </Text>
       <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
-        {polls?.map(poll => (
+        {sortedPolls?.map(poll => (
           <InteractionCard key={poll.id} id={poll.id} title={poll.title} status={poll.state} />
         ))}
       </Flex>

package/src/Prebuilt/layouts/HLSView.jsx

@@ -351,7 +351,6 @@ const HLSView = () => {
                 </IconButton>
               </Box>
             )}
-
             <Flex
               ref={controlsRef}
               direction="column"
@@ -371,90 +370,78 @@ const HLSView = () => {
               }}
             >
               {!isMobile && (
-                <Flex direction="column">
-                  <Box>
-                    {hlsPlayer && (
-                      <HMSVideoPlayer.Progress
-                        hlsPlayer={hlsPlayer}
-                        onValueChange={time => {
-                          hlsPlayer.seekTo(time);
-                        }}
-                      />
+                <HMSVideoPlayer.Controls.Root
+                  css={{
+                    p: '$4 $8',
+                  }}
+                >
+                  <HMSVideoPlayer.Controls.Left>
+                    <HMSVideoPlayer.PlayButton
+                      onClick={async () => {
+                        isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+                      }}
+                      isPaused={isPaused}
+                    />
+                    <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
+                    <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
+                    <IconButton
+                      variant="standard"
+                      css={{ px: '$2' }}
+                      onClick={async () => {
+                        await hlsPlayer.seekToLivePosition();
+                        setIsVideoLive(true);
+                      }}
+                      key="jump-to-live_btn"
+                      data-testid="jump-to-live_btn"
+                    >
+                      <Tooltip title="Go to Live" side="top">
+                        <Flex justify="center" gap={2} align="center">
+                          <Box
+                            css={{
+                              height: '$4',
+                              width: '$4',
+                              background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
+                              r: '$1',
+                            }}
+                          />
+                          <Text
+                            variant={{
+                              '@sm': 'xs',
+                            }}
+                            css={{
+                              c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
+                            }}
+                          >
+                            {isVideoLive ? 'LIVE' : 'GO LIVE'}
+                          </Text>
+                        </Flex>
+                      </Tooltip>
+                    </IconButton>
+                  </HMSVideoPlayer.Controls.Left>
+
+                  <HMSVideoPlayer.Controls.Right>
+                    {hasCaptions && (
+                      <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
                     )}
-                  </Box>
-                  <HMSVideoPlayer.Controls.Root
-                    css={{
-                      p: '$4 $8',
-                    }}
-                  >
-                    <HMSVideoPlayer.Controls.Left>
-                      <HMSVideoPlayer.PlayButton
-                        onClick={async () => {
-                          isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
-                        }}
-                        isPaused={isPaused}
+                    {availableLayers.length > 0 ? (
+                      <HLSQualitySelector
+                        layers={availableLayers}
+                        onOpen={setQualityDropDownOpen}
+                        open={qualityDropDownOpen}
+                        selection={currentSelectedQuality}
+                        onQualityChange={handleQuality}
+                        isAuto={isUserSelectedAuto}
                       />
-                      <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
-                      <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
-                      <IconButton
-                        variant="standard"
-                        css={{ px: '$2' }}
-                        onClick={async () => {
-                          await hlsPlayer.seekToLivePosition();
-                          setIsVideoLive(true);
-                        }}
-                        key="jump-to-live_btn"
-                        data-testid="jump-to-live_btn"
-                      >
-                        <Tooltip title="Go to Live" side="top">
-                          <Flex justify="center" gap={2} align="center">
-                            <Box
-                              css={{
-                                height: '$4',
-                                width: '$4',
-                                background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
-                                r: '$1',
-                              }}
-                            />
-                            <Text
-                              variant={{
-                                '@sm': 'xs',
-                              }}
-                              css={{
-                                c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
-                              }}
-                            >
-                              {isVideoLive ? 'LIVE' : 'GO LIVE'}
-                            </Text>
-                          </Flex>
-                        </Tooltip>
-                      </IconButton>
-                    </HMSVideoPlayer.Controls.Left>
-
-                    <HMSVideoPlayer.Controls.Right>
-                      {hasCaptions && (
-                        <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
-                      )}
-                      {availableLayers.length > 0 ? (
-                        <HLSQualitySelector
-                          layers={availableLayers}
-                          onOpen={setQualityDropDownOpen}
-                          open={qualityDropDownOpen}
-                          selection={currentSelectedQuality}
-                          onQualityChange={handleQuality}
-                          isAuto={isUserSelectedAuto}
-                        />
-                      ) : null}
-                      {isFullScreenSupported ? (
-                        <FullScreenButton
-                          isFullScreen={isFullScreen}
-                          onToggle={toggle}
-                          icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
-                        />
-                      ) : null}
-                    </HMSVideoPlayer.Controls.Right>
-                  </HMSVideoPlayer.Controls.Root>
-                </Flex>
+                    ) : null}
+                    {isFullScreenSupported ? (
+                      <FullScreenButton
+                        isFullScreen={isFullScreen}
+                        onToggle={toggle}
+                        icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
+                      />
+                    ) : null}
+                  </HMSVideoPlayer.Controls.Right>
+                </HMSVideoPlayer.Controls.Root>
               )}
             </Flex>
           </HMSVideoPlayer.Root>