@reactoo/watchtogether-sdk-js 2.6.85 → 2.6.87

package/example/bulk_join_room/bulk_join_room_2.html

@@ -64,6 +64,12 @@
             <input type="checkbox" id="fetch-names" onchange="applySettingsFromForm()">
         </div>
 
+        <div class="form-group --advanced">
+            <label for="talents-select">Talents</label>
+            <select id="talents-select"></select>
+            <button type="button" onclick="addTalent()">Add</button>
+        </div>
+
         <div class="form-group">
             <button type="button" class="--advanced" onclick="resetSettings()">Reset settings</button>
             <button type="button" class="--high-quality" onclick="toggleAdvancedSettings()">Toggle advanced settings</button>
@@ -144,10 +150,15 @@
         instanceType: "reactooDemo",
         swaggerUrl: "https://api.reactoo.com/v3/swagger.json",
         fetchNames: false,
+        talentsSelect: [],
         participantsNames: [],
         emojiSparkingInterval: 180,
     };
 
+    const talents = {
+        'harry-kane': {displayname: 'Harry Kane', bio: 'Professional footballer'},
+    };
+
     const gifsCount_lq = 32; // Number of gifs in ./persons_gifs_lq folder
     const gifsCount_hq = 17; //  Number of gifs in ./persons_gifs_hq folder
     let gifsCount = gifsCount_hq + gifsCount_lq;
@@ -169,6 +180,7 @@
             instanceType: document.getElementById("instance-type"),
             swaggerUrl: document.getElementById("swagger-url"),
             fetchNames: document.getElementById("fetch-names"),
+            talentsSelect: document.getElementById("talents-select"),
             participantsNames: document.getElementById("participants-names"),
             emojiSparkingInterval: document.getElementById("emoji-sparking-interval"),
         },
@@ -222,7 +234,9 @@
         if (deleteInstead) {
             url.searchParams.delete(settingsUrlParameterName);
         } else {
-            url.searchParams.set(settingsUrlParameterName, JSON.stringify(settings));
+            const copyOfSettings = JSON.parse(JSON.stringify(settings));
+            delete copyOfSettings.talentsSelect;
+            url.searchParams.set(settingsUrlParameterName, JSON.stringify(copyOfSettings));
         }
         history.replaceState (null, '', url);
     }
@@ -277,6 +291,8 @@
         elements.form.fetchNames.checked = settings.fetchNames;
         elements.form.participantsNames.value = settings.participantsNames.join("\n");
         elements.form.emojiSparkingInterval.value = settings.emojiSparkingInterval;
+
+        updateTalentsSelectList();
     }
 
     // ====================== Main Logic ==================================
@@ -292,7 +308,6 @@
         if (usedGifsIds.length >= gifsCount) {
             usedGifsIds = [];
             usedGifsTimes++;
-
         }
 
         const availableGifsIds = new Array(gifsCount).fill().map((_, index) => index+1).filter(e => !usedGifsIds.includes(e));
@@ -305,8 +320,6 @@
             randomNotUsedGifId = Math.min(...availableGifsIds);
         }
 
-        // console.log(randomNotUsedGifId);
-
         if (randomNotUsedGifId) {
             usedGifsIds.push(randomNotUsedGifId);
             return randomNotUsedGifId;
@@ -315,7 +328,7 @@
         }
     }
 
