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

package/lib/typescript/redux/index.d.ts

@@ -1,11 +1,11 @@
 export declare const store: import("redux").Store<import("redux").EmptyObject & {
     messages: {
         messages: import("@100mslive/react-native-hms").HMSMessage[];
-        pinnedMessages: import("src/types").PinnedMessage[];
+        pinnedMessages: import("../types").PinnedMessage[];
     };
     app: {
-        peerState: import("src/utils/types").PeerTrackNode[];
-        pipModeStatus: import("src/utils/types").PipModes;
+        peerState: import("../utils/types").PeerTrackNode[];
+        pipModeStatus: import("../utils/types").PipModes;
         rtcStats: Record<string, import("@100mslive/react-native-hms").HMSLocalAudioStats | import("@100mslive/react-native-hms").HMSRemoteAudioStats | import("@100mslive/react-native-hms").HMSRemoteVideoStats | import("@100mslive/react-native-hms").HMSLocalVideoStats[] | undefined>;
         hlsAspectRatio: {
             value: number;
@@ -19,28 +19,31 @@ export declare const store: import("redux").Store<import("redux").EmptyObject &
             enableHLSPlayerControls: boolean;
             showCustomHLSPlayerControls: boolean;
         };
-        modalType: import("src/utils/types").ModalTypes;
+        modalType: import("../utils/types").ModalTypes;
         peerToUpdate: import("@100mslive/react-native-hms").HMSPeer | null;
-        meetingState: import("src/types").MeetingState;
+        meetingState: import("../types").MeetingState;
         startingHLSStream: boolean;
         insetViewMinimized: boolean;
-        miniviewPeerTrackNode: import("src/utils/types").PeerTrackNode | null;
-        localPeerTrackNode: import("src/utils/types").PeerTrackNode | null;
+        miniviewPeerTrackNode: import("../utils/types").PeerTrackNode | null;
+        localPeerTrackNode: import("../utils/types").PeerTrackNode | null;
         gridViewActivePage: number;
         startingOrStoppingRecording: boolean;
-        fullScreenPeerTrackNode: import("src/utils/types").PeerTrackNode | null;
-        screensharePeerTrackNodes: import("src/utils/types").PeerTrackNode[];
-        notifications: import("src/types").Notification[];
+        fullScreenPeerTrackNode: import("../utils/types").PeerTrackNode | null;
+        screensharePeerTrackNodes: import("../utils/types").PeerTrackNode[];
+        notifications: import("../types").Notification[];
         activeChatBottomSheetTab: "Chat" | "Participants";
         chatFilterSheetVisible: boolean;
         chatMoreActionsSheetVisible: boolean;
-        chatState: import("src/types").ChatState | null;
+        chatState: import("../types").ChatState | null;
         handleBackButton: boolean;
         autoEnterPipMode: boolean;
         editUsernameDisabled: boolean;
         selectedMessageForAction: import("@100mslive/react-native-hms").HMSMessage | null;
         initialRole: import("@100mslive/react-native-hms").HMSRole | null;
         chatPeerBlacklist: string[];
+        hlsDescriptionPaneVisible: boolean;
+        hlsFullScreen: boolean;
+        hlsStreamPaused_android: boolean;
     };
     user: {
         userName: string;
@@ -59,8 +62,8 @@ export declare const store: import("redux").Store<import("redux").EmptyObject &
         token: string | undefined;
         isHLSFlow: boolean;
         roles: import("@100mslive/react-native-hms").HMSRole[];
-        iosBuildConfig: import("@100mslive/react-native-room-kit").HMSIOSScreenShareConfig | null;
-        onLeave: import("@100mslive/react-native-room-kit").OnLeaveHandler | undefined;
+        iosBuildConfig: import("..").HMSIOSScreenShareConfig | null;
+        onLeave: import("..").OnLeaveHandler | undefined;
     };
     hmsStates: {
         isLocalAudioMuted: boolean | undefined;
@@ -87,9 +90,9 @@ export declare const store: import("redux").Store<import("redux").EmptyObject &
     };
     polls: {
         pollName: string;
-        pollConfig: import("src/redux/actionTypes").PollConfig;
-        navigationStack: import("src/redux/actionTypes").CreatePollStages[];
-        questions: import("src/redux/actionTypes").PollQuestionUI[];
+        pollConfig: import("./actionTypes").PollConfig;
+        navigationStack: import("./actionTypes").CreatePollStages[];
+        questions: import("./actionTypes").PollQuestionUI[];
         deleteConfirmationVisible: boolean;
         selectedPollQuestionIndex: number | null;
         launchingPoll: boolean;

package/lib/typescript/redux/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/redux/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAA2B,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/redux/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAA2B,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAC"}

package/lib/typescript/redux/reducers/appState.d.ts

@@ -49,6 +49,9 @@ type IntialStateType = {
     selectedMessageForAction: null | HMSMessage;
     initialRole: HMSRole | null;
     chatPeerBlacklist: string[];
+    hlsDescriptionPaneVisible: boolean;
+    hlsFullScreen: boolean;
+    hlsStreamPaused_android: boolean;
 };
 declare const appReducer: (state: IntialStateType | undefined, action: ActionType) => IntialStateType;
 export default appReducer;

package/lib/typescript/redux/reducers/appState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appState.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/appState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAA2B,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,mBAAmB,EACnB,OAAO,EACR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3D,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,aAAa,EAAE,QAAQ,CAAC;IACxB,QAAQ,EAAE,MAAM,CACd,MAAM,EACJ,SAAS,GACT,kBAAkB,GAClB,kBAAkB,EAAE,GACpB,mBAAmB,GACnB,mBAAmB,CACtB,CAAC;IACF,cAAc,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,EAAE;QACV,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,YAAY,EAAE,OAAO,CAAC;QACtB,uBAAuB,EAAE,OAAO,CAAC;QACjC,2BAA2B,EAAE,OAAO,CAAC;KACtC,CAAC;IACF,SAAS,EAAE,UAAU,CAAC;IACtB,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,IAAI,GAAG,aAAa,CAAC;IAC5C,kBAAkB,EAAE,IAAI,GAAG,aAAa,CAAC;IACzC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,uBAAuB,EAAE,IAAI,GAAG,aAAa,CAAC;IAC9C,yBAAyB,EAAE,aAAa,EAAE,CAAC;IAC3C,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,wBAAwB,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/D,sBAAsB,EAAE,OAAO,CAAC;IAChC,2BAA2B,EAAE,OAAO,CAAC;IACrC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wBAAwB,EAAE,IAAI,GAAG,UAAU,CAAC;IAC5C,WAAW,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,UAAU,+CAEN,UAAU,KACjB,eAkQF,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"appState.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/appState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAA2B,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,mBAAmB,EACnB,OAAO,EACR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3D,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,aAAa,EAAE,QAAQ,CAAC;IACxB,QAAQ,EAAE,MAAM,CACd,MAAM,EACJ,SAAS,GACT,kBAAkB,GAClB,kBAAkB,EAAE,GACpB,mBAAmB,GACnB,mBAAmB,CACtB,CAAC;IACF,cAAc,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,EAAE;QACV,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,YAAY,EAAE,OAAO,CAAC;QACtB,uBAAuB,EAAE,OAAO,CAAC;QACjC,2BAA2B,EAAE,OAAO,CAAC;KACtC,CAAC;IACF,SAAS,EAAE,UAAU,CAAC;IACtB,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,IAAI,GAAG,aAAa,CAAC;IAC5C,kBAAkB,EAAE,IAAI,GAAG,aAAa,CAAC;IACzC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,uBAAuB,EAAE,IAAI,GAAG,aAAa,CAAC;IAC9C,yBAAyB,EAAE,aAAa,EAAE,CAAC;IAC3C,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,wBAAwB,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/D,sBAAsB,EAAE,OAAO,CAAC;IAChC,2BAA2B,EAAE,OAAO,CAAC;IACrC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wBAAwB,EAAE,IAAI,GAAG,UAAU,CAAC;IAC5C,WAAW,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,yBAAyB,EAAE,OAAO,CAAC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,uBAAuB,EAAE,OAAO,CAAC;CAClC,CAAC;AA0CF,QAAA,MAAM,UAAU,+CAEN,UAAU,KACjB,eAoRF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/typescript/redux/reducers/index.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     messages: {
         messages: import("@100mslive/react-native-hms").HMSMessage[];
-        pinnedMessages: import("src/types").PinnedMessage[];
+        pinnedMessages: import("../../types").PinnedMessage[];
     };
     app: {
-        peerState: import("src/utils/types").PeerTrackNode[];
-        pipModeStatus: import("src/utils/types").PipModes;
+        peerState: import("../../utils/types").PeerTrackNode[];
+        pipModeStatus: import("../../utils/types").PipModes;
         rtcStats: Record<string, import("@100mslive/react-native-hms").HMSLocalAudioStats | import("@100mslive/react-native-hms").HMSRemoteAudioStats | import("@100mslive/react-native-hms").HMSRemoteVideoStats | import("@100mslive/react-native-hms").HMSLocalVideoStats[] | undefined>;
         hlsAspectRatio: {
             value: number;
@@ -19,28 +19,31 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
             enableHLSPlayerControls: boolean;
             showCustomHLSPlayerControls: boolean;
         };
-        modalType: import("src/utils/types").ModalTypes;
+        modalType: import("../../utils/types").ModalTypes;
         peerToUpdate: import("@100mslive/react-native-hms").HMSPeer | null;
-        meetingState: import("src/types").MeetingState;
+        meetingState: import("../../types").MeetingState;
         startingHLSStream: boolean;
         insetViewMinimized: boolean;
-        miniviewPeerTrackNode: import("src/utils/types").PeerTrackNode | null;
-        localPeerTrackNode: import("src/utils/types").PeerTrackNode | null;
+        miniviewPeerTrackNode: import("../../utils/types").PeerTrackNode | null;
+        localPeerTrackNode: import("../../utils/types").PeerTrackNode | null;
         gridViewActivePage: number;
         startingOrStoppingRecording: boolean;
-        fullScreenPeerTrackNode: import("src/utils/types").PeerTrackNode | null;
-        screensharePeerTrackNodes: import("src/utils/types").PeerTrackNode[];
-        notifications: import("src/types").Notification[];
+        fullScreenPeerTrackNode: import("../../utils/types").PeerTrackNode | null;
+        screensharePeerTrackNodes: import("../../utils/types").PeerTrackNode[];
+        notifications: import("../../types").Notification[];
         activeChatBottomSheetTab: "Chat" | "Participants";
         chatFilterSheetVisible: boolean;
         chatMoreActionsSheetVisible: boolean;
-        chatState: import("src/types").ChatState | null;
+        chatState: import("../../types").ChatState | null;
         handleBackButton: boolean;
         autoEnterPipMode: boolean;
         editUsernameDisabled: boolean;
         selectedMessageForAction: import("@100mslive/react-native-hms").HMSMessage | null;
         initialRole: import("@100mslive/react-native-hms").HMSRole | null;
         chatPeerBlacklist: string[];
+        hlsDescriptionPaneVisible: boolean;
+        hlsFullScreen: boolean;
+        hlsStreamPaused_android: boolean;
     };
     user: {
         userName: string;
@@ -59,8 +62,8 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         token: string | undefined;
         isHLSFlow: boolean;
         roles: import("@100mslive/react-native-hms").HMSRole[];
-        iosBuildConfig: import("@100mslive/react-native-room-kit").HMSIOSScreenShareConfig | null;
-        onLeave: import("@100mslive/react-native-room-kit").OnLeaveHandler | undefined;
+        iosBuildConfig: import("../..").HMSIOSScreenShareConfig | null;
+        onLeave: import("../..").OnLeaveHandler | undefined;
     };
     hmsStates: {
         isLocalAudioMuted: boolean | undefined;
@@ -87,9 +90,9 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     };
     polls: {
         pollName: string;
-        pollConfig: import("src/redux/actionTypes").PollConfig;
-        navigationStack: import("src/redux/actionTypes").CreatePollStages[];
-        questions: import("src/redux/actionTypes").PollQuestionUI[];
+        pollConfig: import("../actionTypes").PollConfig;
+        navigationStack: import("../actionTypes").CreatePollStages[];
+        questions: import("../actionTypes").PollQuestionUI[];
         deleteConfirmationVisible: boolean;
         selectedPollQuestionIndex: number | null;
         launchingPoll: boolean;

package/lib/typescript/redux/reducers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAOG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAOG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -140,14 +140,14 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.10.2",
+    "@100mslive/react-native-hms": "1.10.4",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",
     "lottie-react-native": "5.1.6",
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": "^2.12.1",
+    "react-native-gesture-handler": "~2.15.0",
     "react-native-linear-gradient": "^2.7.3",
     "react-native-modal": "^12.1.0",
     "react-native-reanimated": ">=2.17.0",

package/src/Icons/CC/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface CCIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'medium';
+  enabled?: boolean;
+}
+
+export const CCIcon: React.FC<CCIconProps> = ({
+  style,
+  size = 'medium',
+  enabled = false,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={
+        enabled
+          ? require('./assets/cc-on-med.png')
+          : require('./assets/cc-off-med.png')
+      }
+      style={[
+        styles.icon,
+        size === 'medium' ? styles.medSize : null,
+        iconStyles,
+        style,
+      ]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  medSize: {
+    width: 32,
+    height: 32,
+  },
+});

package/src/Icons/Close/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface CloseIconProps extends Omit<ImageProps, 'source'> {}
+interface CloseIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'normal' | 'medium';
+}
 
 export const CloseIcon: React.FC<CloseIconProps> = ({
   style,
+  size = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,8 +19,17 @@ export const CloseIcon: React.FC<CloseIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/close.png')}
-      style={[styles.icon, iconStyles, style]}
+      source={
+        size === 'medium'
+          ? require('./assets/close-med.png')
+          : require('./assets/close.png')
+      }
+      style={[
+        styles.icon,
+        size === 'medium' ? styles.medSize : null,
+        iconStyles,
+        style,
+      ]}
       {...restProps}
     />
   );
@@ -30,4 +42,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  medSize: {
+    width: 32,
+    height: 32,
+  },
 });

