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

restoring modals for mobile image and video view

Browse Source
This commit is contained in:
Roland Osborne 2022-08-30 23:09:44 -07:00
parent 3b470680a5
commit a04d6b9f4c
2 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -12,12 +12,12 @@ export function ImageAsset({ thumbUrl, fullUrl }) {
const popout = () => {
if (dimension.width / dimension.height > window.innerWidth / window.innerHeight) {
let width = Math.floor(window.innerWidth * 8 / 10);
let width = Math.floor(window.innerWidth * 9 / 10);
let height = Math.floor(width * dimension.height / dimension.width);
actions.setPopout(width, height);
}
else {
let height = Math.floor(window.innerHeight * 8 / 10);
let height = Math.floor(window.innerHeight * 9 / 10);
let width = Math.floor(height * dimension.width / dimension.height);
actions.setPopout(width, height);
}
@ -38,23 +38,15 @@ export function ImageAsset({ thumbUrl, fullUrl }) {
return <img style={{ height: '100%', objectFit: 'contain' }} src={thumbUrl} alt="" />
}}
</ReactResizeDetector>
{ state.display !== 'small' && (
<div class="viewer">
<div class="overlay" style={{ width: dimension.width, height: dimension.height }}
onClick={popout} />
<Modal centered={true} visible={state.popout} width={state.width + 12} bodyStyle={{ width: '100%', height: 'auto', paddingBottom: 6, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={actions.clearPopout}>
<div class="viewer">
<div class="overlay" style={{ width: dimension.width, height: dimension.height }}
onClick={popout} />
<Modal centered={true} visible={state.popout} width={state.width + 12} bodyStyle={{ width: '100%', height: 'auto', paddingBottom: 6, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={actions.clearPopout}>
<div onClick={actions.clearPopout}>
<img style={{ width: '100%', objectFit: 'contain' }} src={fullUrl} alt="topic image" />
</Modal>
</div>
)}
{ state.display === 'small' && !state.popout && (
<div class="viewer" style={{ width: dimension.width, height: dimension.height }} onClick={popout} />
)}
{ state.display === 'small' && state.popout && (
<div class="fullscreen" onClick={clearPopout} onTouchEnd={clearPopout}>
<img class="image" src={fullUrl} />
</div>
)}
</div>
</Modal>
</div>
</ImageAssetWrapper>
)
}

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

@ -40,14 +40,10 @@ export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) {
<VideoCameraOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
</div>
)}
{ state.active && state.display === 'small' && (
<video autoplay controls src={hdUrl} width={dimension.width} height={dimension.height} />
)}
{ state.display !== 'small' && (
<Modal centered={true} visible={state.active} width={state.width + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={actions.clearActive}>
<video autoplay={true} controls src={hdUrl} width={state.width} height={state.height} />
</Modal>
)}
<Modal centered={true} visible={state.active} width={state.width + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={actions.clearActive}>
<video autoplay="true" controls src={hdUrl} width={state.width} height={state.height}
playsinline="true" />
</Modal>
</div>
</VideoAssetWrapper>
)