@100mslive/react-native-room-kit 1.1.6 → 1.1.7

package/src/components/HMSOverlayMessageView.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import {
+  useAllowBlockingPeerFromChat,
+  useAllowPinningMessage,
+  useHMSRoomStyleSheet,
+  useModalType,
+} from '../hooks-util';
+import { PinIcon, ThreeDotsIcon } from '../Icons';
+import { setSelectedMessageForAction } from '../redux/actions';
+import { ModalTypes } from '../utils/types';
+import type { RootState } from '../redux';
+
+interface HMSMessageProps {
+  message: HMSMessage;
+}
+
+const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
+  const dispatch = useDispatch();
+  const { handleModalVisibleType } = useModalType();
+  const localPeerId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.peerID
+  );
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const allowPeerBlocking = useAllowBlockingPeerFromChat();
+  const canRemoveOthers = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.removeOthers
+  );
+
+  const isPinned = useSelector(
+    (state: RootState) =>
+      state.messages.pinnedMessages.findIndex(
+        (pinnedMessage) => pinnedMessage.id === message.messageId
+      ) >= 0
+  );
+
+  const messageSender = message.sender;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (_theme, typography) => ({
+      senderName: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-SemiBold`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      message: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-Regular`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      threeDots: {
+        tintColor: '#ffffff',
+      },
+      pinnedLabel: {
+        color: '#ffffff',
+      },
+    }),
+    []
+  );
+
+  const onThreeDotsPress = () => {
+    dispatch(setSelectedMessageForAction(message));
+    handleModalVisibleType(ModalTypes.MESSAGE_OPTIONS);
+  };
+
+  const canTakeAction =
+    allowPinningMessage || // can pin message, OR
+    (allowPeerBlocking &&
+      message.sender &&
+      message.sender.peerID !== localPeerId) || // can block peers, OR
+    (canRemoveOthers &&
+      message.sender &&
+      message.sender.peerID !== localPeerId); // can remove participants
+
+  return (
+    <View style={styles.container}>
+      {isPinned ? (
+        <View style={styles.pinLabelContainer}>
+          <PinIcon
+            type="pin"
+            style={[styles.pinIcon, hmsRoomStyles.threeDots]}
+          />
+          <Text style={[styles.pinnedLabel, hmsRoomStyles.pinnedLabel]}>
+            PINNED
+          </Text>
+        </View>
+      ) : null}
+
+      <View style={styles.nameWrapper}>
+        <Text
+          style={[styles.senderName, hmsRoomStyles.senderName]}
+          numberOfLines={1}
+        >
+          {messageSender
+            ? messageSender.isLocal
+              ? 'You'
+              : messageSender.name
+            : 'Anonymous'}
+        </Text>
+
+        {canTakeAction ? (
+          <GestureDetector gesture={Gesture.Tap()}>
+            <TouchableOpacity
+              hitSlop={styles.threeDotsHitSlop}
+              onPress={onThreeDotsPress}
+            >
+              <ThreeDotsIcon
+                stack="vertical"
+                style={[styles.threeDots, hmsRoomStyles.threeDots]}
+              />
+            </TouchableOpacity>
+          </GestureDetector>
+        ) : null}
+      </View>
+
+      <Text style={[styles.message, hmsRoomStyles.message]}>
+        {message.message}
+      </Text>
+    </View>
+  );
+};
+
+export const HMSOverlayMessageView = React.memo(_HMSOverlayMessageView);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    width: '100%',
+  },
+  nameWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  senderName: {
+    flexGrow: 1,
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.1,
+    textShadowOffset: { height: 1, width: 1 },
+    textShadowRadius: 2,
+  },
+  message: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+    marginTop: 2,
+    textShadowOffset: { height: 0.5, width: 0.5 },
+    textShadowRadius: 2,
+  },
+  threeDots: {
+    width: 20,
+    height: 20,
+    marginLeft: 4,
+  },
+  threeDotsHitSlop: {
+    left: 12,
+    right: 12,
+    top: 12,
+    bottom: 12,
+  },
+  pinLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  pinIcon: {
+    width: 12,
+    height: 12,
+    marginRight: 4,
+  },
+  pinnedLabel: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+});

