From db1d0d4d3355163230b6d9d76c6b7044cf72d58c Mon Sep 17 00:00:00 2001 From: Christian Stuff Date: Tue, 20 Jul 2021 09:16:01 +0200 Subject: [PATCH] update theme events, validation & promisify setTheme --- index.d.ts | 12 ++- src/module.js | 88 +++++++++++--------- src/shared-with-pluot-core/CommonIncludes.js | 3 +- 3 files changed, 61 insertions(+), 42 deletions(-) diff --git a/index.d.ts b/index.d.ts index 03df0a3c..b5df516b 100644 --- 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; + 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; showLocalVideo(): boolean; showParticipantsBar(): boolean; detectAllFaces(): Promise<{ diff --git a/src/module.js b/src/module.js index 63525404..bffad451 100644 --- 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 index c36c211f..08833085 100644 --- 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';