fixing flicker on sealed video playback

net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx

@@ -39,8 +39,8 @@ export function VideoAsset({ asset }) {
         )}
         <Modal centered={true} style={{ backgroundColor: '#aacc00', padding: 0 }} visible={state.active} width={state.width + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd', margin: 0 }} footer={null} destroyOnClose={true} closable={false} onCancel={actions.clearActive}>
           <VideoModalWrapper>
-            { state.loading && (
             <div class="wrapper">
+              { !state.loaded && (
                   <div class="frame">
                     <img class="thumb" src={asset.thumb} alt="topic asset" />
                     { state.error && (
@@ -54,12 +54,12 @@ export function VideoAsset({ asset }) {
                       </div>
                     )}
                   </div>
-              </div>
               )}
               { !state.loading && (
-              <video autoplay="true" controls src={state.url} width={state.width} height={state.height} 
-                  playsinline="true" />
+                <video style={{display: state.loaded ? 'block' : 'none'}} autoplay="true" controls src={state.url} width={state.width} height={state.height} 
+                    playsinline="true" onLoadedData={actions.setLoaded} />
               )}
+            </div>
           </VideoModalWrapper>
         </Modal>
       </div>

net/web/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js

@@ -13,6 +13,7 @@ export function useVideoAsset(asset) {
     loading: false,
     error: false,
     url: null,
+    loaded: false,
   });
 
   const updateState = (value) => {
@@ -24,11 +25,11 @@ export function useVideoAsset(asset) {
       if (asset.encrypted) {
         try {
           const view = index.current;
-          updateState({ active: true, width, height, error: false, loading: true, url: null });
+          updateState({ active: true, width, height, error: false, loaded: false, loading: true, url: null });
           const blob = await asset.getDecryptedBlob(() => view != index.current);
           const url = URL.createObjectURL(blob);
           revoke.current = url;
-          updateState({ loading: false, url });
+          updateState({ url, loading: false });
         }
         catch (err) {
           console.log(err);
@@ -50,6 +51,9 @@ export function useVideoAsset(asset) {
     setDimension: (dimension) => {
       updateState({ dimension });
     },
+    setLoaded: () => {
+      updateState({ loaded: true });
+    },
   };
 
   return { state, actions };

net/web/src/session/useSession.hook.js

@@ -167,7 +167,6 @@ export function useSession() {
       await ring.actions.decline(cardId, contactNode, contactToken, callId);
     },
     accept: async (call) => {
-console.log("ACCEPTING:", call);
       const { cardId, callId, contactNode, contactToken, calleeToken, iceUrl, iceUsername, icePassword } = call;
       await ring.actions.accept(cardId, callId, contactNode, contactToken, calleeToken, iceUrl, iceUsername, icePassword);
     },