package/src/components/Participants/ParticipantsList.tsx

@@ -31,7 +31,7 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
   const fetchedInitialDataRef = React.useRef(false);
   const hmsInstance = useHMSInstance();
 
-  // Currect is current selected group and off-stage gorup
+  // Current is current selected group and off-stage group
   const isOffStageGroup = useHMSLayoutConfig((layoutConfig) => {
     const offStageRoles =
       layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
@@ -39,12 +39,12 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
     return offStageRoles ? offStageRoles.includes(selectedGroupId) : false;
   });
 
-  // Getting initial data for the selected group Id
-  const dataForGroupId = useSelector(
-    (state: RootState) => {
-      return selectedGroupId === 'hand-raised' ? state.hmsStates.groupedParticipants : state.hmsStates.groupedParticipants[selectedGroupId]
-    }
-  );
+  // Getting initial data for the selected group ID
+  const dataForGroupId = useSelector((state: RootState) => {
+    return selectedGroupId === 'hand-raised'
+      ? state.hmsStates.groupedParticipants
+      : state.hmsStates.groupedParticipants[selectedGroupId];
+  });
 
   const finalDataForGroupId = React.useMemo(() => {
     if (Array.isArray(dataForGroupId)) {
@@ -52,7 +52,9 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
     }
 
     if (dataForGroupId && selectedGroupId === 'hand-raised') {
-      return Object.values(dataForGroupId).flat().filter(peer  => peer.isHandRaised);
+      return Object.values(dataForGroupId)
+        .flat()
+        .filter((peer) => peer.isHandRaised);
     }
 
     return null;
@@ -119,7 +121,7 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
 
   const filteredSearchText = searchText.trim().toLowerCase();
 
-  //#region Flaslist props
+  //#region FlashList props
   const data = React.useMemo(() => {
     return (isOffStageGroup ? offStageData : dataWithHeader).filter((item) =>
       'id' in item ? true : item.name.toLowerCase().includes(filteredSearchText)
@@ -186,7 +188,7 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
         });
     }
   }, [loading, peerListIterator]);
-  //#endregion Flaslist props
+  //#endregion FlashList props
 
   const searchTextExists = searchText.length > 0;
 

package/src/hooks-util.ts

