fix: fix zoomable videos (#947)

fixes #946

src/routes/_components/dialog/components/MediaDialog.html

@@ -11,20 +11,26 @@
         <div class="media-scroll-item">
           <div class="media-scroll-item-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} />
-                </PinchZoomable>
+                {/if}
             </div>
           </div>
         </div>
       {/each}
     </div>
     <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}
         <div class="media-controls">
             <IconButton
@@ -54,14 +60,16 @@
             />
         </div>
       {/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>
 </ModalDialog>
@@ -206,7 +214,8 @@
     }),
     computed: {
       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: {
       ModalDialog,