@100mslive/react-native-room-kit 0.0.1

package/src/utils/theme.ts

@@ -0,0 +1,130 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from './types';
+
+export const FONTS = StyleSheet.create({
+  H1: {
+    fontSize: 72,
+    fontFamily: 'Inter-Bold',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    letterSpacing: -1.5,
+  },
+  H2: {
+    fontSize: 48,
+    fontFamily: 'Inter-Bold',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    letterSpacing: -0.5,
+  },
+  H3: {
+    fontSize: 40,
+    fontFamily: 'Inter-Bold',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    letterSpacing: 0.15,
+  },
+  H4: {
+    fontSize: 28,
+    fontFamily: 'Inter-Bold',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    letterSpacing: 0.25,
+  },
+  H5: {
+    fontSize: 24,
+    fontFamily: 'Inter-Bold',
+    fontWeight: '700',
+    fontStyle: 'normal',
+  },
+  H6: {
+    fontSize: 20,
+    fontFamily: 'Inter-Bold',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    letterSpacing: 0.15,
+  },
+});
+
+var APP_THEME: Theme = Theme.LIGHT;
+export const getAppTheme = () => APP_THEME;
+export const setAppTheme = (theme: Theme) => (APP_THEME = theme);
+
+export const COLORS = {
+  PRIMARY: {
+    LIGHT: '#66A1FF',
+    DEFAULT: '#2572ED',
+    DARK: '#143466',
+    DISABLED: '#3666B2',
+  },
+  SECONDARY: {
+    DIM: '#293042',
+    LIGHT: '#6B7D99',
+    DEFAULT: '#475366',
+    DARK: '#2D3440',
+    DISABLED: '#242A33',
+  },
+  BORDER: {
+    LIGHT: '#2D3440',
+    BRIGHT: '#272A31',
+    DEFAULT: '#1D1F27',
+    ACCENT: '#2471ED',
+  },
+  BLACK: '#000000',
+  WHITE: '#FFFFFF',
+  OVERLAY: 'rgba(34, 34, 34, 0.3)',
+  TEXT: {
+    HIGH_EMPHASIS: 'rgba(245, 249, 255, 0.95)', // '#F5F9FF'
+    MEDIUM_EMPHASIS: 'rgba(224, 236, 255, 0.80)', // '#E0ECFF'
+    DISABLED: 'rgba(195, 208, 229, 0.50)', // '#C3D0E5'
+    HIGH_EMPHASIS_ACCENT: 'rgba(255, 255, 255, 0.98)', // '#FFFFFF'
+    MEDIUM_EMPHASIS_ACCENT: 'rgba(255, 255, 255, 0.72)', // '#FFFFFF'
+    DISABLED_ACCENT: 'rgba(255, 255, 255, 0.48)', // '#FFFFFF'
+  },
+  SURFACE: {
+    BRIGHT: '#272A31',
+    DIM: '#11131A',
+    DEFAULT: '#191B23',
+    LIGHT: '#1D2229',
+    LIGHTER: '#272E38',
+    ON_SURFACE: {
+      LOW: '#8F9099',
+      HIGH: '#EFF0FA',
+    },
+  },
+  BACKGROUND: {
+    DIM: '#000000',
+    DIM_80: 'rgba(0, 0, 0, 0.8)',
+    DEFAULT: '#0B0E15',
+    DARK: '#090B0D',
+    DARKER: '#040405',
+    ERROR: '#B24751',
+  },
+  INDICATORS: {
+    WARNING: '#FFAB00',
+    ERROR: '#CC525F',
+    SUCCESS: '#36B37E',
+  },
+  TWIN: {
+    RED: '#fa1919',
+    YELLOW: '#FAC919',
+    GREEN: '#00AE63',
+    PURPLE: '#6554C0',
+    ORANGE: '#F69133',
+    CYAN: '#8FF5FB',
+  },
+  BASE: {
+    BLACK: '#000000',
+    WHITE: '#FFFFFF',
+  },
+  EXTENDED: {
+    PURPLE: '#7E47EB',
+  },
+  ALERT: {
+    ERROR: {
+      DIM: '#270005',
+      DEFAULT: '#C74E5B',
+      BRIGHT: '#FFB2B6',
+      BRIGHTER: '#FFEDEC',
+    },
+  },
+};

package/src/utils/types.ts

