feat: add splitpanes

Author: stafyniaksacha

client/components/MediaPreview.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive, inject, provide, watchEffect, watch } from 'vue'
 // @ts-ignore
+import { Pane, Splitpanes } from 'splitpanes'
+// @ts-ignore
 import { useRuntimeConfig, useRoute } from '#app'
 
 import type { PreviewState } from '../../types/preview'
@@ -76,11 +78,15 @@ watchEffect(() => {
         leave-from-class="transform scale-1 opacity-100"
         leave-to-class="transform scale-0 opacity-0"
       >
-        <div v-if="selectedAssetKey" v-focus tabindex="0" class="rounded border n-border-base drop-shadow-sm flex flex-1 relative n-bg-base h-full items-center justify-center">
-          <div class="rounded flex flex-1 h-full w-full">
-            <MediaPreviewImage class="w-6/12 md:w-7/12 lg:w-8/12" :selected-asset-key="selectedAssetKey" />
-            <MediaPreviewStats class="w-6/12 md:w-5/12 lg:w-4/12" :selected-asset-key="selectedAssetKey" />
-          </div>
+        <div v-if="selectedAssetKey" v-focus tabindex="0" class="border outline-none n-border-base drop-shadow-sm flex flex-1 relative n-bg-base h-full items-center justify-center">
+          <Splitpanes class="flex flex-1 h-full w-full">
+            <Pane class="border border-r border-base of-auto" min-size="30">
+              <MediaPreviewImage class="h-full" :selected-asset-key="selectedAssetKey" />
+            </Pane>
+            <Pane size="30" min-size="30">
+              <MediaPreviewStats class="h-full" :selected-asset-key="selectedAssetKey" />
+            </Pane>
+          </Splitpanes>
         </div>
       </Transition>
     </div>

client/nuxt.config.ts

@@ -11,6 +11,9 @@ export default defineNuxtConfig({
       publicDir: resolve(__dirname, '../dist/client')
     }
   },
+  css: [
+    'splitpanes/dist/splitpanes.css'
+  ],
   app: {
     baseURL: '/__media_viewer/client'
   },

client/pages/index.vue

@@ -209,3 +209,18 @@ onKeyStroke('ArrowLeft', (e) => {
     <MediaDropPlaceholder v-if="!selectedAssetKey" />
   </div>
 </template>
+
+<style>
+/* Splitpanes */
+.splitpanes__splitter{
+ --at-apply: relative;
+}
+.splitpanes__splitter:before {
+  --at-apply: absolute left-0 top-0 opacity-0;
+  content: '';
+  transition: opacity 0.4s;
+  z-index: 1;
+}
+.splitpanes--vertical > .splitpanes__splitter:before {left: -4px;right: -4px;height: 100%;}
+.splitpanes--horizontal > .splitpanes__splitter:before {top: -4px;bottom: -4px;width: 100%;}
+</style>

client/utils/snippets/html.ts

@@ -105,7 +105,7 @@ function generateHtmlDownloadSnippet (previewState: PreviewState) {
   return [
     '<a',
     `  href="${hostname}${previewState.stats.path}"`,
-    '  download,',
+    '  download',
     '>',
     `  Download ${previewState.stats.name}`,
     '</a>'

package.json

@@ -52,6 +52,7 @@
     "npm-run-all": "^4.1.5",
     "nuxt": "^3.2.0",
     "sirv": "^2.0.2",
+    "splitpanes": "^3.1.5",
     "standard-version": "^9.5.0",
     "typescript": "^4.9.5"
   }