npm - @3cr/viewer-browser - Versions diffs - 0.0.247 → 0.0.292 - Mend

@3cr/viewer-browser 0.0.247 → 0.0.292

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (519) hide show

package/index.html CHANGED Viewed

@@ -1,39 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <title>3CR Browser Viewer</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module">
-      import { registerViewer, loadViewer } from '/src/main.ts';
-      import { StatsigClient } from '@statsig/js-client';
-      import { runStatsigAutoCapture } from '@statsig/web-analytics';
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#ffffff" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+  <link rel="manifest" href="/site.webmanifest" />
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <title>3CR Browser Viewer</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module">
+  import { mountViewer, loadViewer } from '/src/main.ts';
+  import { StatsigClient } from '@statsig/js-client';
+  import { runStatsigAutoCapture } from '@statsig/web-analytics';
-      const key = "client-YaAjxOTTRbuSN3peDAwXEzErieXpI744a3OHDgonzvV";
-      const user = { userID: undefined };
-      const options = { environment: { tier: 'development' } };
-      const client = new StatsigClient(key, user, options);
-      runStatsigAutoCapture(client);
-      await client.initializeAsync();
-      window.playgroundStatsigClient = client
+  const key = 'client-YaAjxOTTRbuSN3peDAwXEzErieXpI744a3OHDgonzvV';
+  const user = { userID: undefined };
+  const options = { environment: { tier: 'development' } };
+  const client = new StatsigClient(key, user, options);
+  runStatsigAutoCapture(client);
+  await client.initializeAsync();
+  window.playgroundStatsigClient = client;
-      const dynamicConfig = client.getDynamicConfig("3cr_viewer_version");
-      const testVersion = (window.location.href.includes('test.') || window.location.href.includes('localhost')) && new URLSearchParams(window.location.search).get("build_version")
-      const version = testVersion ?? dynamicConfig.value["sdkVersion"] ?? "1.1.0";
+  const dynamicConfig = client.getDynamicConfig('3cr_viewer_version');
+  const testVersion = (window.location.href.includes('test.') || window.location.href.includes('localhost') || window.location.href.includes('next.')) && new URLSearchParams(window.location.search).get('build_version');
+  const version = testVersion ?? dynamicConfig.value['sdkVersion'] ?? '1.1.0';
-      await registerViewer('#app', version);
-      await loadViewer();
-    </script>
-  </body>
+  await mountViewer('#app', version);
+  await loadViewer();
+</script>
+</body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.247",
+  "version": "0.0.292",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",
@@ -23,27 +23,43 @@
   "dependencies": {
     "@3cr/sdk-browser": "^1.0.17",
     "@3cr/translations-ts": "^1.0.1",
-    "@3cr/types-ts": "^1.0.166",
-    "@kyvg/vue3-notification": "^3.2.1",
+    "@3cr/types-ts": "^1.0.170",
+    "@3cr/viewer-types-ts": "^1.0.22",
+    "@crowdin/ota-client": "^2.0.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@kyvg/vue3-notification": "^3.4.0",
     "@mdi/font": "^7.4.47",
     "@mdi/js": "^7.4.47",
     "@statsig/js-client": "^1.5.0",
     "@statsig/session-replay": "^1.5.0",
     "@statsig/web-analytics": "^1.5.0",
     "axios": "^1.7.2",
+    "buffer": "^6.0.3",
+    "date-fns": "^4.1.0",
+    "device-detector-js": "^3.0.3",
+    "hotkeys-js": "^3.13.7",
+    "interactjs": "^1.10.27",
     "intro.js": "^8.0.0-beta.1",
+    "lodash": "^4.17.21",
     "logrocket": "^8.1.0",
-    "roboto-fontface": "^0.10.0",
+    "pinia": "^2.2.1",
+    "uuid": "^10.0.0",
     "vue": "^3.4.29",
+    "vue-hotkeys-rt": "^0.2.3",
+    "vue-i18n": "^9.13.1",
     "vuetify": "^3.6.12"
   },
   "devDependencies": {
     "@babel/types": "^7.24.0",
     "@faker-js/faker": "^8.4.1",
+    "@pinia/testing": "^0.1.5",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20.14.2",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-istanbul": "^2.0.3",
-    "@vitest/ui": "^2.0.3",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
     "aws-sdk": "^2.1594.0",
     "jsdom": "^24.0.0",
@@ -54,11 +70,14 @@
     "sass": "^1.71.1",
     "typescript": "^5.4.2",
     "unplugin-fonts": "^1.1.1",
-    "unplugin-vue-components": "^0.27.0",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.3.1",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-vuetify": "^2.0.3",
-    "vitest": "^2.0.3",
+    "vitest": "^2.1.8",
     "vue-tsc": "^2.0.21"
+  },
+  "overrides": {
+    "tough-cookie": "^5.0.0"
   }
 }

