feat: barcode detector

client-app/router/routes/constants.ts

@@ -1,11 +1,10 @@
-type RouteType = {
-  NAME: string;
-  PATH: string;
-};
-
-export const ROUTES: { [key: string]: RouteType } = {
+export const ROUTES = {
   CATALOG: {
     NAME: "Catalog",
     PATH: "/catalog",
   },
+  SEARCH: {
+    NAME: "Search",
+    PATH: "/search",
+  },
 } as const;

client-app/router/routes/main.ts

@@ -63,7 +63,7 @@ export const mainRoutes: RouteRecordRaw[] = [
     },
   },
   { path: "/branch/:branchId", name: "BranchPage", component: Branch, props: true },
-  { path: "/search", name: "Search", component: Search },
+  { path: ROUTES.SEARCH.PATH, name: ROUTES.SEARCH.NAME, component: Search },
   { path: "/bulk-order", name: "BulkOrder", component: BulkOrder },
   { path: "/compare", name: "CompareProducts", component: CompareProducts },
   { path: "/cart", name: "Cart", component: Cart },

client-app/shared/layout/components/header/_internal/mobile-header.vue

@@ -87,11 +87,15 @@
         maxlength="64"
         :placeholder="$t('shared.layout.header.mobile.search_bar.input_placeholder')"
         class="mr-4 grow"
+        :clearable="!!searchPhrase"
         no-border
-        clearable
-        @keydown.enter="searchPhrase && $router.push(searchPageLink)"
         @clear="reset"
-      />
+        @keydown.enter="searchPhrase && $router.push(searchPageLink)"
+      >
+        <template #append>
+          <BarcodeScanner v-if="!searchPhrase" @scanned-code="onBarcodeScanned" />
+        </template>
+      </VcInput>
 
       <VcButton :to="searchPhrase && searchPageLink" icon="search" />
 
@@ -137,6 +141,7 @@ import { useSearchBar } from "@/shared/layout/composables/useSearchBar";
 import MobileMenu from "./mobile-menu/mobile-menu.vue";
 import type { StyleValue } from "vue";
 import type { RouteLocationRaw } from "vue-router";
+import BarcodeScanner from "@/shared/layout/components/search-bar/barcode-scanner.vue";
 const router = useRouter();
 
 const { customComponents } = useCustomMobileHeaderComponents();
@@ -158,15 +163,22 @@ const placeholderStyle = computed<StyleValue | undefined>(() =>
 );
 
 const searchPageLink = computed<RouteLocationRaw>(() => ({
-  name: "Search",
+  name: ROUTES.SEARCH.NAME,
   query: {
     [QueryParamName.SearchPhrase]: searchPhrase.value.trim(),
   },
 }));
 
 function reset() {
   searchPhrase.value = "";
-  void router.push({ name: ROUTES.CATALOG.NAME });
+  void router.push({ name: ROUTES.SEARCH.NAME });
+}
+
+function onBarcodeScanned(value: string) {
+  if (value) {
+    searchPhrase.value = value;
+    void router.push(searchPageLink.value);
+  }
 }
 
 syncRefs(mobileMenuVisible, useScrollLock(document.body));

client-app/shared/layout/components/search-bar/barcode-scanner-modal.vue

