update theme events, validation & promisify setTheme

daily-co · Jul 21, 2021 · db1d0d4 · db1d0d4
1 parent 23f36cd
commit db1d0d4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 42 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -76,7 +76,8 @@ export type DailyEvent =
   | 'meeting-session-updated'
   | 'waiting-participant-added'
   | 'waiting-participant-updated'
-  | 'waiting-participant-removed';
+  | 'waiting-participant-removed'
+  | 'theme-updated';
 
 export type DailyMeetingState =
   | 'new'
@@ -576,6 +577,11 @@ export interface DailyEventObjectLangUpdated {
   langSetting: DailyLanguageSetting;
 }
 
+export interface DailyEventObjectThemeUpdated {
+  action: Extract<DailyEvent, 'theme-updated'>;
+  theme: DailyThemeConfig;
+}
+
 export type DailyEventObject<
   T extends DailyEvent = any
 > = T extends DailyEventObjectAppMessage['action']
@@ -616,6 +622,8 @@ export type DailyEventObject<
   ? DailyEventObjectActiveSpeakerModeChange
   : T extends DailyEventObjectLangUpdated['action']
   ? DailyEventObjectLangUpdated
+  : T extends DailyEventObjectThemeUpdated['action']
+  ? DailyEventObjectThemeUpdated
   : any;
 
 export interface DailyFaceInfo {
@@ -775,7 +783,7 @@ export interface DailyCall {
   setShowLocalVideo(show: boolean): DailyCall;
   setShowParticipantsBar(show: boolean): DailyCall;
   theme(): DailyThemeConfig;
-  setTheme(theme: DailyThemeConfig): DailyCall;
+  setTheme(theme: DailyThemeConfig): Promise<DailyThemeConfig>;
   showLocalVideo(): boolean;
   showParticipantsBar(): boolean;
   detectAllFaces(): Promise<{

diff --git a/src/module.js b/src/module.js
@@ -37,7 +37,7 @@ import {
   // events
   DAILY_EVENT_IFRAME_READY_FOR_LAUNCH_CONFIG,
   DAILY_EVENT_IFRAME_LAUNCH_CONFIG,
-  DAILY_EVENT_SET_THEME,
+  DAILY_EVENT_THEME_UPDATED,
   DAILY_EVENT_LOADING,
   DAILY_EVENT_LOADED,
   DAILY_EVENT_LOAD_ATTEMPT_FAILED,
@@ -80,6 +80,7 @@ import {
 
   // internals
   //
+  DAILY_METHOD_SET_THEME,
   DAILY_METHOD_START_CAMERA,
   DAILY_METHOD_SET_INPUT_DEVICES,
   DAILY_METHOD_SET_OUTPUT_DEVICE,
@@ -186,7 +187,7 @@ export {
 export {
   DAILY_EVENT_IFRAME_READY_FOR_LAUNCH_CONFIG,
   DAILY_EVENT_IFRAME_LAUNCH_CONFIG,
-  DAILY_EVENT_SET_THEME,
+  DAILY_EVENT_THEME_UPDATED,
   DAILY_EVENT_LOADING,
   DAILY_EVENT_LOADED,
   DAILY_EVENT_LOAD_ATTEMPT_FAILED,
@@ -373,17 +374,25 @@ const FRAME_PROPS = {
         return true;
       };
       if (
-        ('light' in o && !('dark' in o)) ||
-        (!('light' in o) && 'dark' in o)
+        typeof o !== 'object' ||
+        !(('light' in o && 'dark' in o) || 'colors' in o)
       ) {
-        // Must define both themes
+        // Must define either both themes or colors
         console.error(
-          'Theme must contain either both "light" and "dark" properties, or color keys.',
+          'Theme must contain either both "light" and "dark" properties, or "colors".',
           o
         );
         return false;
       }
       if ('light' in o && 'dark' in o) {
+        if (!('colors' in o.light)) {
+          console.error('Light theme is missing "colors" property.', o);
+          return false;
+        }
+        if (!('colors' in o.dark)) {
+          console.error('Dark theme is missing "colors" property.', o);
+          return false;
+        }
         return (
           containsValidColors(o.light.colors) &&
           containsValidColors(o.dark.colors)
@@ -1891,20 +1900,37 @@ export default class DailyIframe extends EventEmitter {
   }
 
   setTheme(theme) {
-    if (this._callObjectMode) {
-      console.error('setTheme is not available in callObject mode');
-      return this;
-    }
-    this.validateProperties({
-      theme,
-    });
-    this.properties.theme = {
-      ...theme,
-    };
-    this._messageChannel.sendMessageToDailyJs({
-      action: DAILY_EVENT_SET_THEME,
+    return new Promise((resolve, reject) => {
+      if (this._callObjectMode) {
+        reject('setTheme is not available in callObject mode');
+        return;
+      }
+      try {
+        this.validateProperties({
+          theme,
+        });
+        this.properties.theme = {
+          ...theme,
+        };
+        // Send message to Prebuilt UI Iframe driver
+        this.sendMessageToCallMachine({
+          action: DAILY_METHOD_SET_THEME,
+          theme: this.properties.theme,
+        });
+        // Emit theme-updated event to callFrame
+        try {
+          this.emit(DAILY_EVENT_THEME_UPDATED, {
+            action: DAILY_EVENT_THEME_UPDATED,
+            theme: this.properties.theme,
+          });
+        } catch (e) {
+          console.log("could not emit 'theme-updated'");
+        }
+        resolve(this.properties.theme);
+      } catch (e) {
+        reject(e);
+      }
     });
-    return this;
   }
 
   detectAllFaces() {
@@ -2142,26 +2168,10 @@ export default class DailyIframe extends EventEmitter {
   handleMessageFromCallMachine(msg) {
     switch (msg.action) {
       case DAILY_EVENT_IFRAME_READY_FOR_LAUNCH_CONFIG:
-        this._messageChannel.sendMessageToCallMachine(
-          {
-            action: DAILY_EVENT_IFRAME_LAUNCH_CONFIG,
-            ...this.properties,
-          },
-          null,
-          this._iframe,
-          this._callFrameId
-        );
-        break;
-      case DAILY_EVENT_SET_THEME:
-        this._messageChannel.sendMessageToCallMachine(
-          {
-            action: DAILY_EVENT_SET_THEME,
-            ...this.properties,
-          },
-          null,
-          this._iframe,
-          this._callFrameId
-        );
+        this.sendMessageToCallMachine({
+          action: DAILY_EVENT_IFRAME_LAUNCH_CONFIG,
+          ...this.properties,
+        });
         break;
       case DAILY_EVENT_LOADED:
         if (this._loadedCallback) {

diff --git a/src/shared-with-pluot-core/CommonIncludes.js b/src/shared-with-pluot-core/CommonIncludes.js
@@ -45,7 +45,7 @@ export const DAILY_CAMERA_ERROR_CAM_AND_MIC_IN_USE = 'cam-mic-in-use';
 export const DAILY_EVENT_IFRAME_READY_FOR_LAUNCH_CONFIG =
   'iframe-ready-for-launch-config';
 export const DAILY_EVENT_IFRAME_LAUNCH_CONFIG = 'iframe-launch-config';
-export const DAILY_EVENT_SET_THEME = 'set-theme';
+export const DAILY_EVENT_THEME_UPDATED = 'theme-updated';
 export const DAILY_EVENT_LOADING = 'loading';
 export const DAILY_EVENT_LOAD_ATTEMPT_FAILED = 'load-attempt-failed';
 export const DAILY_EVENT_LOADED = 'loaded';
@@ -111,6 +111,7 @@ export const MAX_APP_MSG_SIZE = 1024 * 4;
 
 export const IFRAME_MESSAGE_MARKER = 'iframe-call-message';
 
+export const DAILY_METHOD_SET_THEME = 'set-theme';
 export const DAILY_METHOD_START_CAMERA = 'start-camera';
 export const DAILY_METHOD_SET_INPUT_DEVICES = 'set-input-devices';
 export const DAILY_METHOD_SET_OUTPUT_DEVICE = 'set-output-device';