@@ -24,10 +24,13 @@ import {
   WindowController,
   useHMSHLSPlayerCue,
   HMSPollUpdateType,
+  useHMSHLSPlayerPlaybackState,
+  HMSHLSPlayerPlaybackState,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import { SoftInputModes } from '@100mslive/react-native-hms';
 import type {
+  HMSHLSPlayer,
   HMSPIPConfig,
   HMSRole,
   HMSSessionStore,
@@ -93,6 +96,7 @@ import {
   saveUserData,
   setActiveChatBottomSheetTab,
   setActiveSpeakers,
+  setAndroidHLSStreamPaused,
   setAutoEnterPipMode,
   setChatPeerBlacklist,
   setChatState,
@@ -3187,7 +3191,7 @@ export const useHLSPlayerConstraints = () => {
    * Handling Landscape Orientation for both Full and Normal screen
    */
   if (isLandscapeOrientation) {
-    return sr > 1 || sr > wr
+    return sr > wr
       ? {
           width: wrapperWidth,
           height: wrapperWidth / sr,
@@ -3213,3 +3217,37 @@ export const useHLSPlayerConstraints = () => {
     height: wrapperHeight,
   };
 };
+
+export const useHLSStreamResumePause = (
+  playerRef: React.RefObject<React.ComponentRef<typeof HMSHLSPlayer>>
+) => {
+  const dispatch = useDispatch();
+
+  const isPaused = Platform.select({
+    android: useSelector(
+      (state: RootState) => state.app.hlsStreamPaused_android
+    ),
+    ios: useHMSHLSPlayerPlaybackState() === HMSHLSPlayerPlaybackState.PAUSED,
+    default: false,
+  });
+
+  const resumeStream = useCallback(() => {
+    playerRef.current?.resume();
+    if (Platform.OS === 'android') {
+      dispatch(setAndroidHLSStreamPaused(false));
+    }
+  }, []);
+
+  const pauseStream = useCallback(() => {
+    playerRef.current?.pause();
+    if (Platform.OS === 'android') {
+      dispatch(setAndroidHLSStreamPaused(true));
+    }
+  }, []);
+
+  return {
+    isPaused,
+    resumeStream,
+    pauseStream,
+  };
+};

package/src/redux/actionTypes.ts

@@ -113,6 +113,8 @@ const SET_HLS_DESC_PANE_VISIBLE = 'SET_HLS_DESC_PANE_VISIBLE';
 
 const SET_HLS_FULL_SCREEN = 'SET_HLS_FULL_SCREEN';
 
+const SET_ANDROID_HLS_STREAM_PAUSED = 'SET_ANDROID_HLS_STREAM_PAUSED';
+
 const FILTER_OUT_BLOCKED_MSGS = 'FILTER_OUT_BLOCKED_MSGS';
 
 export default {
@@ -164,6 +166,7 @@ export default {
   SET_CHAT_PEER_BLACKLIST,
   SET_HLS_DESC_PANE_VISIBLE,
   SET_HLS_FULL_SCREEN,
+  SET_ANDROID_HLS_STREAM_PAUSED,
   FILTER_OUT_BLOCKED_MSGS,
 };
 

package/src/redux/actions/index.ts

@@ -486,6 +486,11 @@ export const setHlsFullScreen = (fullScreen: boolean) => ({
   payload: { fullScreen },
 });
 
+export const setAndroidHLSStreamPaused = (paused: boolean) => ({
+  type: actionTypes.SET_ANDROID_HLS_STREAM_PAUSED,
+  payload: { hlsStreamPaused_android: paused },
+});
+
 /**
  * POLLS
  */

package/src/redux/reducers/appState.ts

@@ -64,6 +64,7 @@ type IntialStateType = {
   chatPeerBlacklist: string[]; // list of userIds
   hlsDescriptionPaneVisible: boolean;
   hlsFullScreen: boolean;
+  hlsStreamPaused_android: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -103,6 +104,7 @@ const INITIAL_STATE: IntialStateType = {
   chatPeerBlacklist: [],
   hlsDescriptionPaneVisible: false,
   hlsFullScreen: false,
+  hlsStreamPaused_android: false,
 };
 
 const appReducer = (
@@ -373,6 +375,12 @@ const appReducer = (
         hlsFullScreen: action.payload.fullScreen,
       };
     }
+    case ActionTypes.SET_ANDROID_HLS_STREAM_PAUSED: {
+      return {
+        ...state,
+        hlsStreamPaused_android: action.payload.hlsStreamPaused_android,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/lib/commonjs/components/CustomHLSPlayerControls.js

@@ -1,80 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CustomControls = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _theme = require("../utils/theme");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CustomControls = ({
-  handleControlPress
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('play')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Play")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('stop')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Stop")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('pause')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Pause")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('resume')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Resume"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.spacedWrapper
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('seekForward', 5)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Forward 5 sec")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('seekBackward', 5)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Backward 5 sec"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.spacedWrapper
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('seekToLive')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Go to Live")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('setVolume', 50)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.text
-  }, "Low Volume to `50`"))));
-};
-exports.CustomControls = CustomControls;
-const styles = _reactNative.StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly'
-  },
-  spacedWrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    marginVertical: 8
-  },
-  button: {
-    padding: 12
-  },
-  text: {
-    color: _theme.COLORS.PRIMARY.LIGHT
-  }
-});
-//# sourceMappingURL=CustomHLSPlayerControls.js.map