package/playground/img.png ADDED Viewed

Binary file

package/playground/index.html CHANGED Viewed

@@ -63,7 +63,11 @@
       initServiceWorker();
     });
   </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
   <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@latest/build/statsig-js-client+session-replay+web-analytics.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -73,7 +77,7 @@
   <div id="app"></div>
   <script type="module">
     const { StatsigClient, runStatsigAutoCapture } = window.Statsig;
-    const isTest = (window.location.href.includes('test.') || window.location.href.includes('localhost'))
+    const isTest = (window.location.href.includes('test.') || window.location.href.includes('localhost') || window.location.href.includes('next.'))
     const client = new StatsigClient("client-YaAjxOTTRbuSN3peDAwXEzErieXpI744a3OHDgonzvV",
         { userID: undefined },
         { environment: { tier: isTest ? 'development' : 'production' } }
@@ -90,7 +94,7 @@
     }
     client.initializeAsync().then(() => {
-      window.registerViewer('#app', version).then(() => {
+      window.mountViewer('#app', version).then(() => {
         window.loadViewer().then()
       })
     }).catch((err) => console.error(err));

package/src/App.vue CHANGED Viewed

@@ -1,110 +1,54 @@
 <template>
-  <MftpWebGL3DRModal v-if="show" ref="mftpWebGL3DRModal" :payload="payload" :options="options" />
-  <DemoLicenceInfoModal v-model:modal="m_demoLicence" />
-  <DemoLicenceShareToMobileModal v-model:modal="m_demoLicenceShareToMobile" />
-  <DemoLicenceSendToPartyModal v-model:modal="m_demoLicenceSendToParty" />
-  <DemoLicenceEnableCloudStorageModal v-model:modal="m_demoLicenseEnableCloudStorage" />
-  <DemoPatientInfoModal v-model:modal="m_demoPatient" />
-  <DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
-  <DemoPatientSendToPartyModal v-model:modal="m_demoPatientSendToParty" />
-  <DemoPatientEnableCloudStorageModal v-model:modal="m_demoPatientEnableCloudStorage" />
-  <Notifications />
+  <Viewer3cr ref="viewer3cr" :payload="payload" :options="options" />
+  <demo-info-modal v-model:modal="m_demoInfo" />
+  <demo-purchase-credits-modal v-model="m_demoPurchaseCredits" />
+  <demo-upgrade-cloud-storage-modal v-model="m_demoEnableCloudStorage" />
+  <demo-upgrade-plan-modal v-model="m_demoUpgradePlan" />
   <update-snackbar />
+  <uploads-drawer v-model="showUploads" :uploads="uploads" />
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Notifications } from '@kyvg/vue3-notification';
-import { defaultLoadViewerPayload, LoadViewerPayload } from '@/models/loadViewerPayload';
-import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
-import {
-  isDemo,
-  m_demoLicence,
-  m_demoLicenceSendToParty,
-  m_demoLicenceShareToMobile,
-  m_demoLicenseEnableCloudStorage,
-  m_demoPatient,
-  m_demoPatientEnableCloudStorage,
-  m_demoPatientSendToParty,
-  m_demoPatientShareToMobile,
-  show
-} from '@/components/demo/options';
-import MftpWebGL3DRModal from '@/components/modal/MftpWebGL3DRModal.vue';
+import { onMounted, ref } from 'vue';
+import hotkeys from 'hotkeys-js';
 import LogRocket from 'logrocket';
-if (isDemo.value) {
-  LogRocket.init('qfib9l/3crviewer-browser');
-}
-const payload = ref<LoadViewerPayload>(defaultLoadViewerPayload);
-const options = ref<LoadViewerOptions>(defaultLoadViewerOptions);
-const mftpWebGL3DRModal = ref<typeof MftpWebGL3DRModal>();
-async function loadInstance(payloadIncoming: LoadViewerPayload | undefined, optionsIncoming: LoadViewerOptions) {
-  payload.value = payloadIncoming || payload.value;
-  options.value = optionsIncoming;
-}
+import { storeToRefs } from 'pinia';
+import Viewer3cr from '@/components/modal/Viewer3cr.vue';
+import { HotkeyScope } from '@/functions/HotkeyScope';
+import { useDemoStore } from '@/stores/demo.store';
+import { useThemeStore } from '@/stores/theme.store';
+import { useUploadStore } from '@/stores/upload.store';
+import { ViewerOptions, ViewerPayload } from '@3cr/viewer-types-ts';
+hotkeys('f5', HotkeyScope.PRIMARY, function (event, handler) {
+  event.preventDefault();
+  alert('you pressed F5!');
+});
+const { isDemo, m_demoInfo, m_demoEnableCloudStorage, m_demoPurchaseCredits, m_demoUpgradePlan } =
+  storeToRefs(useDemoStore());
+const { theme } = storeToRefs(useThemeStore());
+const { uploads, showUploads } = storeToRefs(useUploadStore());
+const payload = ref<ViewerPayload>();
+const options = ref<ViewerOptions>();
+const viewer3cr = ref<InstanceType<typeof Viewer3cr>>();
+onMounted(() => {
+  theme.value = 'light'; // TODO: undo this once we have Dark Mode designs
+  if (isDemo.value) {
+    LogRocket.init('qfib9l/3crviewer-browser');
+  }
+});
 async function loadSession(url: string): Promise<void> {
-  await mftpWebGL3DRModal.value?.loadSession(url);
+  await viewer3cr.value?.loadSession(url);
 }
-async function close(): Promise<void> {
-  await mftpWebGL3DRModal.value?.close();
+async function loadViewer(viewerPayload: ViewerPayload, viewerOptions: ViewerOptions) {
+  payload.value = viewerPayload;
+  options.value = viewerOptions;
 }
-defineExpose({ loadInstance, loadSession, close });
+defineExpose({ loadViewer, loadSession });
 </script>
-<style>
-.material-icons-outlined,
-.material-symbols-outlined {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
-}
-.material-icons,
-.material-symbols {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
-}
-.material-icons-filled,
-.material-symbols-filled {
-  font-variation-settings:
-    'FILL' 1,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24 !important;
-}
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-.material-icons-outlined,
-.material-icons {
-  font-family: 'Material Symbols Outlined' !important;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-.transparent {
-  background-color: transparent;
-}
-.card-bg-border {
-  border-radius: 12px !important;
-  border: 2px #ffffffaa solid;
-}
-</style>

package/src/__tests__/app.spec.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import App from '@/App.vue';
+import { demoPayload } from '@/components/demo/demo-payload';
 describe('App.vue', () => {
   it('should inflate component', () => {
@@ -9,7 +10,7 @@ describe('App.vue', () => {
   it('should loadScan', async () => {
     const wrapper = shallowMount(App);
-    await wrapper.vm.loadInstance(undefined, {});
+    await wrapper.vm.loadViewer(demoPayload, {});
     expect(wrapper).toBeTruthy();
   });
 });

package/src/__tests__/main.spec.ts CHANGED Viewed

@@ -1,37 +1,37 @@
-import { ejectViewer, loadSession, loadViewer, registerViewer } from '@/main';
+import { demoPayload } from '@/components/demo/demo-payload';
+import { mountViewer, loadSession, loadViewer, unmountViewer } from '@/main';
+import { nextTick } from 'vue';
 describe('index tests', () => {
-  const errorMessage = 'Please call `registerViewer(version: string)` first';
+  const errorMessage = 'Please call `mountViewer` first';
-  it('should reject loadViewer', () => {
-    expect(() => loadViewer()).rejects.toThrow(errorMessage);
+  beforeEach(async () => {
+    await mountViewer(document.body, '1.0.0');
+    await nextTick();
+  });
+  afterEach(async () => {
+    await unmountViewer();
   });
   it('should reject loadSession invalid url', () => {
-    expect(() => loadSession('')).rejects.toThrow(errorMessage);
+    const execution = () => loadSession('');
+    expect(execution).rejects.toThrow('Invalid URL type');
   });
   it('should resolve loadViewer', async () => {
-    await registerViewer(document.body, '1.0.0');
-    expect(loadViewer()).resolves.not.toThrow(errorMessage);
+    expect(loadViewer(demoPayload)).resolves.not.toThrow(errorMessage);
   });
   it('should resolve loadSession 3crds url', async () => {
-    await registerViewer(document.body, '1.0.0');
     expect(loadSession('https://localhost/example.3crds')).resolves.not.toThrow(errorMessage);
   });
   it('should resolve loadSession 3crms url', async () => {
-    await registerViewer(document.body, '1.0.0');
     expect(loadSession('https://localhost/example.3crms')).resolves.not.toThrow(errorMessage);
   });
   it('should resolve loadSession 3crs url', async () => {
-    await registerViewer(document.body, '1.0.0');
     expect(loadSession('https://localhost/example.3crs')).resolves.not.toThrow(errorMessage);
   });
-  it('should eject viewer', () => {
-    expect(ejectViewer()).resolves.not.toThrow();
-  });
 });

package/src/assets/_palette.scss ADDED Viewed

@@ -0,0 +1,112 @@
+$shark: (
+    50: #f7f7f8,
+    100: #eeeef0,
+    200: #d9d9de,
+    300: #b9bac0,
+    400: #92939e,
+    500: #757682,
+    600: #5e5e6b,
+    700: #4d4d57,
+    800: #42424a,
+    900: #3a3a40,
+    950: #1d1d20
+);
+$minsk: (
+    50: #eff3fe,
+    100: #e1eafe,
+    200: #c9d7fc,
+    300: #a8bcf9,
+    400: #8599f4,
+    500: #6875ec,
+    600: #4c4fdf,
+    700: #3d3dc5,
+    800: #34359f,
+    900: #2e3176,
+    950: #1d1d49
+);
+$picton: (
+    50: #f2f8fd,
+    100: #e4effa,
+    200: #c3def4,
+    300: #8ec4eb,
+    400: #50a5de,
+    500: #2b8bcc,
+    600: #1c6ead,
+    700: #18588c,
+    800: #184b74,
+    900: #194061,
+    950: #112940
+);
+$malachite: (
+    50: #f2fdf0,
+    100: #dffcdc,
+    200: #c1f7bb,
+    300: #90ee87,
+    400: #5bde50,
+    500: #2fc423,
+    600: #21a217,
+    700: #1d7f16,
+    800: #1c6417,
+    900: #175314,
+    950: #062e05,
+);
+$viking: (
+    50: #eefcfd,
+    100: #d4f6f9,
+    200: #aeedf3,
+    300: #76deea,
+    400: #50cdde,
+    500: #1ba9bf,
+    600: #1988a1,
+    700: #1b6d83,
+    800: #1f5a6b,
+    900: #1e4b5b,
+    950: #0e313e
+);
+$lightning: (
+    50: #fcfde9,
+    100: #fbfcc5,
+    200: #fbf98d,
+    300: #f8ee4c,
+    400: #f5e12f,
+    500: #e4c50e,
+    600: #c59b09,
+    700: #9d700b,
+    800: #825811,
+    900: #6f4814,
+    950: #402608
+);
+$amaranth: (
+    50: #fdf4f3,
+    100: #fce7e8,
+    200: #f8d3d4,
+    300: #f2afb2,
+    400: #eb818a,
+    500: #dc4756,
+    600: #ca344a,
+    700: #aa263d,
+    800: #8e2338,
+    900: #7a2136,
+    950: #440d19
+);
+@mixin util-classes($prefix, $palette) {
+  @each $hue, $hex in $palette {
+    // e.g. class="minsk-500"
+    .#{$prefix}-#{$hue} {
+      color: $hex !important;
+    }
+    // e.g. class="bg-minsk-500"
+    .bg-#{$prefix}-#{$hue} {
+      background-color: $hex !important;
+      color: if($hue <= 400, #000, #fff);
+    }
+  }
+}

package/src/assets/_settings.scss ADDED Viewed

@@ -0,0 +1,64 @@
+@use 'palette' as palette;
+@use 'typography' as typography;
+@forward 'vuetify/settings' with (
+  // global
+  $body-font-family: typography.$font-family,
+  $border-radius-root: 8px,
+  $heading-font-family: typography.$font-family,
+  $typography: (
+    'd1': map-get(typography.$display, 'd1'),
+    'd2': map-get(typography.$display, 'd2'),
+    'd3': map-get(typography.$display, 'd3'),
+    'd4': map-get(typography.$display, 'd4'),
+    'h1': map-get(typography.$heading, 'h1'),
+    'h2': map-get(typography.$heading, 'h2'),
+    'h3': map-get(typography.$heading, 'h3'),
+    'h4': map-get(typography.$heading, 'h4'),
+    'h5': map-get(typography.$heading, 'h5'),
+    'h6': map-get(typography.$heading, 'h6'),
+    'lead-regular': map-get(typography.$lead, 'regular'),
+    'lead-semibold': map-get(typography.$lead, 'semibold'),
+    'base-regular': map-get(typography.$base, 'regular'),
+    'base-medium': map-get(typography.$base, 'medium'),
+    'base-semibold': map-get(typography.$base, 'semibold'),
+    'sm-regular': map-get(typography.$sm, 'regular'),
+    'sm-medium': map-get(typography.$sm, 'medium'),
+    'sm-semibold': map-get(typography.$sm, 'semibold'),
+    'xs-regular': map-get(typography.$xs, 'regular'),
+    'xs-medium': map-get(typography.$xs, 'medium'),
+    'xs-semibold': map-get(typography.$xs, 'semibold'),
+    'button': map-get(typography.$sm, 'semibold')
+  ),
+  // v-btn
+  $button-height: 40px,
+  // v-card
+  $card-title-font-size: map-get(typography.$heading, 'h3', 'size'),
+  $card-title-font-weight: map-get(typography.$heading, 'h3', 'weight'),
+  $card-title-letter-spacing: map-get(typography.$heading, 'h3', 'letter-spacing'),
+  $card-title-line-height: map-get(typography.$heading, 'h3', 'line-height'),
+  // v-divider
+  $divider-border-color: map-get(palette.$shark, 200),
+  $divider-opacity: 1,
+  // v-list-item-title
+  $list-item-title-font-size: map-get(typography.$sm, 'semibold', 'size'),
+  $list-item-title-font-weight: map-get(typography.$sm, 'semibold', 'weight'),
+  $list-item-title-letter-spacing: map-get(typography.$sm, 'semibold', 'letter-spacing'),
+  // v-list-item-subtitle
+  $list-item-subtitle-font-size: map-get(typography.$xs, 'regular', 'size'),
+  $list-item-subtitle-font-weight: map-get(typography.$xs, 'regular', 'weight'),
+  $list-item-subtitle-letter-spacing: map-get(typography.$xs, 'regular', 'letter-spacing'),
+  $list-item-subtitle-opacity: 1,
+  // v-snackbar
+  $snackbar-background: #ffffffe5,
+  $snackbar-border-radius: 12px,
+  // v-tab
+  $tab-slider-size: 0,
+);