fixing flicker on sealed video playback

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

@@ -39,27 +39,27 @@ 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">
-                <div class="frame">
-                  <img class="thumb" src={asset.thumb} alt="topic asset" />
-                  { state.error && (
-                    <div class="failed">
-                      <Spin size="large" delay={250} />
-                    </div>
-                  )}
-                  { !state.error && (
-                    <div class="loading">
-                      <Spin size="large" delay={250} />
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-            { !state.loading && (
-              <video autoplay="true" controls src={state.url} width={state.width} height={state.height} 
-                  playsinline="true" />
-            )}
+            <div class="wrapper">
+              { !state.loaded && (
+                  <div class="frame">
+                    <img class="thumb" src={asset.thumb} alt="topic asset" />
+                    { state.error && (
+                      <div class="failed">
+                        <Spin size="large" delay={250} />
+                      </div>
+                    )}
+                    { !state.error && (
+                      <div class="loading">
+                        <Spin size="large" delay={250} />
+                      </div>
+                    )}
+                  </div>
+              )}
+              { !state.loading && (
+                <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);
     },