package/lib/commonjs/components/CustomHLSPlayerControls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_theme","obj","__esModule","default","CustomControls","handleControlPress","createElement","View","style","styles","wrapper","TouchableOpacity","button","onPress","Text","text","spacedWrapper","exports","StyleSheet","create","flexDirection","justifyContent","marginVertical","padding","color","COLORS","PRIMARY","LIGHT"],"sourceRoot":"../../../src","sources":["components/CustomHLSPlayerControls.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CustomHLSPlayerControls.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { COLORS } from '../utils/theme';
-export const CustomControls = ({
-  handleControlPress
-}) => {
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
-    style: styles.wrapper
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('play')
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Play")), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('stop')
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Stop")), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('pause')
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Pause")), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('resume')
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Resume"))), /*#__PURE__*/React.createElement(View, {
-    style: styles.spacedWrapper
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('seekForward', 5)
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Forward 5 sec")), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('seekBackward', 5)
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Backward 5 sec"))), /*#__PURE__*/React.createElement(View, {
-    style: styles.spacedWrapper
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('seekToLive')
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Go to Live")), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
-    onPress: () => handleControlPress('setVolume', 50)
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
-  }, "Low Volume to `50`"))));
-};
-const styles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly'
-  },
-  spacedWrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    marginVertical: 8
-  },
-  button: {
-    padding: 12
-  },
-  text: {
-    color: COLORS.PRIMARY.LIGHT
-  }
-});
-//# sourceMappingURL=CustomHLSPlayerControls.js.map

package/lib/module/components/CustomHLSPlayerControls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","Text","TouchableOpacity","StyleSheet","COLORS","CustomControls","handleControlPress","createElement","style","styles","wrapper","button","onPress","text","spacedWrapper","create","flexDirection","justifyContent","marginVertical","padding","color","PRIMARY","LIGHT"],"sourceRoot":"../../../src","sources":["components/CustomHLSPlayerControls.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/CustomHLSPlayerControls.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type ControlType = 'play' | 'stop' | 'pause' | 'resume' | 'seekForward' | 'seekBackward' | 'seekToLive' | 'setVolume';
-export interface CustomControlsProps {
-    handleControlPress(action: ControlType, data?: any): void;
-}
-export declare const CustomControls: React.FC<CustomControlsProps>;
-//# sourceMappingURL=CustomHLSPlayerControls.d.ts.map

package/lib/typescript/components/CustomHLSPlayerControls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomHLSPlayerControls.d.ts","sourceRoot":"","sources":["../../../src/components/CustomHLSPlayerControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6DxD,CAAC"}

package/src/components/CustomHLSPlayerControls.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
-import { COLORS } from '../utils/theme';
-
-export type ControlType =
-  | 'play'
-  | 'stop'
-  | 'pause'
-  | 'resume'
-  | 'seekForward'
-  | 'seekBackward'
-  | 'seekToLive'
-  | 'setVolume';
-
-export interface CustomControlsProps {
-  handleControlPress(action: ControlType, data?: any): void;
-}
-
-export const CustomControls: React.FC<CustomControlsProps> = ({
-  handleControlPress,
-}) => {
-  return (
-    <View>
-      <View style={styles.wrapper}>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('play')}
-        >
-          <Text style={styles.text}>Play</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('stop')}
-        >
-          <Text style={styles.text}>Stop</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('pause')}
-        >
-          <Text style={styles.text}>Pause</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('resume')}
-        >
-          <Text style={styles.text}>Resume</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.spacedWrapper}>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('seekForward', 5)}
-        >
-          <Text style={styles.text}>Forward 5 sec</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('seekBackward', 5)}
-        >
-          <Text style={styles.text}>Backward 5 sec</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.spacedWrapper}>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('seekToLive')}
-        >
-          <Text style={styles.text}>Go to Live</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => handleControlPress('setVolume', 50)}
-        >
-          <Text style={styles.text}>Low Volume to `50`</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: { flexDirection: 'row', justifyContent: 'space-evenly' },
-  spacedWrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    marginVertical: 8,
-  },
-  button: { padding: 12 },
-  text: { color: COLORS.PRIMARY.LIGHT },
-});