package/src/Icons/Maximize/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface MaximizeIconProps extends Omit<ImageProps, 'source'> {}
+interface MaximizeIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'normal' | 'medium';
+}
 
 export const MaximizeIcon: React.FC<MaximizeIconProps> = ({
   style,
+  size = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,8 +19,17 @@ export const MaximizeIcon: React.FC<MaximizeIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/maximize.png')}
-      style={[styles.icon, iconStyles, style]}
+      source={
+        size === 'medium'
+          ? require('./assets/maximize-med.png')
+          : require('./assets/maximize.png')
+      }
+      style={[
+        styles.icon,
+        iconStyles,
+        size === 'medium' ? styles.medSize : null,
+        style,
+      ]}
       {...restProps}
     />
   );
@@ -30,4 +42,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  medSize: {
+    width: 32,
+    height: 32,
+  },
 });

package/src/Icons/Minimize/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface MinimizeIconProps extends Omit<ImageProps, 'source'> {}
+interface MinimizeIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'normal' | 'medium';
+}
 
 export const MinimizeIcon: React.FC<MinimizeIconProps> = ({
   style,
+  size = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,8 +19,17 @@ export const MinimizeIcon: React.FC<MinimizeIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/minimize.png')}
-      style={[styles.icon, iconStyles, style]}
+      source={
+        size === 'medium'
+          ? require('./assets/minimize-med.png')
+          : require('./assets/minimize.png')
+      }
+      style={[
+        styles.icon,
+        iconStyles,
+        size === 'medium' ? styles.medSize : null,
+        style,
+      ]}
       {...restProps}
     />
   );
@@ -30,4 +42,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  medSize: {
+    width: 32,
+    height: 32,
+  },
 });