@@ -0,0 +1,212 @@
+<template>
+  <VcModal
+    :title="$t('shared.layout.search_bar.barcode_detector.title')"
+    class="barcode-scanner-modal"
+    is-mobile-fullscreen
+  >
+    <p class="barcode-scanner-modal__description">
+      {{ $t("shared.layout.search_bar.barcode_detector.description") }}
+    </p>
+
+    <VcWidgetSkeleton v-show="loading">
+      <template #default-container>
+        <div class="barcode-scanner-modal__skeleton">
+          <div class="barcode-scanner-modal__skeleton-inner" />
+        </div>
+      </template>
+    </VcWidgetSkeleton>
+
+    <video
+      v-show="!loading"
+      ref="videoElement"
+      class="barcode-scanner-modal__video"
+      playsinline
+      @canplaythrough="loading = false"
+    >
+      <track kind="captions" :label="$t('shared.layout.search_bar.barcode_detector.title')" default disabled src="" />
+    </video>
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="barcode-scanner-modal__input"
+      accept="image/*"
+      @change="onFileSelected"
+    />
+
+    <template #actions="{ close }">
+      <VcButton class="barcode-scanner-modal__action-cancel" color="secondary" variant="outline" @click="close">
+        {{ $t("shared.catalog.branches_modal.cancel_button") }}
+      </VcButton>
+      <VcButton
+        class="barcode-scanner-modal__action-browse"
+        color="secondary"
+        :loading="loading"
+        @click="openFilePicker"
+        >{{ $t("ui_kit.file_uploader.browse") }}</VcButton
+      >
+    </template>
+  </VcModal>
+</template>
+
+<script setup lang="ts">
+import { useIntervalFn } from "@vueuse/core";
+import { BarcodeDetector } from "barcode-detector/ponyfill";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useI18n } from "vue-i18n";
+import { Logger } from "@/core/utilities";
+import { useNotifications } from "@/shared/notification";
+
+const emit = defineEmits<{
+  (e: "result", value: string[]): void;
+}>();
+
+const videoElement = ref<HTMLVideoElement | null>(null);
+const videoStream = ref<MediaStream | null>(null);
+const { t } = useI18n();
+
+let barcodeDetector: BarcodeDetector | null = null;
+
+const loading = ref(true);
+
+const SCAN_INTERVAL = 400;
+
+const notifications = useNotifications();
+
+const fileInputRef = ref<HTMLInputElement>();
+
+function openFilePicker() {
+  fileInputRef.value?.click();
+}
+
+async function onFileSelected(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+
+  try {
+    if (!file) {
+      showInfo(t("shared.layout.search_bar.barcode_detector.errors.no_file"));
+      return;
+    }
+
+    if (!file.type.startsWith("image/")) {
+      showInfo(t("shared.layout.search_bar.barcode_detector.errors.wrong_format"));
+      return;
+    }
+
+    loading.value = true;
+
+    const barcodes = await barcodeDetector?.detect(file);
+
+    if (barcodes?.length) {
+      emitResult(barcodes);
+    } else {
+      showInfo(t("shared.layout.search_bar.barcode_detector.errors.no_barcode_detected"));
+    }
+
+    loading.value = false;
+  } catch (e) {
+    Logger.error(onFileSelected.name, e);
+  }
+}
+
+async function scan() {
+  if (!barcodeDetector || !videoElement.value) {
+    return;
+  }
+  try {
+    const imageBitmap = await createImageBitmap(videoElement.value);
+
+    const barcodes = await barcodeDetector?.detect(imageBitmap);
+    if (barcodes?.length) {
+      emitResult(barcodes);
+    }
+  } catch (error) {
+    Logger.error(scan.name, error);
+  }
+}
+
+const { resume: startScanner, pause: stopScanner } = useIntervalFn(scan, SCAN_INTERVAL);
+
+async function startCamera() {
+  try {
+    if (!videoStream.value) {
+      videoStream.value = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "environment" },
+      });
+    }
+
+    if (videoElement.value) {
+      videoElement.value.srcObject = videoStream.value;
+      await videoElement.value.play();
+    }
+  } catch (error) {
+    Logger.error(startCamera.name, error);
+  }
+}
+
+function stopCamera() {
+  if (videoStream.value) {
+    videoStream.value.getVideoTracks().forEach((track) => track.stop());
+    videoStream.value = null;
+  }
+
+  if (videoElement.value) {
+    videoElement.value.srcObject = null;
+  }
+}
+
+function showInfo(text: string) {
+  notifications.info({
+    text,
+    duration: 5000,
+    single: true,
+  });
+}
+
+function emitResult(barcodes: { rawValue: string }[]) {
+  emit(
+    "result",
+    barcodes.map((el) => el.rawValue),
+  );
+}
+
+onMounted(async () => {
+  try {
+    await startCamera();
+    barcodeDetector = new BarcodeDetector();
+    startScanner();
+  } catch (error) {
+    Logger.error("BarcodeDetector initialization error:", error);
+  }
+});
+
+onBeforeUnmount(() => {
+  stopScanner();
+  barcodeDetector = null;
+  stopCamera();
+});
+</script>
+
+<style lang="scss">
+.barcode-scanner-modal {
+  &__description {
+    @apply mb-2.5;
+  }
+
+  &__video {
+    @apply aspect-[3/2] object-cover md:aspect-[2/1];
+  }
+
+  &__skeleton {
+    @apply p-1;
+  }
+
+  &__skeleton-inner {
+    @apply h-60 w-full #{!important};
+  }
+
+  &__input {
+    @apply hidden;
+  }
+}
+</style>

