martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing flicker on sealed video playback

Browse Source
This commit is contained in:
Roland Osborne 2023-05-04 11:41:53 -07:00
parent 7ed591abf4
commit b4d15fce99
3 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -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}> <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> <VideoModalWrapper>
{ state.loading && ( <div class="wrapper">
<div class="wrapper"> { !state.loaded && (
<div class="frame"> <div class="frame">
<img class="thumb" src={asset.thumb} alt="topic asset" /> <img class="thumb" src={asset.thumb} alt="topic asset" />
{ state.error && ( { state.error && (
<div class="failed"> <div class="failed">
<Spin size="large" delay={250} /> <Spin size="large" delay={250} />
</div> </div>
)} )}
{ !state.error && ( { !state.error && (
<div class="loading"> <div class="loading">
<Spin size="large" delay={250} /> <Spin size="large" delay={250} />
</div> </div>
)} )}
</div> </div>
</div> )}
)} { !state.loading && (
{ !state.loading && ( <video style={{display: state.loaded ? 'block' : 'none'}} autoplay="true" controls src={state.url} width={state.width} height={state.height}
<video autoplay="true" controls src={state.url} width={state.width} height={state.height} playsinline="true" onLoadedData={actions.setLoaded} />
playsinline="true" /> )}
)} </div>
</VideoModalWrapper> </VideoModalWrapper>
</Modal> </Modal>
</div> </div>

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

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

1
net/web/src/session/useSession.hook.js
View File

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