@100mslive/roomkit-react 0.3.14-alpha.10 → 0.3.14-alpha.12

package/dist/meta.esbuild.json

@@ -4951,7 +4951,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 356249,
+      "bytes": 356285,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5091,32 +5091,6 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/hooks/usePlaylistMusic.js": {
-      "bytes": 913,
-      "imports": [
-        {
-          "path": "react",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "@100mslive/react-sdk",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "<define:process.env>",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "<runtime>",
-          "kind": "import-statement",
-          "external": true
-        }
-      ],
-      "format": "esm"
-    },
     "src/Prebuilt/components/hooks/useScreenshareAudio.js": {
       "bytes": 813,
       "imports": [
@@ -5139,7 +5113,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Header/AdditionalRoomState.jsx": {
-      "bytes": 6857,
+      "bytes": 4443,
       "imports": [
         {
           "path": "react",
@@ -5166,11 +5140,6 @@
           "kind": "import-statement",
           "original": "../AppData/useUISettings"
         },
-        {
-          "path": "src/Prebuilt/components/hooks/usePlaylistMusic.js",
-          "kind": "import-statement",
-          "original": "../hooks/usePlaylistMusic"
-        },
         {
           "path": "src/Prebuilt/components/hooks/useScreenshareAudio.js",
           "kind": "import-statement",
@@ -8268,7 +8237,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatBody.tsx": {
-      "bytes": 15222,
+      "bytes": 15590,
       "imports": [
         {
           "path": "react",
@@ -10974,7 +10943,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6f3/tldraw.css": {
+    "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4ded3/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11024,7 +10993,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6c2/index.css": {
+    "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4dba1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11033,7 +11002,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6f3/tldraw.css",
+          "path": "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4ded3/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11108,7 +11077,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6c2/index.css",
+          "path": "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4dba1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -14971,7 +14940,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-EKH2S2VL.js",
+          "path": "dist/chunk-2VGMEGOM.js",
           "kind": "import-statement"
         }
       ],
@@ -15047,16 +15016,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-PL2BEA32.js.map": {
+    "dist/HLSView-6X6A7QVC.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-PL2BEA32.js": {
+    "dist/HLSView-6X6A7QVC.js": {
       "imports": [
         {
-          "path": "dist/chunk-EKH2S2VL.js",
+          "path": "dist/chunk-2VGMEGOM.js",
           "kind": "import-statement"
         },
         {
@@ -15234,7 +15203,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-TAAU7UCF.css",
+      "cssBundle": "dist/HLSView-J7FHXBEW.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15293,13 +15262,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-EKH2S2VL.js.map": {
+    "dist/chunk-2VGMEGOM.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3899438
+      "bytes": 3893581
     },
-    "dist/chunk-EKH2S2VL.js": {
+    "dist/chunk-2VGMEGOM.js": {
       "imports": [
         {
           "path": "react",
@@ -16376,16 +16345,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "@100mslive/react-sdk",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "react",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "react-use",
           "kind": "import-statement",
@@ -17782,7 +17741,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-PL2BEA32.js",
+          "path": "dist/HLSView-6X6A7QVC.js",
           "kind": "dynamic-import"
         },
         {
@@ -18366,7 +18325,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17874
+          "bytesInOutput": 16923
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224414
@@ -18849,7 +18808,7 @@
           "bytesInOutput": 9484
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 459151
+          "bytesInOutput": 459136
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2550
@@ -18897,10 +18856,7 @@
           "bytesInOutput": 1395
         },
         "src/Prebuilt/components/Header/AdditionalRoomState.jsx": {
-          "bytesInOutput": 6826
-        },
-        "src/Prebuilt/components/hooks/usePlaylistMusic.js": {
-          "bytesInOutput": 1078
+          "bytesInOutput": 4461
         },
         "src/Prebuilt/components/hooks/useScreenshareAudio.js": {
           "bytesInOutput": 911
@@ -19092,7 +19048,7 @@
           "bytesInOutput": 5652
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14749
+          "bytesInOutput": 15220
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9785
@@ -19247,7 +19203,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2797
         },
-        "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6c2/index.css": {
+        "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4dba1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19413,16 +19369,16 @@
           "bytesInOutput": 12635
         },
         "src/Diagnostics/VideoTest.tsx": {
-          "bytesInOutput": 2376
+          "bytesInOutput": 2372
         }
       },
-      "bytes": 1851923
+      "bytes": 1847927
     },
     "dist/index.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 122402
+      "bytes": 122484
     },
     "dist/index.css": {
       "imports": [
@@ -19478,22 +19434,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6f3/tldraw.css": {
+        "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4ded3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6c2/index.css": {
+        "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4dba1/index.css": {
           "bytesInOutput": 401
         }
       },
-      "bytes": 75901
+      "bytes": 75983
     },
-    "dist/HLSView-TAAU7UCF.css.map": {
+    "dist/HLSView-J7FHXBEW.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 122402
+      "bytes": 122484
     },
-    "dist/HLSView-TAAU7UCF.css": {
+    "dist/HLSView-J7FHXBEW.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19547,14 +19503,14 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6f3/tldraw.css": {
+        "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4ded3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2855-ZQm43crZSsDc/1904e49ff6c2/index.css": {
+        "../../../../../../var/folders/_k/lv0n3xdx0n9c5c6nzjvb629r0000gn/T/tmp-5599-rVgyIDHVeqLY/1906a2e4dba1/index.css": {
           "bytesInOutput": 401
         }
       },
-      "bytes": 75912
+      "bytes": 75994
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.14-alpha.10",
+  "version": "0.3.14-alpha.12",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -67,6 +67,7 @@
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
     "esbuild-loader": "^4.0.2",
+    "knip": "^5.11.0",
     "react": "^18.1.0",
     "storybook-dark-mode": "^3.0.0"
   },
@@ -74,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.14-alpha.10",
+    "@100mslive/hls-player": "0.3.14-alpha.12",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.14-alpha.10",
-    "@100mslive/hms-whiteboard": "0.0.4-alpha.10",
-    "@100mslive/react-icons": "0.10.14-alpha.10",
-    "@100mslive/react-sdk": "0.10.14-alpha.10",
+    "@100mslive/hms-virtual-background": "1.13.14-alpha.12",
+    "@100mslive/hms-whiteboard": "0.0.4-alpha.12",
+    "@100mslive/react-icons": "0.10.14-alpha.12",
+    "@100mslive/react-sdk": "0.10.14-alpha.12",
     "@100mslive/types-prebuilt": "0.12.9",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +116,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "fe81328f37cd2b5f85c060577475ca0ba7c111cc"
+  "gitHead": "14063c3bf0fd56f1ddf10ec37c4accd0e47a9f6b"
 }

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

@@ -75,28 +75,35 @@ const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }
         ml: '$2',
         mr: '$4',
         gap: '$space$2',
+        flexWrap: 'nowrap',
       }}
     >
       {left && (
-        <SenderName
+        <Text
           variant="xs"
           as="span"
-          css={{ color: '$on_surface_medium', textTransform: 'capitalize', fontWeight: '$regular' }}
+          css={{
+            color: '$on_surface_medium',
+            textTransform: 'capitalize',
+            fontWeight: '$regular',
+            whiteSpace: 'nowrap',
+          }}
         >
           {left}
-        </SenderName>
+        </Text>
       )}
       {right && (
-        <SenderName
+        <Text
           as="span"
           variant="overline"
           css={{
             color: '$on_surface_medium',
             fontWeight: '$regular',
+            whiteSpace: 'nowrap',
           }}
         >
           {right}
-        </SenderName>
+        </Text>
       )}
     </Flex>
   );
@@ -169,7 +176,7 @@ const SenderName = styled(Text, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  maxWidth: '14ch',
+  width: '100%',
   minWidth: 0,
   color: '$on_surface_high',
   fontWeight: '$semiBold',
@@ -251,7 +258,15 @@ const ChatMessage = React.memo(
             }}
             as="div"
           >
-            <Flex align="baseline">
+            <Flex
+              align="baseline"
+              css={{
+                flexWrap: 'nowrap',
+                maxWidth: 'calc(100% - 10ch)',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
               {message.senderName === 'You' || !message.senderName ? (
                 <SenderName
                   as="span"
@@ -261,7 +276,7 @@ const ChatMessage = React.memo(
                   {message.senderName || 'Anonymous'}
                 </SenderName>
               ) : (
-                <Tooltip title={message.senderName} side="top" align="start">
+                <Tooltip title={message.senderName} side="top" align="start" boxCss={{ zIndex: 50 }}>
                   <SenderName
                     as="span"
                     variant="sub2"

package/src/Prebuilt/components/Header/AdditionalRoomState.jsx

@@ -1,16 +1,8 @@
 import React, { useState } from 'react';
-import { selectLocalPeerID, selectPeerSharingVideoPlaylist, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
-import {
-  AudioPlayerIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  MusicIcon,
-  ShareScreenIcon,
-  VideoPlayerIcon,
-} from '@100mslive/react-icons';
+import { selectLocalPeerID, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { ChevronDownIcon, ChevronUpIcon, MusicIcon, ShareScreenIcon, VideoPlayerIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
 import { useUISettings } from '../AppData/useUISettings';
-import { usePlaylistMusic } from '../hooks/usePlaylistMusic';
 import { useScreenshareAudio } from '../hooks/useScreenshareAudio';
 import { UI_SETTINGS } from '../../common/constants';
 
@@ -35,29 +27,21 @@ export const getRecordingText = ({ isBrowserRecordingOn, isServerRecordingOn, is
  * Display state of recording, streaming, playlist, whiteboard
  */
 export const AdditionalRoomState = () => {
-  const playlist = usePlaylistMusic();
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const screenshareAudio = useScreenshareAudio();
   const [open, setOpen] = useState(false);
-  const isPlaylistInactive = [
-    !playlist.peer || !playlist.track,
-    !playlist.peer?.isLocal && !playlist.track?.enabled,
-    playlist.peer?.isLocal && !playlist.selection,
-  ].some(Boolean);
   const isAudioshareInactive = [
     !screenshareAudio.peer || !screenshareAudio.track,
     !screenshareAudio.peer?.isLocal && !screenshareAudio.track?.enabled,
   ].some(Boolean);
 
-  const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
   const localPeerID = useHMSStore(selectLocalPeerID);
-  const isVideoPlayListPlaying = !!peerSharingPlaylist?.id;
   const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();
 
   const isVideoScreenSharingOn = !!screenShareVideoTrackId;
   const shouldShowScreenShareState = isAudioOnly && isVideoScreenSharingOn;
-  const shouldShowVideoState = isAudioOnly && isVideoPlayListPlaying;
-  if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
+  const shouldShowVideoState = isAudioOnly;
+  if (isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
     return null;
   }
 
@@ -96,50 +80,12 @@ export const AdditionalRoomState = () => {
               </Flex>
             </Tooltip>
           )}
-          {!isPlaylistInactive && (
-            <Tooltip title="Playlist Music">
-              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
-                <AudioPlayerIcon width={24} height={24} />
-              </Flex>
-            </Tooltip>
-          )}
           <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </Box>
         </Flex>
       </Dropdown.Trigger>
       <Dropdown.Content sideOffset={5} align="end" css={{ w: '$60' }}>
-        {!isPlaylistInactive && (
-          <Dropdown.Item css={{ color: '$on_primary_high' }}>
-            <AudioPlayerIcon width={24} height={24} />
-            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
-              Playlist is playing
-            </Text>
-            {playlist.peer.isLocal ? (
-              <Text
-                variant="sm"
-                css={{ color: '$alert_error_default', cursor: 'pointer', ml: '$2' }}
-                onClick={e => {
-                  e.preventDefault();
-                  playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);
-                }}
-              >
-                {playlist.selection.playing ? 'Pause' : 'Play'}
-              </Text>
-            ) : (
-              <Text
-                variant="sm"
-                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
-                onClick={e => {
-                  e.preventDefault();
-                  playlist.setVolume(!playlist.track.volume ? 100 : 0);
-                }}
-              >
-                {playlist.track.volume === 0 ? 'Unmute' : 'Mute'}
-              </Text>
-            )}
-          </Dropdown.Item>
-        )}
         {!isAudioshareInactive && (
           <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <MusicIcon width={24} height={24} />
@@ -166,14 +112,6 @@ export const AdditionalRoomState = () => {
             </Text>
           </Dropdown.Item>
         )}
-        {shouldShowVideoState && (
-          <Dropdown.Item css={{ color: '$on_primary_high' }}>
-            <VideoPlayerIcon width={24} height={24} />
-            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
-              {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}
-            </Text>
-          </Dropdown.Item>
-        )}
       </Dropdown.Content>
     </Dropdown.Root>
   );

package/dist/Prebuilt/components/HMSVideo/PlayButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const PlayButton: ({ isPaused, width, height, }: {
-    isPaused: boolean;
-    width: number;
-    height: number;
-}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/VoterList.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const VoterList: ({ voters }: {
-    voters: string[];
-}) => React.JSX.Element[];

package/src/Prebuilt/common/roles.js

@@ -1,4 +0,0 @@
-export const ROLES = {
-  TEACHER: 'teacher',
-  STUDENT: 'student',
-};

package/src/Prebuilt/components/AppData/useAppConfig.js

@@ -1,7 +0,0 @@
-import { selectAppDataByPath, useHMSStore } from '@100mslive/react-sdk';
-import { APP_DATA } from '../../common/constants';
-
-export const useAppConfig = (...path) => {
-  const appConfig = useHMSStore(selectAppDataByPath(APP_DATA.appConfig, ...path));
-  return appConfig;
-};

package/src/Prebuilt/components/HMSVideo/PlayButton.tsx

@@ -1,27 +0,0 @@
-import React, { MouseEvent } from 'react';
-import { PauseIcon, PlayIcon } from '@100mslive/react-icons';
-import { IconButton, Tooltip } from '../../..';
-import { useHMSPlayerContext } from './PlayerContext';
-
-export const PlayButton = ({
-  isPaused,
-  width = 20,
-  height = 20,
-}: {
-  isPaused: boolean;
-  width: number;
-  height: number;
-}) => {
-  const { hlsPlayer } = useHMSPlayerContext();
-  const onClick = async (event: MouseEvent) => {
-    event?.stopPropagation();
-    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
-  };
-  return (
-    <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
-      <IconButton onClick={onClick} data-testid="play_pause_btn">
-        {isPaused ? <PlayIcon width={width} height={height} /> : <PauseIcon width={width} height={height} />}
-      </IconButton>
-    </Tooltip>
-  );
-};

package/src/Prebuilt/components/Header/AmbientMusic.jsx

@@ -1,88 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { MusicIcon } from '@100mslive/react-icons';
-import { IconButton, Tooltip } from '../../../';
-import { useSetUiSettings } from '../AppData/useUISettings';
-import { useWhenAloneInRoom } from '../../common/hooks';
-import { UI_SETTINGS } from '../../common/constants';
-
-const ambientMusicURL = process.env.REACT_APP_AMBIENT_MUSIC;
-/**
- * @type HTMLAudioElement
- */
-let ambientAudio = null;
-if (ambientMusicURL) {
-  try {
-    ambientAudio = new Audio(ambientMusicURL);
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-/**
- *
- * @param {number} threshold the threshold after which the music is played(from the starting to be alone in the room)
- * @returns {Object}
- * ready: boolean - the threshold has passed and the music can be played,
- *
- * playing: boolean - flag to denote whether music is playing,
- *
- * toggleAmbientMusic - function to play/pause the music
- */
-const useAmbientMusic = (threshold = 5 * 1000) => {
-  const audioRef = useRef(ambientAudio);
-  const [userHasEnabled, setEnableAmbientMusic] = useSetUiSettings(UI_SETTINGS.enableAmbientMusic); // user settings
-  const [playing, setPlaying] = useState(false);
-  const { alone: aloneRightNow, aloneForLong } = useWhenAloneInRoom(threshold);
-  // play if user has enabled the setting and been alone for some time
-  const shouldMusicBePlayed = !playing && userHasEnabled && aloneForLong;
-  // pause immediately if user has disabled the setting or not alone anymore
-  const shouldMusicBePaused = playing && (!userHasEnabled || !aloneRightNow);
-
-  useEffect(() => {
-    if (shouldMusicBePlayed && audioRef.current) {
-      audioRef.current.volume = 0.2;
-      audioRef.current.loop = true;
-      audioRef.current.play().catch(err => console.error('Unable to play Ambient Music', err));
-      setPlaying(true);
-    }
-  }, [shouldMusicBePlayed]);
-
-  useEffect(() => {
-    if (shouldMusicBePaused) {
-      audioRef.current.pause();
-      setPlaying(false);
-    }
-  }, [shouldMusicBePaused]);
-
-  useEffect(() => {
-    const ref = audioRef.current;
-    // Stop on leave
-    return () => {
-      if (ref) {
-        ref.pause();
-      }
-    };
-  }, []);
-
-  const toggleAmbientMusic = useCallback(
-    () => setEnableAmbientMusic(!playing), // save user settings
-    [playing, setEnableAmbientMusic],
-  );
-
-  return { ready: aloneForLong, playing, toggleAmbientMusic };
-};
-
-export const AmbientMusic = () => {
-  const { ready, playing, toggleAmbientMusic } = useAmbientMusic();
-  if (!ambientAudio || !ready) {
-    return null;
-  }
-
-  return (
-    <Tooltip title={playing ? `Disable Ambient Music` : `Play Ambient Music`} key="ambient-music">
-      <IconButton css={{ mx: '$4' }} onClick={toggleAmbientMusic} active={!playing}>
-        <MusicIcon />
-      </IconButton>
-    </Tooltip>
-  );
-};