chore: spike remote media player

DailyPlayground/ios/DailyPlayground.xcodeproj/project.pbxproj

@@ -562,7 +562,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -634,7 +634,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

DailyPlayground/ios/DailyPlayground.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

DailyPlayground/ios/Podfile.lock

@@ -525,7 +525,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: f98dec9f199b7b51db586fe0140f509fabd5cc54
   FBReactNativeSpec: 56c4cf7cce9f95fd386001dba21437b7d6b33993
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
@@ -538,10 +538,10 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
+  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
+  RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
   RCTRequired: eff60a46da0f496a6c76c8f60108c20626860d27
   RCTTypeSafety: 8cc8a45d0e2f93f1b42b5b2bbf23c4143f19935a
   React: 8a8fc19196a41141ecb5bde33c97091cdc25ccd8

DailyPlayground/src/api.ts

@@ -1,25 +1,45 @@
-const newRoomEndpoint =
-  'https://f433xwze36.execute-api.us-west-2.amazonaws.com/default/dailyRnDemoNewCall';
+const DAILY_TOKEN = 'somedailytoken';
+interface IDailyResponse {
+  id: string;
+  name: string;
+  api_created: boolean;
+  privacy: string;
+  url: string;
+  created_at: string;
+  config?: {
+    exp?: number;
+    start_audio_off?: boolean;
+    start_video_off?: boolean;
+    max_participants?: boolean;
+  };
+}
+async function createRoom() {
+  // generate a random room name
+  const roomName = 'daily-room-' + Math.floor(Math.random() * 999999);
+  try {
+    const response: Response = await fetch('https://api.daily.co/v1/rooms/', {
+      method: 'POST',
+      ...getApiConfig(),
+      body: JSON.stringify({
+        name: roomName,
+      }),
+    });
+    const data = await response.json();
+    console.log('data', data.url);
+  } catch (error: unknown) {
+    console.error(error);
+  }
 
-/**
- * Create a short-lived room for demo purposes.
- *
- * IMPORTANT: this is purely a "demo-only" API, and *not* how we recommend
- * you create rooms in real production code. In your code, we recommend that you:
- * - Create rooms by invoking the Daily.co REST API from your own backend server
- *   (or from the Daily.co dashboard if you're OK with creating rooms manually).
- * - Pass an "exp" (expiration) parameter to the Daily.co REST endpoint so you
- *   don't end up with a huge number of live rooms.
- *
- * See https://docs.daily.co/reference#create-room for more information on how
- * to use the Daily.co REST API to create rooms.
- */
-async function createRoom(): Promise<{ url: string }> {
-  let response = await fetch(newRoomEndpoint);
-  return await response.json();
+  return undefined;
+}
 
-  // Comment out the above and uncomment the below, using your own URL
-  // return { url: "https://your-domain.daily.co/hello" };
+function getApiConfig() {
+  return {
+    headers: {
+      Authorization: `Bearer ${DAILY_TOKEN}`,
+      'Content-Type': 'application/json',
+    },
+  };
 }
 
 export default { createRoom };

DailyPlayground/src/components/CallPanel/CallPanel.tsx

@@ -24,6 +24,7 @@ import {
   containsScreenShare,
   participantCount,
   getMessage,
+  isClass,
 } from './callState';
 import Tile, { TileType } from '../Tile/Tile';
 import CallMessage from '../CallMessage/CallMessage';
@@ -256,7 +257,7 @@ const CallPanel = (props: Props) => {
     let thumbnails: JSX.Element[] = [];
     Object.entries(callState.callItems).forEach(([id, callItem]) => {
       let tileType: TileType;
-      if (isScreenShare(id)) {
+      if (isScreenShare(id) || isClass(id)) {
         tileType = TileType.Full;
       } else if (isLocal(id) || containsScreenShare(callState.callItems)) {
         tileType = TileType.Thumbnail;
@@ -265,6 +266,7 @@ const CallPanel = (props: Props) => {
       } else {
         tileType = TileType.Half;
       }
+
       const tile = (
         <Tile
           key={id}
@@ -273,7 +275,7 @@ const CallPanel = (props: Props) => {
           mirror={usingFrontCamera && isLocal(id)}
           type={tileType}
           robotId={isLocal(id) ? 'robots-tile-local' : `robots-tile-${id}`}
-          disableAudioIndicators={isScreenShare(id)}
+          disableAudioIndicators={isScreenShare(id) || isClass(id)}
           onPress={
             isLocal(id)
               ? flipCamera

DailyPlayground/src/components/CallPanel/callState.ts

@@ -99,6 +99,17 @@ function callReducer(callState: CallState, action: CallStateAction) {
 function getCallItems(participants: { [id: string]: DailyParticipant }) {
   let callItems = { ...initialCallState.callItems }; // Ensure we *always* have a local participant
   for (const [id, participant] of Object.entries(participants)) {
+    if (
+      // @ts-ignore
+      participant.participantType === 'remote-media-player' &&
+      shouldIncludeClass(participant)
+    ) {
+      callItems.class = {
+        videoTrackState: participant.tracks.rmpVideo,
+        audioTrackState: participant.tracks.rmpAudio,
+      };
+      continue;
+    }
     callItems[id] = {
       videoTrackState: participant.tracks.video,
       audioTrackState: participant.tracks.audio,
@@ -113,6 +124,14 @@ function getCallItems(participants: { [id: string]: DailyParticipant }) {
   return callItems;
 }
 
+function shouldIncludeClass(participant: DailyParticipant): boolean {
+  const trackStatesForInclusion = ['loading', 'playable', 'interrupted'];
+  return (
+    trackStatesForInclusion.includes(participant.tracks?.rmpVideo?.state) ||
+    trackStatesForInclusion.includes(participant.tracks?.rmpAudio?.state)
+  );
+}
+
 function shouldIncludeScreenCallItem(participant: DailyParticipant): boolean {
   const trackStatesForInclusion = ['loading', 'playable', 'interrupted'];
   return (
@@ -132,6 +151,10 @@ function isScreenShare(id: string) {
   return id.endsWith('-screen');
 }
 
+function isClass(id: string) {
+  return id === 'class';
+}
+
 function containsScreenShare(callItems: { [id: string]: CallItem }) {
   return Object.keys(callItems).some((id) => isScreenShare(id));
 }
@@ -167,6 +190,7 @@ export {
   callReducer,
   isLocal,
   isScreenShare,
+  isClass,
   containsScreenShare,
   participantCount,
   getMessage,

DailyPlayground/src/components/Tray/Tray.tsx

@@ -48,6 +48,19 @@ export default function Tray({ disabled, onClickLeaveCall }: Props) {
     callObject?.setLocalAudio(isMicMuted);
   }, [callObject, isMicMuted]);
 
+  const startPlayback = useCallback(async () => {
+    const res = await callObject?.startRemoteMediaPlayer({
+      url: 'an mp4 url',
+      settings: {
+        state: 'play',
+      },
+    });
+    if (res?.session_id) {
+      callObject?.updateParticipant(res?.session_id, {
+        setSubscribedTracks: {rmpAudio: true, rmpVideo: true}
+      });
+    }
+  }, [callObject]);
   /**
    * Start listening for participant changes when callObject is set (i.e. when the component mounts).
    * This event will capture any changes to your audio/video mute state.
@@ -106,6 +119,11 @@ export default function Tray({ disabled, onClickLeaveCall }: Props) {
           text={isCameraMuted ? 'Turn on' : 'Turn off'}
           type="camera"
         />
+        <TrayButton
+          onPress={startPlayback}
+          text='Class'
+          type="play"
+        />
       </View>
       <TrayButton
         disabled={disabled}

DailyPlayground/src/components/TrayButton/TrayButton.tsx

@@ -16,7 +16,7 @@ type Props = {
   muted?: boolean;
   robotId?: string;
   text: string;
-  type: 'mic' | 'camera' | 'leave';
+  type: 'mic' | 'camera' | 'leave' | 'play';
 };
 export default function TrayButton({
   disabled = false,
@@ -42,6 +42,11 @@ export default function TrayButton({
     source = muted
       ? require('../../../assets/mic-off.png')
       : require('../../../assets/mic.png');
+  } else if (type === 'play') {
+    robotId = `robots-btn-mic-${muted ? 'mute' : 'unmute'}`;
+    source = muted
+      ? require('../../../assets/mic-off.png')
+      : require('../../../assets/mic.png');
   }
 
   return (