-    function createParticipant(participantOrder) {
+    function createParticipant(participantOrder, talentKey) {
 
         // const gifId = getRandomNotUsedGifId();
         const gifId = getRandomNotUsedGifId() + usedGifsTimes * gifsCount;
@@ -326,11 +339,11 @@
 
         let gifUrl;
 
-        if (settings.participantsHighQuality){
-            // console.log("hq");
+        if (talentKey) {
+            gifUrl = `./persons_gifs_talent/${talentKey}.mp4`;
+        } else if (settings.participantsHighQuality) {
             gifUrl = `./persons_gifs_hq/${gifId - usedGifsTimes * gifsCount}.mp4`;
         } else {
-            // console.log("lq");
             gifUrl = `./persons_gifs_lq/${gifId - usedGifsTimes * gifsCount}.gif`;
         }
 
@@ -345,7 +358,7 @@
         let canvasElement;
         let canvasContext;
 
-        if (settings.participantsHighQuality){
+        if (talentKey || settings.participantsHighQuality){
             canvasElement = document.createElement('video')
             canvasElement.setAttribute('title', `Video ID - ` + gifId);
             canvasElement.src = gifUrl;
@@ -355,7 +368,6 @@
             canvasElement.autoplay = true;
             canvasElement.loop = true;
             containerElement.appendChild(canvasElement);
-            // console.log(canvasElement);
         } else {
             canvasElement = document.createElement('canvas');
             canvasElement.setAttribute('title', `Gif ID - ` + gifId);
@@ -363,11 +375,6 @@
             containerElement.appendChild(canvasElement);
         }
 
-        // const canvasElement = document.createElement('canvas');
-        // canvasElement.setAttribute('title', `Gif ID - ` + gifId);
-        // const canvasContext = canvasElement.getContext('2d');
-        // containerElement.appendChild(canvasElement);
-
         let spaceElement = document.createElement('div');
         spaceElement.classList.add('space');
         containerElement.appendChild(spaceElement);
@@ -453,7 +460,7 @@
 
         let participant;
 
-        if (settings.participantsHighQuality){
+        if (talentKey || settings.participantsHighQuality){
             participant = {
                 gifId,
                 gifUrl,
@@ -466,30 +473,31 @@
                 loginPromise: sdkInstance.auth.deviceLogin(false, gifId),
                 session: null, // Will be set after room join
                 handRaised: false,
+                talentKey,
             };
 
+            if (talentKey) {
+                participant.loginPromise = participant.loginPromise.then(() => sdkInstance.user.updateUserSelf({
+                    displayname: talents[talentKey].displayname,
+                    bio: talents[talentKey].bio,
+                }));
+            }
+
             if (settings.fetchNames) {
-                participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
+                participant.loginPromise = participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
                     .then(response => {
                         participant.displayname = response.data.displayname;
                         participantNameElement.value = response.data.displayname;
                     });
-
             }
 
             elements.participantsList.appendChild(containerElement);
             return Promise.resolve(participant);
-
-
         } else {
             return fetch(gifUrl)
                 .then(response => {
                     const imageDecoder = new ImageDecoder({data: response.body, type: 'image/gif'});
 
-                    // if(typeof canvasElement !== "object") {
-                    //     console.log(settings.participantsHighQuality, typeof settings.participantsHighQuality, typeof canvasElement);
-                    // }
-
                     participant = {
                         gifId,
                         gifUrl,
@@ -508,7 +516,7 @@
                     };
 
                     if (settings.fetchNames) {
-                        participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
+                        participant.loginPromise = participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
                             .then(response => {
                                 participant.displayname = response.data.displayname;
                                 participantNameElement.value = response.data.displayname;
@@ -534,7 +542,6 @@
                         });
                 });
         }
-
     }
 
     function createParticipants(participantsCount = settings.participantsCount) {
@@ -565,13 +572,10 @@
         });
     }
 
-    function createSingleParticipant() {
+    function createSingleParticipant(talentKey = null) {
         const participantOrder = participants.filter(p => p).length;
 
-        console.log(participantOrder);
-
-
-        createParticipant(participantOrder)
+        createParticipant(participantOrder, talentKey)
             .then(participant => participants[participant.gifId] = participant);
     }
 
@@ -582,6 +586,11 @@
                     participant.imageDecoder.close();
                 }
 
+                if (participant.talentKey) {
+                    settings.talentsSelect = settings.talentsSelect.filter(key => key !== participant.talentKey);
+                    updateTalentsSelectList();
+                }
+
                 participant.sdkInstance.auth.logout();
                 usedGifsIds.splice(usedGifsIds.indexOf(participant.gifId), 1);
                 document.querySelector('.participant-container[data-participant-id="' + participant.gifId + '"]').remove();
@@ -597,6 +606,12 @@
                     if (participant.imageDecoder) {
                         participant.imageDecoder.close();
                     }
+
+                    if (participant.talentKey) {
+                        settings.talentsSelect = settings.talentsSelect.filter(key => key !== participant.talentKey);
+                        updateTalentsSelectList();
+                    }
+
                     participant.sdkInstance.auth.logout();
                     usedGifsIds.splice(usedGifsIds.indexOf(participant.gifId), 1);
                     document.querySelector('.participant-container[data-participant-id="' + participant.gifId + '"]').remove();
@@ -815,6 +830,38 @@
             });
     }
 