package/src/Icons/Pause/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface PauseIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'med';
+}
+
+export const PauseIcon: React.FC<PauseIconProps> = ({
+  style,
+  size = 'med',
+  ...restProps
+}) => {
+  if (size !== 'med') return null;
+
+  return (
+    <Image
+      source={require('./assets/pause-med.png')}
+      style={[styles.icon, styles.medIcon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  medIcon: {
+    width: 48,
+    height: 48,
+  },
+});

package/src/Icons/Play/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface PlayIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'med';
+}
+
+export const PlayIcon: React.FC<PlayIconProps> = ({
+  style,
+  size = 'med',
+  ...restProps
+}) => {
+  if (size !== 'med') return null;
+
+  return (
+    <Image
+      source={require('./assets/play-med.png')}
+      style={[styles.icon, styles.medIcon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  medIcon: {
+    width: 48,
+    height: 48,
+  },
+});

package/src/Icons/SeekArrow/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface SeekArrowIconProps extends Omit<ImageProps, 'source'> {
+  type: 'forward' | 'backward';
+}
+
+export const SeekArrowIcon: React.FC<SeekArrowIconProps> = ({
+  style,
+  type,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={
+        type === 'forward'
+          ? require('./assets/seek-forward-arrow.png')
+          : require('./assets/seek-backward-arrow.png')
+      }
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -47,3 +47,7 @@ export * from './TrashBin';
 export * from './Add';
 export * from './PollVote';
 export * from './CheckBox';
+export * from './CC';
+export * from './Pause';
+export * from './Play';
+export * from './SeekArrow';

package/src/components/AnimatedHeader.tsx

@@ -8,7 +8,6 @@ import Animated, {
 import type { SharedValue } from 'react-native-reanimated';
 
 import { useHeaderHeight } from './Header';
-import { useIsHLSViewer } from '../hooks-util';
 
 export interface AnimatedHeaderProps {
   offset: SharedValue<number>;
@@ -18,23 +17,16 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
   children,
   offset,
 }) => {
-  const isHLSViewer = useIsHLSViewer();
   const headerHeight = useHeaderHeight();
 
   const animatedStyles = useAnimatedStyle(() => {
-    if (isHLSViewer) {
-      return {
-        opacity: offset.value,
-        transform: [{ translateY: 0 }],
-      };
-    }
     return {
       opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
       transform: [
         { translateY: interpolate(offset.value, [0, 1], [-headerHeight, 0]) },
       ],
     };
-  }, [headerHeight, isHLSViewer]);
+  }, [headerHeight]);
 
   const animatedProps = useAnimatedProps((): {
     pointerEvents: 'none' | 'auto';

package/src/components/Chat/ChatBanner.tsx

@@ -44,6 +44,7 @@ const styles = StyleSheet.create({
     // transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
   },
   landscapeCoverImage: {
+    height: '30%',
     flexShrink: 1,
     resizeMode: 'contain',
   },