client-app/shared/layout/components/search-bar/barcode-scanner.vue

@@ -0,0 +1,45 @@
+<template>
+  <VcButton
+    class="barcode-scanner"
+    color="primary"
+    variant="no-border"
+    size="xs"
+    type="button"
+    icon="barcode"
+    @click.stop="openBarcodeScanner"
+  />
+</template>
+
+<script setup lang="ts">
+import { useModal } from "@/shared/modal";
+import BarcodeScannerModal from "./barcode-scanner-modal.vue";
+const emit = defineEmits<IEmits>();
+
+interface IEmits {
+  (e: "scannedCode", code: string): void;
+}
+const { openModal, closeModal } = useModal();
+
+const onBarcodeValueReceived = (codes: string[]) => {
+  if (codes.length) {
+    emit("scannedCode", codes[0]);
+    closeModal();
+  }
+};
+
+const openBarcodeScanner = () => {
+  openModal({
+    component: BarcodeScannerModal,
+    props: {
+      onClose: closeModal,
+      onResult: onBarcodeValueReceived,
+    },
+  });
+};
+</script>
+
+<style lang="scss">
+.barcode-scanner {
+  @apply m-1.5;
+}
+</style>

client-app/shared/layout/components/search-bar/search-bar.vue

@@ -5,15 +5,17 @@
       type="search"
       :maxlength="MAX_LENGTH"
       class="w-full"
+      :clearable="!!searchPhrase"
       :placeholder="$t('shared.layout.search_bar.enter_keyword_placeholder')"
-      clearable
+      @clear="reset"
       @keyup.enter="goToSearchResultsPage"
       @keyup.esc="hideSearchDropdown"
       @input="onSearchPhraseChanged"
       @focus="onSearchBarFocused"
-      @clear="reset"
     >
       <template #append>
+        <BarcodeScanner v-if="!searchPhrase" @scanned-code="onBarcodeScanned" />
+
         <VcButton
           :aria-label="$t('shared.layout.search_bar.search_button')"
           icon="search"
@@ -146,10 +148,12 @@ import { getFilterExpressionForCategorySubtree, getFilterExpressionForZeroPrice
 import { ROUTES } from "@/router/routes/constants";
 import { useSearchBar } from "@/shared/layout/composables/useSearchBar";
 import SearchBarProductCard from "./_internal/search-bar-product-card.vue";
+import BarcodeScanner from "./barcode-scanner.vue";
 import type { GetSearchResultsParamsType } from "@/core/api/graphql/catalog";
 import type { Category } from "@/core/api/graphql/types";
 import type { StyleValue } from "vue";
 import type { RouteLocationRaw } from "vue-router";
+import VcButton from "@/ui-kit/components/molecules/button/vc-button.vue";
 
 const { themeContext } = useThemeContext();
 
@@ -272,7 +276,7 @@ async function searchAndShowDropdownResults(): Promise<void> {
 
 function getSearchRoute(phrase: string): RouteLocationRaw {
   return {
-    name: "Search",
+    name: ROUTES.SEARCH.NAME,
     query: {
       [QueryParamName.SearchPhrase]: phrase,
     },
@@ -290,7 +294,7 @@ function goToSearchResultsPage() {
 function reset() {
   searchPhrase.value = "";
   hideSearchDropdown();
-  void router.push({ name: ROUTES.CATALOG.NAME });
+  void router.push({ name: ROUTES.SEARCH.NAME });
 }
 
 const searchProductsDebounced = useDebounceFn(searchAndShowDropdownResults, SEARCH_BAR_DEBOUNCE_TIME);
@@ -320,4 +324,11 @@ onMounted(() => {
     searchPhrase.value = searchPhraseInUrl.value;
   }
 });
+
+const onBarcodeScanned = (value: string) => {
+  if (value) {
+    searchPhrase.value = value;
+    goToSearchResultsPage();
+  }
+};
 </script>