+    function updateTalentsSelectList() {
+        elements.form.talentsSelect.innerHTML = "";
+
+        const infoOptionElement = document.createElement('option');
+        infoOptionElement.setAttribute('value', null);
+        infoOptionElement.innerHTML = 'Select talent';
+        infoOptionElement.disabled = true;
+        infoOptionElement.selected = true;
+        elements.form.talentsSelect.append(infoOptionElement);
+
+        Object.keys(talents).forEach(talentKey => {
+            const talentName = talents[talentKey].displayname;
+            const optionElement = document.createElement('option');
+            optionElement.setAttribute('value', 'talent-' + talentKey);
+            optionElement.innerHTML = talentName;
+            optionElement.disabled = settings.talentsSelect.includes(talentKey);
+            elements.form.talentsSelect.append(optionElement);
+        });
+    }
+
+    function addTalent() {
+        const selectedTalentKey = elements.form.talentsSelect.value?.replace('talent-', '');
+
+        if (selectedTalentKey !== 'null') {
+            settings.talentsSelect.push(selectedTalentKey);
+            createSingleParticipant(selectedTalentKey);
+            setSettingsToUrl();
+        }
+
+        updateTalentsSelectList();
+    }
+
     // ====================== Initialization ==============================
 
     document.addEventListener("DOMContentLoaded", function() {
@@ -827,6 +874,7 @@
         }
 
         fillSettingsForm();
+        updateTalentsSelectList();
     });
 
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.6.85",
+  "version": "2.6.87",
   "description": "Javascript SDK for Reactoo",
   "main": "src/index.js",
   "unpkg": "dist/watchtogether-sdk.min.js",

package/src/models/asset.js

@@ -21,9 +21,9 @@ let asset =  function() {
 			return this.__privates.auth.__client
 				.then(client => client.apis.asset.getAssetById({id}))
 		},
-        updateAsset: ({id, assetType, title, roomIds} = {}) => {
+        updateAsset: ({id, assetType, title, roomIds, customAttributes} = {}) => {
             return this.__privates.auth.__client
-                .then(client => client.apis.asset.updateAsset({id}, {requestBody:{assetType, title, roomIds}}))
+                .then(client => client.apis.asset.updateAsset({id}, {requestBody:{assetType, title, roomIds, customAttributes}}))
         },
         deleteAsset: (id) => {
             return this.__privates.auth.__client

package/src/models/room.js

@@ -208,11 +208,11 @@ let room = function () {
 
 		},
 
-		roomRecorder: ({roomId, operation = 'get', config, outputs, destinationIds} = {}) => {
+		roomRecorder: ({roomId, operation = 'get', config, outputs, destinationIds, screenWidth, screenHeight} = {}) => {
 			return this.__privates.auth.__client
 				.then(client => client.apis.wt.recordRoom({}, {
 					requestBody: {
-						roomId, operation, config, outputs, destinationIds
+						roomId, operation, config, outputs, destinationIds, screenWidth, screenHeight
 					}
 				}))
 		},