cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix: fix zoomable videos (#947) 

fixes #946
This commit is contained in:
Nolan Lawson 2019-02-06 21:00:30 -08:00 committed by GitHub
parent 503378a400
commit 157f5db690
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/routes/_components/dialog/components/MediaDialog.html
View File

@ -11,20 +11,26 @@
<div class="media-scroll-item"> <div class="media-scroll-item">
<div class="media-scroll-item-inner"> <div class="media-scroll-item-inner">
<div class="media-scroll-item-inner-inner"> <div class="media-scroll-item-inner-inner">
<PinchZoomable className='media-pinch-zoom' disabled={!pinchZoomMode} > {#if canPinchZoom}
<PinchZoomable className='media-pinch-zoom' disabled={!pinchZoomMode} >
<MediaInDialog {media} />
</PinchZoomable>
{:else}
<MediaInDialog {media} /> <MediaInDialog {media} />
</PinchZoomable> {/if}
</div> </div>
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
<div class="media-controls-outside"> <div class="media-controls-outside">
<IconButton {#if canPinchZoom}
className="media-control-button media-control-button-dummy-spacer" <IconButton
href="#fa-search" className="media-control-button media-control-button-dummy-spacer"
label="" href="#fa-search"
/> label=""
/>
{/if}
{#if dots.length > 1} {#if dots.length > 1}
<div class="media-controls"> <div class="media-controls">
<IconButton <IconButton
@ -54,14 +60,16 @@
/> />
</div> </div>
{/if} {/if}
<IconButton {#if canPinchZoom}
className="media-control-button" <IconButton
pressable={true} className="media-control-button"
pressed={pinchZoomMode} pressable={true}
label={pinchZoomMode ? 'Disable pinch-zoom mode' : 'Enable pinch-zoom mode'} pressed={pinchZoomMode}
href="#fa-search" label={pinchZoomMode ? 'Disable pinch-zoom mode' : 'Enable pinch-zoom mode'}
on:click="togglePinchZoomMode()" href="#fa-search"
/> on:click="togglePinchZoomMode()"
/>
{/if}
</div> </div>
</div> </div>
</ModalDialog> </ModalDialog>
@ -206,7 +214,8 @@
}), }),
computed: { computed: {
length: ({ mediaItems }) => mediaItems.length, length: ({ mediaItems }) => mediaItems.length,
dots: ({ length }) => times(length, i => ({ i })) dots: ({ length }) => times(length, i => ({ i })),
canPinchZoom: ({ mediaItems }) => !mediaItems.some(media => media.type === 'video')
}, },
components: { components: {
ModalDialog, ModalDialog,