make listen and record blocks in list entry view all same width

livingtongues · Mar 7, 2024 · 644be58 · 644be58
1 parent 7914aa7
commit 644be58
Show file tree

Hide file tree

Showing 15 changed files with 239 additions and 124 deletions.
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -50,7 +50,7 @@
     "firebase-admin": "^12.0.0",
     "instantsearch.js": "^4.33.2",
     "jszip": "^3.7.1",
-    "kitbook": "1.0.0-beta.12",
+    "kitbook": "1.0.0-beta.23",
     "logrocket": "^2.1.2",
     "lz-string": "^1.4.4",
     "recordrtc": "^5.6.2",

diff --git a/packages/site/src/lib/stores/columns.ts b/packages/site/src/lib/stores/columns.ts
@@ -93,7 +93,6 @@ const tableCacheKey = 'table_columns_08.17.2023'; // rename when adding more col
 if (browser)
   cachedColumns = JSON.parse(localStorage.getItem(tableCacheKey));
 
-
 export const preferredColumns = writable(cachedColumns || defaultColumns);
 
 if (browser) {

diff --git a/packages/site/src/routes/[dictionaryId]/entries/Audio.svelte b/packages/site/src/routes/[dictionaryId]/entries/Audio.svelte
@@ -6,7 +6,7 @@
 
   export let entry: ExpandedEntry;
   // export let sound_file: ExpandedAudio; // TODO
-  export let minimal = false;
+  export let context: 'list' | 'table' | 'entry';
   export let canEdit = false;
 
   $: sound_file = entry.sound_files?.[0];
@@ -31,6 +31,7 @@
     <div
       class="{$$props.class} hover:bg-gray-200 flex flex-col items-center
         justify-center cursor-pointer select-none"
+      title={$page.data.t('audio.listen')}
       use:longpress={800}
       on:longpress={() => initAudio(sound_file.fb_storage_path)}
       on:click={() => {
@@ -39,16 +40,34 @@
         else
           initAudio(sound_file.fb_storage_path);
       }}>
-      <slot {playing} />
+      {#if context === 'list'}
+        <span class:text-blue-700={playing} class="i-material-symbols-hearing text-xl mt-1" />
+        <div class="text-xs text-center line-clamp-1 break-all">
+          {$page.data.t('audio.listen')}
+        </div>
+      {:else if context === 'table'}
+        <span class:text-blue-700={playing} class="i-material-symbols-hearing text-lg mt-1" />
+      {:else if context === 'entry'}
+        <span
+          class:text-blue-700={playing}
+          class="i-material-symbols-hearing text-lg mb-1" />
+        <div class="text-center text-xs">
+          {$page.data.t('audio.listen')}
+          {#if canEdit}
+            +
+            {$page.data.t('audio.edit_audio')}
+          {/if}
+        </div>
+      {/if}
     </div>
   {:else if canEdit}
     <div
       class="{$$props.class} hover:bg-gray-300 flex flex-col items-center
         justify-center cursor-pointer select-none"
       on:click={toggle}>
-      <span class="i-uil-microphone text-lg m-1 text-blue-800" />
-      {#if !minimal}
-        <div class="text-blue-800 text-xs">
+      <span class="i-uil-microphone text-lg m-1" class:text-blue-800={context === 'list' || context === 'table'} />
+      {#if context === 'entry'}
+        <div class="text-xs">
           {$page.data.t('audio.add_audio')}
         </div>
       {/if}

diff --git a/packages/site/src/routes/[dictionaryId]/entries/Audio.variants.ts b/packages/site/src/routes/[dictionaryId]/entries/Audio.variants.ts
@@ -0,0 +1,70 @@
+import type { Variant, Viewport } from 'kitbook'
+import type Component from './Audio.svelte'
+
+export const viewports: Viewport[] = [
+  { width: 80, height: 80 },
+]
+
+export const languages = []
+
+const entry = {
+  sound_files: [
+    { fb_storage_path: '' }
+  ],
+}
+
+export const variants: Variant<Component>[] = [
+  {
+    name: 'List sound',
+    props: {
+      entry,
+      context: 'list',
+    },
+  },
+  {
+    name: 'Table sound',
+    props: {
+      entry,
+      context: 'table',
+    },
+  },
+  {
+    name: 'Entry sound',
+    props: {
+      entry,
+      context: 'entry',
+    },
+  },
+  {
+    name: 'Entry sound, can edit',
+    props: {
+      entry,
+      context: 'entry',
+      canEdit: true,
+    },
+  },
+  {
+    name: 'List no sound, can edit',
+    props: {
+      entry: {},
+      context: 'list',
+      canEdit: true,
+    },
+  },
+  {
+    name: 'Table no sound, can edit',
+    props: {
+      entry: {},
+      context: 'table',
+      canEdit: true,
+    },
+  },
+  {
+    name: 'Entry no sound, can edit',
+    props: {
+      entry: {},
+      context: 'entry',
+      canEdit: true,
+    },
+  },
+]
diff --git a/packages/site/src/routes/[dictionaryId]/entries/list/+page.svelte b/packages/site/src/routes/[dictionaryId]/entries/list/+page.svelte
@@ -14,6 +14,7 @@
   import { navigating, page } from '$app/stores';
   import { save_scroll_point, restore_scroll_point } from '$lib/helpers/scrollPoint';
   import { browser } from '$app/environment';
+  import List from './List.svelte';
 
   const search: InstantSearch = getContext('search');
   let pixels_from_top = 0;
@@ -53,9 +54,7 @@
       </Doc>
     {/each}
   {:else}
-    {#each entries as entry (entry.id)}
-      <ListEntry dictionary={$dictionary} entry={convert_and_expand_entry(entry, $page.data.t)} />
-    {/each}
+    <List {entries} dictionary={$dictionary} />
   {/if}
 </Hits>
 <Pagination {search} />

diff --git a/packages/site/src/routes/[dictionaryId]/entries/list/List.svelte b/packages/site/src/routes/[dictionaryId]/entries/list/List.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { ActualDatabaseEntry, IDictionary } from '@living-dictionaries/types';
+  import ListEntry from './ListEntry.svelte';
+  import { convert_and_expand_entry } from '$lib/transformers/convert_and_expand_entry';
+  import { page } from '$app/stores';
+
+  export let entries: ActualDatabaseEntry[]
+  export let dictionary: IDictionary
+  export let canEdit = false
+</script>
+
+{#each entries as entry (entry.id)}
+  <ListEntry {canEdit} {dictionary} entry={convert_and_expand_entry(entry, $page.data.t)} />
+{/each}
diff --git a/packages/site/src/routes/[dictionaryId]/entries/list/List.variants.ts b/packages/site/src/routes/[dictionaryId]/entries/list/List.variants.ts
@@ -0,0 +1,32 @@
+import type { Variant, Viewport } from 'kitbook'
+import type Component from './List.svelte'
+import { basic_mock_dictionary } from '$lib/mocks/dictionaries'
+
+export const viewports: Viewport[] = [
+  { width: 300, height: 150 },
+  { width: 800, height: 150 },
+]
+
+export const variants: Variant<Component>[] = [
+  {
+    props: {
+      entries: [
+        {
+          id: '1',
+          lx: 'hi - I have audio',
+          sfs: [
+            {
+              path: ''
+            }
+          ]
+        },
+        {
+          id: '2',
+          lx: 'hi, I am here too',
+        },
+      ],
+      canEdit: true,
+      dictionary: basic_mock_dictionary
+    },
+  },
+]
diff --git a/packages/site/src/routes/[dictionaryId]/entries/list/ListEntry.svelte b/packages/site/src/routes/[dictionaryId]/entries/list/ListEntry.svelte
@@ -29,10 +29,7 @@
   class="flex rounded shadow my-1 overflow-hidden items-stretch border-green-300"
   style="margin-right: 2px;">
   {#if entry.sound_files?.[0] || canEdit}
-    <Audio class="bg-gray-100 p-2" {entry} {canEdit} minimal let:playing>
-      <span class:text-blue-700={playing} class="i-material-symbols-hearing text-2xl mt-1" />
-      {$page.data.t('audio.listen')}
-    </Audio>
+    <Audio class="bg-gray-100 py-1.5 px-1 w-60px" {entry} {canEdit} context="list" />
   {/if}
   <a
     href={'/' + dictionary.id + '/entry/' + entry.id}

diff --git a/packages/site/src/routes/[dictionaryId]/entries/table/Cell.svelte b/packages/site/src/routes/[dictionaryId]/entries/table/Cell.svelte
@@ -28,9 +28,7 @@
   class:sompeng={column.display === 'Sompeng'}
   class="h-full w-full flex cell">
   {#if column.field === 'audio'}
-    <Audio class="h-full text-sm" minimal {canEdit} {entry} let:playing>
-      <span class:text-blue-700={playing} class="i-material-symbols-hearing text-lg mt-1" />
-    </Audio>
+    <Audio class="h-full text-sm" context="table" {canEdit} {entry} />
   {:else if column.field === 'photo'}
     {@const first_photo = entry.senses?.[0]?.photo_files?.[0]}
     {#if first_photo}

diff --git a/packages/site/src/routes/[dictionaryId]/entries/table/EntriesTable.svelte b/packages/site/src/routes/[dictionaryId]/entries/table/EntriesTable.svelte
@@ -4,6 +4,7 @@
   import ColumnTitle from './ColumnTitle.svelte';
   import Cell from './Cell.svelte';
   import { minutesAgo } from '$lib/helpers/time';
+  import { browser } from '$app/environment';
 
   export let columns: IColumn[];
   export let entries: ExpandedEntry[] = [];
@@ -22,7 +23,7 @@
     valueupdate: { field: string; newValue: string | string[]; entryId: string };
   }>();
 
-  const isFirefox = /Firefox/i.test(navigator.userAgent);
+  const isFirefox = browser && /Firefox/i.test(navigator.userAgent);
 </script>
 
 <div

diff --git a/packages/site/src/routes/[dictionaryId]/entries/table/setUpColumns.ts b/packages/site/src/routes/[dictionaryId]/entries/table/setUpColumns.ts
@@ -3,37 +3,38 @@ import { get } from 'svelte/store';
 import { page } from '$app/stores';
 import { vernacularName } from '$lib/helpers/vernacularName';
 import { DICTIONARIES_WITH_VARIANTS } from '$lib/constants';
+import { browser } from '$app/environment';
 
 export function setUpColumns(columns: IColumn[], dictionary: IDictionary): IColumn[] {
   const cols = columns.filter((column) => !column.hidden);
 
   const glossIndex = cols.findIndex((col) => col.field === 'gloss');
-  if (glossIndex >= 0) {
-    const { data: { t } } = get(page)
+  if (browser && glossIndex >= 0) {
+    const { data } = get(page)
     const glossColumns: IColumn[] = [];
     dictionary.glossLanguages.forEach((bcp) => {
       glossColumns.push({
         field: 'gloss',
         bcp,
         width: cols[glossIndex].width,
         sticky: cols[glossIndex].sticky || false,
-        display: t({dynamicKey: 'gl.' + bcp, fallback: bcp}),
+        display: data?.t({dynamicKey: 'gl.' + bcp, fallback: bcp}),
         explanation: vernacularName(bcp),
       });
     });
     cols.splice(glossIndex, 1, ...glossColumns);
   }
 
   const exampleSentenceIndex = cols.findIndex((col) => col.field === 'example_sentence');
-  if (exampleSentenceIndex >= 0) {
-    const { data: { t } } = get(page)
+  if (browser && exampleSentenceIndex >= 0) {
+    const { data } = get(page)
     const exampleSentenceColumns: IColumn[] = [
       {
         field: 'example_sentence',
         bcp: 'vn', // vernacular
         width: cols[exampleSentenceIndex].width,
         sticky: cols[exampleSentenceIndex].sticky || false,
-        display: t('entry_field.example_sentence'),
+        display: data?.t('entry_field.example_sentence'),
       },
     ];
     dictionary.glossLanguages.forEach((bcp) => {
@@ -42,7 +43,7 @@ export function setUpColumns(columns: IColumn[], dictionary: IDictionary): IColu
         bcp,
         width: cols[exampleSentenceIndex].width,
         sticky: cols[exampleSentenceIndex].sticky || false,
-        display: `${t({ dynamicKey: `gl.${bcp}`, fallback: bcp})} ${t('entry_field.example_sentence')}`,
+        display: `${data?.t({ dynamicKey: `gl.${bcp}`, fallback: bcp})} ${data?.t('entry_field.example_sentence')}`,
       });
     });
     cols.splice(exampleSentenceIndex, 1, ...exampleSentenceColumns);

diff --git a/packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryMedia.svelte b/packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryMedia.svelte
@@ -22,22 +22,7 @@
 <div class="flex flex-col">
   {#if first_sound_file || canEdit}
     {#await import('../../entries/Audio.svelte') then { default: Audio }}
-      <Audio
-        {entry}
-        {canEdit}
-        class="h-20 mb-2 rounded-md bg-gray-100 !px-3"
-        let:playing>
-        <span
-          class:text-blue-700={playing}
-          class="i-material-symbols-hearing text-2xl mt-1" />
-        <div class="text-gray-600 text-sm mt-1">
-          {$page.data.t('audio.listen')}
-          {#if canEdit}
-            +
-            {$page.data.t('audio.edit_audio')}
-          {/if}
-        </div>
-      </Audio>
+      <Audio {entry} {canEdit} context="entry" class="h-20 mb-2 rounded-md bg-gray-100 !px-3" />
     {/await}
   {/if}
 

diff --git a/packages/site/src/routes/kitbook/+layout.js b/packages/site/src/routes/kitbook/+layout.js
@@ -8,13 +8,13 @@ import { groupColocatedModulesIntoPages, layoutLoad, pagesStore } from 'kitbook'
  * Kitbook changes in the future will cause this file to be regenerated. Your glob patterns will be preserved as long as you only edit the patterns inside the array brackets and nothing else.
  */
 const components = import.meta.glob(['/src/**/*.svelte']);
-const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { as: 'raw' });
+const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { query: '?raw', import: 'default' });
 const variants = import.meta.glob(['/src/**/*.variants.ts']);
-const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { as: 'raw' });
+const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { query: '?raw', import: 'default' });
 const compositions = import.meta.glob(['/src/**/*.composition']);
-const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { as: 'raw' });
+const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { query: '?raw', import: 'default' });
 const markdown = import.meta.glob(['/src/**/*.md', '/README.md']);
-const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { as: 'raw' });
+const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { query: '?raw', import: 'default' });
 export const _pages = groupColocatedModulesIntoPages({ components, componentsRaw, variants, variantsRaw, compositions, compositionsRaw, markdown, markdownRaw });
 let firstLoad = true;
 if (firstLoad) {

diff --git a/packages/site/src/routes/kitbook/[...file]/+page.svelte b/packages/site/src/routes/kitbook/[...file]/+page.svelte
@@ -4,4 +4,4 @@
 
 <MainPage {data} />
 
-<!-- Kitbook route files were auto-generated by [email protected].6^ - Do not edit as they will be overwritten next time kitbook updates routing. -->
+<!-- Kitbook route files were auto-generated by [email protected].17^ - Do not edit as they will be overwritten next time kitbook updates routing. -->
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@

		<MainPage {data} />

		<!-- Kitbook route files were auto-generated by [email protected].6^ - Do not edit as they will be overwritten next time kitbook updates routing. -->
		<!-- Kitbook route files were auto-generated by [email protected].17^ - Do not edit as they will be overwritten next time kitbook updates routing. -->