@@ -0,0 +1,95 @@
+import type { HMSPeer, HMSVideoTrack } from '@100mslive/react-native-hms';
+
+export type PeerTrackNode = {
+  id: string;
+  peer: HMSPeer;
+  track?: HMSVideoTrack;
+  isDegraded?: boolean;
+  // TODO: isDegraded should not be optional
+};
+
+export enum LayoutParams {
+  AUDIO = 'audio',
+  GRID = 'grid',
+  ACTIVE_SPEAKER = 'active speaker',
+  HERO = 'hero',
+  MINI = 'mini',
+  HLS = 'hls',
+  DEFAULT = '',
+}
+
+export enum TrackType {
+  LOCAL = 'local',
+  REMOTE = 'remote',
+  SCREEN = 'screen',
+  DEFAULT = '',
+}
+
+export enum ModalTypes {
+  CHANGE_ROLE_ACCEPT = 'changeRoleAccept',
+  SWITCH_AUDIO_OUTPUT = 'switchAudioOutput',
+  CHANGE_AUDIO_MODE = 'changeAudioMode',
+  CHANGE_ROLE = 'changeRole',
+  CHANGE_TRACK = 'changeTrackState',
+  CHANGE_TRACK_ROLE = 'changeTrackStateRole',
+  CHANGE_NAME = 'changeName',
+  HLS_STREAMING = 'hlsStreaming',
+  END_HLS_STREAMING = 'endHlsStreaming',
+  RECORDING = 'recording',
+  RESOLUTION = 'resolution',
+  RTC_STATS = 'rtcStats',
+  LAYOUT = 'layout',
+  SORTING = 'sorting',
+  LEAVE_MENU = 'leaveMenu',
+  LEAVE_ROOM = 'leaveRoom',
+  END_ROOM = 'endRoom',
+  SETTINGS = 'settings',
+  CHAT = 'chat',
+  ZOOM = 'zoom',
+  PREVIEW = 'preview',
+  PARTICIPANTS = 'participants',
+  VOLUME = 'volume',
+  AUDIO_MIXING_MODE = 'audioMixingMode',
+  SET_AUDIO_SHARE_VOLUME = 'setAudioShareVolume',
+  WELCOME_SETTINGS = 'welcomeSettings',
+  BULK_ROLE_CHANGE = 'bulkRoleChange',
+  PEER_SETTINGS = 'peerSettings',
+  STREAMING_QUALITY_SETTING = 'streamingQualitySetting',
+  HLS_PLAYER_ASPECT_RATIO = 'hlsPlayerAspectRatio',
+  DEFAULT = '',
+}
+
+export enum SortingType {
+  ALPHABETICAL = 'Alphabetical Order',
+  VIDEO_ON = 'Video On',
+  ROLE_PRIORITY = 'Role Priority',
+  DEFAULT = 'None',
+}
+
+export enum Theme {
+  LIGHT = 'Light',
+  DARK = 'Dark',
+}
+
+export enum PipModes {
+  NOT_AVAILABLE = -1,
+  ACTIVE = 0,
+  INACTIVE = 1,
+}
+
+export enum Constants {
+  MEET_URL = 'MEET_URL',
+}
+
+export type IOSBuildConfig = {
+  appGroup?: string;
+  preferredExtension?: string;
+};
+
+export const SUPPORTED_ASPECT_RATIOS = [
+  { value: 16 / 9, id: '16:9' },
+  { value: 9 / 16, id: '9:16' },
+  { value: 1, id: '1:1' },
+  { value: 4 / 3, id: '4:3' },
+  { value: 3 / 4, id: '3:4' },
+];

package/src/utils.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+
+const DEFAULT_JOINING_CONFIG = {
+  mutedAudio: true,
+  mutedVideo: true,
+  skipPreview: false,
+  audioMixer: false, // IOS only
+  musicMode: false, // IOS only
+  softwareDecoder: true, // Android only
+  autoResize: false, // Android only
+};
+
+let config = DEFAULT_JOINING_CONFIG;
+
+export const getJoinConfig = (): typeof DEFAULT_JOINING_CONFIG => {
+  if (
+    typeof global.joinConfig === 'object' &&
+    global.joinConfig.mutedAudio !== undefined
+  ) {
+    config = global.joinConfig;
+  }
+
+  return config;
+};