@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/modal/__tests__/{WebGL3DR.spec.ts → Viewer3crWebGL.spec.ts}

@@ -1,9 +1,9 @@
 import { registerOnPayloadHandler, createInstance } from '@3cr/sdk-browser';
 import { nextTick } from 'vue';
-import WebGL3DR from '../WebGL3DR.vue';
 import { mount } from '@vue/test-utils';
+import Viewer3crWebGL from '@/components/modal/Viewer3crWebGL.vue';
 
-describe('WebGL3DR spec', () => {
+describe('Viewer3crWebGL spec', () => {
   const navigator = {
     userAgent: 'Android',
     storage: {
@@ -14,29 +14,29 @@ describe('WebGL3DR spec', () => {
   };
 
   it('creates instance', async () => {
-    mount(WebGL3DR);
+    mount(Viewer3crWebGL);
     await nextTick();
     expect(createInstance).toHaveBeenCalled();
     expect(registerOnPayloadHandler).toHaveBeenCalled();
   });
 
   it('should emit wheel event', () => {
-    const wrapper = mount(WebGL3DR);
-    const overlay = wrapper.find('#overlay');
+    const wrapper = mount(Viewer3crWebGL);
+    const overlay = wrapper.find('#canvas');
     overlay.trigger('wheel');
     expect(wrapper.emitted('wheel')).toBeTruthy();
   });
 
   it('should emit mouseover event', () => {
-    const wrapper = mount(WebGL3DR);
-    const overlay = wrapper.find('#overlay');
+    const wrapper = mount(Viewer3crWebGL);
+    const overlay = wrapper.find('#canvas');
     overlay.trigger('mouseover');
     expect(wrapper.emitted('mouseover')).toBeTruthy();
   });
 
   it('should emit mouseout event', () => {
-    const wrapper = mount(WebGL3DR);
-    const overlay = wrapper.find('#overlay');
+    const wrapper = mount(Viewer3crWebGL);
+    const overlay = wrapper.find('#canvas');
     overlay.trigger('mouseover');
     overlay.trigger('mouseout');
     expect(wrapper.emitted('mouseover')).toBeTruthy();
@@ -45,13 +45,13 @@ describe('WebGL3DR spec', () => {
 
   it('should test user agent', () => {
     vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator as any);
-    mount(WebGL3DR);
+    mount(Viewer3crWebGL);
     expect(document.head.children.length > 0).toBeTruthy();
   });
 
   it('should test storage', () => {
     vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator as any);
-    mount(WebGL3DR);
+    mount(Viewer3crWebGL);
     expect(global.navigator.storage).toBeTruthy();
   });
 });

package/src/components/modal/__tests__/ViewerNavigationDrawer.spec.ts

@@ -1,30 +1,290 @@
-import { VApp } from 'vuetify/components';
+import { VApp, VListItem, VRating } from 'vuetify/components';
 import { h } from 'vue';
 import { VueWrapper, mount, flushPromises } from '@vue/test-utils';
 import ViewerNavigationDrawer from '@/components/modal/ViewerNavigationDrawer.vue';
+import HistoryModal from '@/components/navigation/history/HistoryModal.vue';
+import { useDemoStore } from '@/stores/demo.store';
+import { createPinia, setActivePinia, storeToRefs } from 'pinia';
+import { defaultHotkeys, Hotkeys } from '@/functions/HotkeyScope';
+import { MockInstance } from '@vitest/spy';
+import { MockImportOriginal } from '@test/MockImportOriginal';
+import { useDrawerStore } from '@/stores/drawer.store';
+import { useViewerStore } from '@/stores/viewer.store';
+import { createTestingPinia } from '@pinia/testing';
+import { ViewerNavigationOptions } from '@3cr/viewer-types-ts/types/viewer-navigation-options';
+import { ViewerOptions } from '@3cr/viewer-types-ts/types/viewer-options';
+import ShareMenu from '@/components/modal/menus/ShareMenu.vue';
+
+setActivePinia(createPinia());
 
 function factory(component: any, props?: Record<string, any>): VueWrapper {
   return mount(VApp, {
-    slots: { default: h(component, props) }
+    slots: { default: h(component, props) },
+    plugins: [createTestingPinia({ createSpy: vi.fn })]
   });
 }
 
+type DefHot = {
+  [key in Hotkeys]?: string;
+};
+const def: DefHot = {
+  [Hotkeys.ALT_D]: 'display',
+  [Hotkeys.ALT_H]: 'home',
+  [Hotkeys.ALT_A]: 'annotation',
+  [Hotkeys.ALT_M]: 'measure',
+  [Hotkeys.ALT_E]: 'design',
+  [Hotkeys.ALT_F]: 'history'
+};
+vi.mock(
+  '@/functions/HotkeyScope',
+  async (importOriginal: MockImportOriginal<typeof import('@/functions/HotkeyScope')>) => {
+    return {
+      ...(await importOriginal()),
+      defaultHotkeys: vi.fn(),
+      defineHotkeys: vi.fn(),
+      resetScope: vi.fn()
+    };
+  }
+);
+
+vi.mock('interactjs', async (importOriginal: MockImportOriginal<typeof import('interactjs')>) => {
+  return {
+    ...(await importOriginal()),
+    default: vi.fn().mockReturnValue({
+      draggable: vi.fn().mockReturnValue({
+        dropzone: vi.fn()
+      }),
+      resizable: vi.fn().mockReturnValue({
+        dropzone: vi.fn()
+      })
+    })
+  };
+});
 describe('ViewerNavigationDrawer tests', () => {
   it('should mount', async () => {
     const wrapper = factory(ViewerNavigationDrawer, { drawer: true });
     await flushPromises();
     expect(wrapper).toBeTruthy();
   });
+  it('should hover show back', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+    await flushPromises();
+    const btn = wrapper.findComponentByTestId('nav-btn');
+    await btn.trigger('mouseleave');
+
+    expect(btn.html()).toContain('colour_single');
+  });
+
+  it('should close', async () => {
+    const { options } = storeToRefs(useViewerStore());
+    options.value.onExit = undefined;
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+    await flushPromises();
+    const btn = wrapper.findComponentByTestId('nav-btn');
+    await flushPromises();
+    await btn.trigger('mouseenter');
+    await flushPromises();
+    requestAnimationFrame(async () => {
+      await btn.trigger('click');
+      await flushPromises();
+    });
+  });
+  it('should close with onExit', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+    const { options } = storeToRefs(useViewerStore());
+    options.value.onExit = vi.fn().mockResolvedValue();
+    await flushPromises();
+    const btn = wrapper.findComponentByTestId('nav-btn');
+    await flushPromises();
+    await btn.trigger('mouseenter');
+    await flushPromises();
+    requestAnimationFrame(async () => {
+      await btn.trigger('click');
+      await flushPromises();
+      expect(options.value.onExit).toHaveBeenCalled();
+    });
+  });
+
+  it('should hover show back', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+
+    await flushPromises();
+
+    const btn = wrapper.findComponentByTestId('nav-btn');
+
+    await btn.trigger('mouseenter');
+
+    await flushPromises();
+    requestAnimationFrame(() => {
+      expect(btn.html()).toContain('west');
+    });
+  });
+
+  it('should update vlist on change', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+
+    await flushPromises();
+
+    const list = wrapper.findComponentByTestId('nav-list');
+
+    await list.vm.$emit('update:selected', [1]);
+
+    await flushPromises();
+    expect((list.vm as any).selected).toStrictEqual([1]);
+  });
+
+  it('should update vlist on change mcad', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+
+    await flushPromises();
+
+    const list = wrapper.findComponentByTestId('nav-list');
+
+    await list.vm.$emit('update:selected', ['mcad']);
+
+    await flushPromises();
+    expect((list.vm as any).selected).toStrictEqual(['mcad']);
+  });
+
+  it('should set vmodel history modal', async () => {
+    const { recentDropdown } = storeToRefs(useDemoStore());
+    const wrapper = factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+
+    await flushPromises();
+
+    const list = wrapper.findComponent(HistoryModal);
+
+    await list.setValue(true);
+    await list.findComponent(VRating).setValue(4);
+    await list.findComponent(ShareMenu).setValue(4);
+
+    expect(recentDropdown.value).toStrictEqual({
+      modal: true,
+      x: 0,
+      y: 0
+    });
+  });
+
+  it('should call all hotkey scopes', async () => {
+    const { activeDrawer } = storeToRefs(useDrawerStore());
+
+    const defineHotkeysMock = defaultHotkeys as unknown as MockInstance;
+
+    defineHotkeysMock.mockImplementation((definition: any) => {
+      for (const x of Object.keys(definition)) {
+        definition[x]();
+
+        expect(activeDrawer.value).toBe(def[x as Hotkeys] as string);
+      }
+    });
+
+    factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
+
+    expect(defaultHotkeys).toHaveBeenCalledWith(expect.anything());
+  });
+
+  it('should call hotkey scopes on drawer', async () => {
+    const { activeDrawer } = storeToRefs(useDrawerStore());
+    const defaultHotkeysMock = defaultHotkeys as unknown as MockInstance;
+
+    defaultHotkeysMock.mockImplementation((definition: any) => {});
+
+    factory(ViewerNavigationDrawer, {
+      drawer: true,
+      stubs: {
+        transition: true
+      }
+    });
 
-  it('should toggle drawer', async () => {
-    const wrapper = factory(ViewerNavigationDrawer, { drawer: false });
+    activeDrawer.value = 'mcad';
     await flushPromises();
-    const nav = wrapper.findComponent(ViewerNavigationDrawer);
-    expect(nav.vm.drawer).toBeFalsy();
-    const toggle = nav.findComponent('[data-testid="toggle"]');
-    await toggle.trigger('click');
-    expect(nav.vm.drawer).toBeTruthy();
-    await toggle.trigger('click');
-    expect(nav.vm.drawer).toBeFalsy();
+    activeDrawer.value = 'home';
+    await flushPromises();
+    expect(defaultHotkeys).toHaveBeenCalledWith(expect.anything());
+  });
+  const wrapper = factory(ViewerNavigationDrawer, {
+    drawer: true,
+    stubs: {
+      transition: true
+    }
   });
+  vi.stubGlobal('open', vi.fn());
+  vi.spyOn(window, 'open');
+  for (const def of ['home', 'display', 'annotations', 'measure', 'design', 'history']) {
+    it(`should display different ${def} icon`, async () => {
+      const { options } = storeToRefs(useViewerStore());
+      const { activeDrawer } = storeToRefs(useDrawerStore());
+
+      const item = { icon: 'hello', title: '123', visible: true };
+      const fn = vi.fn();
+      options.value.onRecentDropdown = fn;
+
+      (options.value[def as keyof ViewerOptions] as any) = item as ViewerNavigationOptions;
+
+      const definition = def.endsWith('s') ? def.slice(0, def.length - 1) : def;
+      activeDrawer.value = definition;
+      await flushPromises();
+      expect(wrapper.html()).toContain(item.title);
+      expect(wrapper.html()).toContain(item.icon);
+    });
+    it(`should display default ${def}`, async () => {
+      const { options } = storeToRefs(useViewerStore());
+      const { activeDrawer } = storeToRefs(useDrawerStore());
+
+      const fn = vi.fn();
+      (options.value[def as keyof ViewerOptions] as any) = {
+        visible: true
+      } as ViewerNavigationOptions;
+      options.value.onRecentDropdown = fn;
+
+      const definition = def.endsWith('s') ? def.slice(0, def.length - 1) : def;
+      activeDrawer.value = definition;
+      await flushPromises();
+
+      for (const item of wrapper.findAllComponents(VListItem)) {
+        await item.trigger('click');
+      }
+      expect(wrapper.html()).toContain(`labels.${definition}`);
+    });
+  }
 });

package/src/components/modal/__tests__/ViewerScanView.spec.ts

@@ -8,27 +8,27 @@ import ViewerActionRail from '@/components/modal/ViewerActionRail.vue';
 
 describe('ViewerScanView tests', () => {
   it('should mount volume', () => {
-    const props = { view: ScanView.Volume };
+    const props = { view: ScanView.Volume, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should mount transverse', async () => {
-    const props = { view: ScanView.Transverse };
+    const props = { view: ScanView.Transverse, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     await wrapper.findComponent(VerticalSliderSelector).setValue(100, 'value');
     expect(scan.scanState.value.Orientations.Transverse.Slice).toBe(100);
   });
 
   it('should mount coronal', async () => {
-    const props = { view: ScanView.Coronal };
+    const props = { view: ScanView.Coronal, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     await wrapper.findComponent(VerticalSliderSelector).setValue(100, 'value');
     expect(scan.scanState.value.Orientations.Coronal.Slice).toBe(100);
   });
 
   it('should mount sagittal', async () => {
-    const props = { view: ScanView.Sagittal };
+    const props = { view: ScanView.Sagittal, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     await wrapper.findComponent(VerticalSliderSelector).setValue(100, 'value');
     expect(scan.scanState.value.Orientations.Sagittal.Slice).toBe(100);
@@ -36,20 +36,20 @@ describe('ViewerScanView tests', () => {
 
   it('should horizontal flip', () => {
     vi.spyOn(scan, 'isHorizontalFlip').mockReturnValue(true);
-    const props = { view: ScanView.Volume };
+    const props = { view: ScanView.Volume, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     expect(wrapper.findComponent(VIcon).isVisible()).toBeTruthy();
   });
 
   it('should vertical flip', () => {
     vi.spyOn(scan, 'isVerticalFlip').mockReturnValue(true);
-    const props = { view: ScanView.Volume };
+    const props = { view: ScanView.Volume, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     expect(wrapper.findComponent(VIcon).isVisible()).toBeTruthy();
   });
 
   it('should keep hover active', async () => {
-    const props = { view: ScanView.Volume };
+    const props = { view: ScanView.Volume, canvas: {} as any };
     const wrapper = mount(ViewerScanView, { props });
     const actions = wrapper.findAllComponents(VBtn);
     for (const action of actions) {
@@ -57,4 +57,12 @@ describe('ViewerScanView tests', () => {
     }
     expect(wrapper.findComponent(ViewerActionRail).isVisible).toBeTruthy();
   });
+
+  it('should enter', async () => {
+    const props = { view: ScanView.Volume, canvas: {} as any };
+    const wrapper = mount(ViewerScanView, { props });
+    await wrapper.trigger('mouseenter');
+    await wrapper.trigger('mouseleave');
+    expect(wrapper.findComponent(ViewerActionRail).isVisible).toBeTruthy();
+  });
 });

package/src/components/modal/actions/Action.vue

@@ -1,13 +1,8 @@
 <template>
   <template v-if="variant === 'button'">
-    <v-tooltip location="top">
+    <v-tooltip location="top" open-delay="1000">
       <template #activator="{ props: tooltip }">
-        <v-btn
-          v-bind="mergeProps($attrs, tooltip)"
-          data-testid="button"
-          variant="text"
-          :color="color"
-          :icon="icon" />
+        <v-btn v-bind="mergeProps($attrs, tooltip)" data-testid="button" variant="text" :color="color" :icon="icon" />
       </template>
       <span>{{ text }}</span>
     </v-tooltip>
@@ -20,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import {mergeProps} from "vue";
+import { mergeProps } from 'vue';
 
 interface Props {
   text: string;

package/src/components/modal/actions/Flip3dAction.vue

@@ -3,33 +3,36 @@
     <template #activator="{ props: menu }">
       <v-tooltip location="top">
         <template #activator="{ props: tooltip }">
-          <v-btn v-bind="mergeProps(menu, tooltip)"
-                 data-testid="activator"
-                 color="white"
-                 variant="text"
-                 icon="flip"/>
+          <v-btn v-bind="mergeProps(menu, tooltip)" data-testid="activator" color="white" variant="text" icon="flip" />
         </template>
-        <span>Flip</span>
+        <span>{{ t('labels.flip') }}</span>
       </v-tooltip>
     </template>
     <v-list>
       <v-list-item data-testid="sagittal" @click="flipSagittal">
-        <v-list-item-title>Flip Sagittal</v-list-item-title>
+        <v-list-item-title>
+          {{ t('labels.flipView', { view: t('enums.scanView.sagittal') }) }}
+        </v-list-item-title>
       </v-list-item>
       <v-list-item data-testid="coronal" @click="flipCoronal">
-        <v-list-item-title>Flip Coronal</v-list-item-title>
+        <v-list-item-title>
+          {{ t('labels.flipView', { view: t('enums.scanView.coronal') }) }}
+        </v-list-item-title>
       </v-list-item>
       <v-list-item data-testid="transverse" @click="flipTransverse">
-        <v-list-item-title>Flip Transverse</v-list-item-title>
+        <v-list-item-title>
+          {{ t('labels.flipView', { view: t('enums.scanView.transverse') }) }}
+        </v-list-item-title>
       </v-list-item>
     </v-list>
   </v-menu>
 </template>
 
 <script setup lang="ts">
-import {computed, mergeProps, ref} from "vue";
-import {ScanView} from "@3cr/types-ts";
-import {useViewer3cr} from "@/composables/useViewer3cr";
+import { computed, mergeProps, ref } from 'vue';
+import { InvertTransformData, ScanView } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
@@ -37,13 +40,15 @@ interface Props {
 
 type Emits = {
   'update:modal': [value: boolean];
-}
+};
 
 defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
+const { t } = useI18n();
 const viewer3cr = useViewer3cr();
+
 const menu = ref<boolean>(false);
 const sagittal = ref<boolean>(false);
 const coronal = ref<boolean>(false);
@@ -61,19 +66,29 @@ const menuState = computed({
 
 async function flipSagittal(): Promise<void> {
   const value = !sagittal.value;
-  await viewer3cr.invertTransform(value, coronal.value, transverse.value);
+  await invert(value, coronal.value, transverse.value);
   sagittal.value = value;
 }
 
 async function flipCoronal(): Promise<void> {
   const value = !coronal.value;
-  await viewer3cr.invertTransform(sagittal.value, value, transverse.value);
+  await invert(sagittal.value, value, transverse.value);
   coronal.value = value;
 }
 
 async function flipTransverse(): Promise<void> {
   const value = !transverse.value;
-  await viewer3cr.invertTransform(sagittal.value, coronal.value, value);
+  await invert(sagittal.value, coronal.value, value);
   transverse.value = value;
 }
+
+async function invert(sagittal: boolean, coronal: boolean, transverse: boolean): Promise<void> {
+  const message: InvertTransformData = {
+    Version: '0.0.0',
+    InvertedSagittal: sagittal,
+    InvertedCoronal: coronal,
+    InvertedTransverse: transverse
+  };
+  await viewer3cr.invertTransform({ message });
+}
 </script>

package/src/components/modal/actions/FlipHorizontalAction.vue

@@ -1,12 +1,13 @@
 <template>
-  <Action text="Flip Horizontally" icon="swap_horiz" :variant="variant" @click="flipHorizontal" />
+  <Action :text="text" icon="swap_horiz" :variant="variant" @click="flipHorizontal" />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { ScanView } from '@3cr/types-ts';
+import { FlipValue, ScanView } from '@3cr/types-ts';
 import { isHorizontalFlip } from '@/models/scanState';
 import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
@@ -17,15 +18,23 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'button'
 });
 
+const { t } = useI18n();
 const viewer3cr = useViewer3cr();
 
 const horizontal = computed(() => {
   return isHorizontalFlip(props.view);
 });
 
+const text = computed(() => {
+  return t('labels.flipHorizontally');
+});
+
 async function flipHorizontal(): Promise<void> {
-  const view2d = props.view as ScanView.Sagittal | ScanView.Coronal | ScanView.Transverse;
-  const value = !horizontal.value;
-  await viewer3cr.flipHorizontally(view2d, value);
+  const message: FlipValue = {
+    Version: '0.0.0',
+    View: props.view,
+    Flipped: !horizontal.value
+  };
+  await viewer3cr.flipHorizontally({ message });
 }
 </script>

package/src/components/modal/actions/FlipVerticalAction.vue

@@ -1,12 +1,13 @@
 <template>
-  <Action text="Flip Vertically" icon="swap_vert" :variant="variant" @click="flipVertical" />
+  <Action :text="text" icon="swap_vert" :variant="variant" @click="flipVertical" />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { ScanView } from '@3cr/types-ts';
+import { FlipValue, ScanView } from '@3cr/types-ts';
 import { isVerticalFlip } from '@/models/scanState';
 import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
@@ -17,15 +18,23 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'button'
 });
 
+const { t } = useI18n();
 const viewer3cr = useViewer3cr();
 
+const text = computed(() => {
+  return t('labels.flipVertically');
+});
+
 const vertical = computed(() => {
   return isVerticalFlip(props.view);
 });
 
 async function flipVertical(): Promise<void> {
-  const view2d = props.view as ScanView.Sagittal | ScanView.Coronal | ScanView.Transverse;
-  const value = !vertical.value;
-  await viewer3cr.flipVertically(view2d, value);
+  const message: FlipValue = {
+    Version: '0.0.0',
+    View: props.view,
+    Flipped: !vertical.value
+  };
+  await viewer3cr.flipVertically({ message });
 }
 </script>

package/src/components/modal/actions/FullscreenAction.vue

@@ -3,24 +3,28 @@
 </template>
 
 <script setup lang="ts">
-import { getViewName, isFullscreen, previousLayout } from '@/models/scanState';
-import { LayoutActions, ScanView, ViewSelectionActions } from '@3cr/types-ts';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { isFullscreen, previousLayout } from '@/models/scanState';
+import { LayoutActions, ScanView, ViewSelectionActions } from '@3cr/types-ts';
 import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useViewName } from '@/composables/useViewName';
 
 interface Props {
   view: ScanView;
   variant?: 'button' | 'menu-item';
 }
 
-const viewer3cr = useViewer3cr();
-
 const props = withDefaults(defineProps<Props>(), {
   variant: 'button'
 });
 
+const { t } = useI18n();
+const { name } = useViewName(props.view);
+const viewer3cr = useViewer3cr();
+
 const text = computed(() => {
-  return isFullscreen.value ? 'Exit Fullscreen' : `Make ${getViewName(props.view)} Fullscreen`;
+  return isFullscreen.value ? t('labels.fullscreenExit') : t('labels.fullscreenEnter', { view: name.value });
 });
 
 const icon = computed(() => {