@yoobic/yobi 8.6.35 → 8.6.37

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -15,7 +15,7 @@
  * https://zpl.io/25yLEEj
  */
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMaxViewPortImage, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate, vibrateHapticMedium } from '@shared/utils';
+import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMaxViewPortImage, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isBase64, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate, vibrateHapticMedium } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getFromOfflineStorage } from '@yobi/utils/cache';
 import { createBaseAnnotation, getElement, getPointerCoordinates, isAnnotationDeleted, isAnnotationEmpty, isAnnotationFocused, isAnnotationValid, isElementInsideContainer } from '@yobi/utils/helpers/annotations-helpers';
@@ -27,22 +27,19 @@ import { Dot, Textbox } from './components/annotations';
 import { Menu } from './components/menu';
 import { Actions, ERangeStatus, getActionButton, getNavbarElement, getNavbarIcon, Navbar, Range, tidyRange } from './components/tools';
 import { ANIMATION_DELAY, DOT_RADIUS, EEditorActions, INIT_COORDS, LOADING_DELAY, SLIDER_THRESHOLD } from './photo-editor.constants';
-import { deCenterAnnotation, drawImageOnCanvas, focusAnnotation, formatAnnotationsForExport, getAbsoluteCenter, getAnnotation, getAnnotationDraggableBounds, getBoundingClient, getFormattedAnnotationSize, getPredefinedTexts, getRelativeCenter, isCanvasBlank, prepareAnnotationsData, removeLocalsFromAnnotations, setAnnotationPositionToClosestEdge, showPredefinedTextsDialog, updateAnnotationLocal } from './photo-editor.helpers';
+import { deCenterAnnotation, drawImageOnCanvas, focusAnnotation, formatAnnotationsForExport, getAbsoluteCenter, getAnnotation, getBoundingClient, getFormattedAnnotationSize, getPredefinedTexts, getRelativeCenter, isCanvasBlank, prepareAnnotationsData, removeLocalsFromAnnotations, setAnnotationPositionToClosestEdge, showPredefinedTextsDialog, updateAnnotationLocal } from './photo-editor.helpers';
 export class YooPhotoEditorComponent {
   constructor() {
     this.savedAnnotations = [];
     this.savedDots = [];
     this.isTextCreateMode = false;
     this.isColorPickerMode = false;
-    this.isViewSwitching = false;
     this.hasAnnotationBeenCreated = false;
     this.hasSliderBeenReleased = false;
     this.hasPencilBeenReleased = false;
     this.hasDotBeenSaved = false;
     this.hasDoneBeenClicked = false;
     this.hasDiscardBeenClicked = false;
-    this.hasKeyboardOpened = false;
-    this.hasZoomSetup = false;
     this.hasImageBeenCleaned = false;
     this.hasInvalidDrawings = false;
     this.color = 'success';
@@ -77,16 +74,12 @@ export class YooPhotoEditorComponent {
     this.hasExtraActions && (this.mode = 'extras');
   }
   onDrawingsChanged() {
-    if (this.hasZoomSetup) {
-      this.displayDrawings();
-    }
+    this.displayDrawings();
   }
   onReadonlyChanged() {
-    this.hasKeyboardOpened = false;
     this.blockMoves.emit(!this.isReadonly);
     this.hasBackButton = this.isReadonly;
     this.hasDiscardBeenClicked = false;
-    this.isViewSwitching = false;
     this.switchMode();
   }
   async onSrcChanged() {
@@ -108,15 +101,6 @@ export class YooPhotoEditorComponent {
       }
     });
   }
-  get keyboardActions() {
-    return {
-      DidHide: async () => await this.displayDrawings(this.currentDrawings),
-      DidShow: async () => {
-        this.hasKeyboardOpened = true;
-        await this.displayDrawings(this.currentDrawings);
-      }
-    };
-  }
   get hostBounds() {
     return getBoundingClient(this.host);
   }
@@ -256,7 +240,8 @@ export class YooPhotoEditorComponent {
   get currentDrawings() {
     var _a;
     try {
-      return (_a = this.canvasDrawingsElement) === null || _a === void 0 ? void 0 : _a.toDataURL();
+      const canvasData = (_a = this.canvasDrawingsElement) === null || _a === void 0 ? void 0 : _a.toDataURL();
+      return isBase64(canvasData) ? canvasData : '';
     }
     catch (err) {
       return '';
@@ -286,7 +271,6 @@ export class YooPhotoEditorComponent {
               this.switchBackToExtras();
             }
             else {
-              this.isLoading = false;
               typeof this.closeHandler === 'function' ? this.closeHandler({
                 drawings: this.drawings,
                 annotations: this.annotations
@@ -299,6 +283,7 @@ export class YooPhotoEditorComponent {
         var _a;
         (_a = this.canvasContext) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, this.canvasDrawingsElement.width, this.canvasDrawingsElement.height);
         this.annotations = [];
+        this.drawings = null;
         this.hasImageBeenCleaned = true;
         this.toggleSaveButton(true);
       },
@@ -363,6 +348,7 @@ export class YooPhotoEditorComponent {
     this.imageSize = null;
     this.isLoading = true;
     await this.getImageSize();
+    this.isLoading = false;
   }
   async hideAllTooltips() {
     hideAllDotTooltips(this.dotElements);
@@ -378,10 +364,6 @@ export class YooPhotoEditorComponent {
   }
   componentShouldUpdate(...args) {
     const [newValue, , propName] = args;
-    if (this.isViewSwitching) {
-      this.isLoading = false;
-      this.isReadonly = true;
-    }
     if (['mode', 'isReadonly'].includes(propName)) {
       this.hasDoneBeenClicked = newValue === 'tools';
       this.toggleSaveButton();
@@ -389,7 +371,6 @@ export class YooPhotoEditorComponent {
     }
   }
   disconnectedCallback() {
-    this.toggleKeyboardListeners(false);
     !this.isPreview && setStatusBarDarkMode(false);
     [this.viewObserverSwitch,
       this.canvasDrawingsObserver,
@@ -399,7 +380,6 @@ export class YooPhotoEditorComponent {
   initEditor() {
     this.initResizeObserver();
     this.initMutationObservers();
-    this.toggleKeyboardListeners(true);
     !this.isPreview && setStatusBarDarkMode(true);
     this.savedAnnotationElements = cloneDeep(this.annotationElements);
     this.showSaveInitial && getActionButton().validate.classList.add('active');
@@ -424,13 +404,15 @@ export class YooPhotoEditorComponent {
     const { width, height } = this.maxViewport;
     let imgSize = await getImageSize(this.finalSrc, !this.isPreview ? this.alertInvalidUrl.bind(this) : () => this.closePhotoEditor());
     imgSize.width > this.maxImageSize.width && (imgSize = await getResizedImageSize({ imgSize, maxWidth: this.maxImageSize.width, maxHeight: this.maxImageSize.height }));
-    const imgOptions = { imgSize, maxWidth: width, maxHeight: height };
-    const imgResizedSize = await getResizedImageSize(imgOptions);
-    const imgScaleFactor = await getImageScaleFactor(imgOptions);
     this.imageSize = {
       natural: imgSize,
-      resized: imgResizedSize,
-      scaleFactor: imgScaleFactor
+      scaleFactor: await getImageScaleFactor({ imgSize, maxWidth: width, maxHeight: height }),
+      get resized() {
+        return {
+          width: this.natural.width * this.scaleFactor,
+          height: this.natural.height * this.scaleFactor
+        };
+      }
     };
   }
   async prepareEditor() {
@@ -444,25 +426,25 @@ export class YooPhotoEditorComponent {
   }
   updateEditor() {
     setDotIndexes(this.dotElements);
+    this.toggleDraggableAnnotations();
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
-      this.updateDraggableBoundings();
       focusContentEditable(this.activeElement);
       if (this.hasAnnotationBeenCreated) {
         this.attachNewAnnotation();
       }
     }
+    else {
+      this.clampAnnotationsPosition();
+    }
   }
   initMutationObservers() {
     var _a, _b, _c;
     this.viewObserverSwitch = new MutationObserver(entries => {
-      entries.forEach(async ({ addedNodes, removedNodes }) => {
-        if ([addedNodes === null || addedNodes === void 0 ? void 0 : addedNodes[0], removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes[0]].map(e => e === null || e === void 0 ? void 0 : e['id']).includes('src')) {
-          this.toggleDraggableAnnotations();
-          this.updateDraggableBoundings();
-          await drawImageOnCanvas(this.finalSrc, this.canvasSrcElement);
+      entries.forEach(async ({ addedNodes }) => {
+        if ((addedNodes === null || addedNodes === void 0 ? void 0 : addedNodes[0]) && addedNodes[0]['id'] === 'src' && addedNodes[0].tagName === 'CANVAS') {
+          await drawImageOnCanvas(this.finalSrc, addedNodes[0]);
         }
       });
     });
@@ -485,11 +467,6 @@ export class YooPhotoEditorComponent {
     (_b = this.canvasDrawingsObserver) === null || _b === void 0 ? void 0 : _b.observe(this.canvasDrawingsElement, { attributes: true });
     (_c = this.viewObserverSwitch) === null || _c === void 0 ? void 0 : _c.observe(this.zoomElement, { childList: true });
   }
-  toggleKeyboardListeners(add) {
-    if (isNativeMobile() && !this.isPreview) {
-      ['DidHide', 'DidShow'].forEach((event) => window[`${add ? 'add' : 'remove'}EventListener`](`keyboard${event}`, this.keyboardActions[event]));
-    }
-  }
   toggleShowNavbar(show = true) {
     var _a;
     if (this.navbarVisiblity !== 'disabled' && !this.isPreview && this.navBarElement) {
@@ -520,6 +497,10 @@ export class YooPhotoEditorComponent {
     const shouldClose = await showAlert({ header: 'ERROR', buttonText: [translate('CONTINUE'), translate('CLOSE')], message: translate('INVALIDURLBODY') });
     shouldClose ? this.closePhotoEditor() : (this.isLoading = false);
   }
+  clampAnnotationsPosition() {
+    var _a;
+    (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(element => setAnnotationPositionToClosestEdge(element, this.imageBounds));
+  }
   pushDrawings() {
     if (!this.drawingsStack.includes(this.currentDrawings)) {
       this.drawingsStackIndex++;
@@ -574,13 +555,15 @@ export class YooPhotoEditorComponent {
   getDraggableActions(annotationElement) {
     let isDeleting = false;
     if (annotationElement) {
-      const pressAction = (coords) => {
+      const pressAction = ({ x, y, applyBounds, update }) => {
         var _a, _b, _c;
+        applyBounds(this.host);
+        update(true);
         this.activeAnnotation = getAnnotation(annotationElement === null || annotationElement === void 0 ? void 0 : annotationElement.id, this.annotations);
         this.activeAnnotation = updateAnnotationLocal(this.activeAnnotation, {
           transform: {
             current: ((_c = (_b = (_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a._local) === null || _b === void 0 ? void 0 : _b.transform) === null || _c === void 0 ? void 0 : _c.current) || INIT_COORDS,
-            previous: coords
+            previous: { x, y }
           }
         });
       };
@@ -619,13 +602,13 @@ export class YooPhotoEditorComponent {
           }
         }
         this.toggleSaveButton();
+        this.activeAnnotation = null;
       };
       const draggable = new Draggable(annotationElement, {
         type: 'x,y',
-        bounds: getAnnotationDraggableBounds(annotationElement, this.hostBounds),
         zIndexBoost: false,
         allowEventDefault: true,
-        onPress() { pressAction({ x: this.x, y: this.y }); },
+        onPress() { pressAction(this); },
         onDragStart: dragStartAction,
         onDrag: dragAction,
         onDragEnd() { dragEndAction({ x: this.x, y: this.y }); }
@@ -676,19 +659,6 @@ export class YooPhotoEditorComponent {
       }
     }
   }
-  updateDraggableBoundings(annotationElement = this.activeElement) {
-    var _a;
-    if (annotationElement && this.imageBounds) {
-      const elementBounds = getBoundingClient(annotationElement);
-      const getRelativePosition = (direction) => this.imageBounds[direction === 'left' ? 'width' : 'height'] * (parseFloat(annotationElement.style[direction]) || 0) / 100;
-      (_a = Draggable.get(annotationElement)) === null || _a === void 0 ? void 0 : _a.applyBounds({
-        minX: 0 - (this.imageBounds.x - this.hostBounds.x) - getRelativePosition('left'),
-        maxX: this.imageBounds.width + this.imageBounds.x - this.hostBounds.x - elementBounds.width - getRelativePosition('left'),
-        minY: this.hostBounds.y - this.imageBounds.y + 44 - getRelativePosition('top'),
-        maxY: this.imageBounds.height + this.imageBounds.y - this.hostBounds.y - (elementBounds.height + 56) - getRelativePosition('top')
-      });
-    }
-  }
   switchMode(newMode = (this.hasExtraActions && this.isReadonly) ? 'extras' : 'tools') {
     if (newMode !== this.mode) {
       this.lastMode = this.mode;
@@ -810,12 +780,14 @@ export class YooPhotoEditorComponent {
     !this.isDrawMode && this.changeColor();
   }
   leaveColorPickerMode() {
-    this.isColorPickerMode = false;
-    this.toggleAnnotationsVisibility(true);
-    this.canvasSrcElement.style.removeProperty('z-index');
-    this.cursorPickerElement.setAttribute('hidden', 'true');
-    this.colorSelectorElement.selectedColor = this.color;
-    !this.isDrawMode && this.changeColor();
+    if (this.colorSelectorElement) {
+      this.isColorPickerMode = false;
+      this.toggleAnnotationsVisibility(true);
+      this.canvasSrcElement.style.removeProperty('z-index');
+      this.cursorPickerElement.setAttribute('hidden', 'true');
+      this.colorSelectorElement.selectedColor = this.color;
+      !this.isDrawMode && this.changeColor();
+    }
   }
   onPickColor() {
     this.isColorPickerMode = true;
@@ -947,7 +919,7 @@ export class YooPhotoEditorComponent {
   }
   async switchBackToExtras() {
     setTimeout(async () => {
-      this.isViewSwitching = true;
+      this.isReadonly = true;
       if (this.changes.drawings || this.hasImageBeenCleaned) {
         this.drawings = this.hasImageBeenCleaned ? '' : await this.getDrawingsUrl();
         this.drawingsStackIndex = -1;
@@ -993,7 +965,6 @@ export class YooPhotoEditorComponent {
         // Main Actions
         case EEditorActions.typeTool:
           this.enterEditorMode('text');
-          this.hasKeyboardOpened = false;
           break;
         case EEditorActions.brush:
           this.enterEditorMode('draw');
@@ -1088,14 +1059,14 @@ export class YooPhotoEditorComponent {
       annotations: removeLocalsFromAnnotations(this.annotations)
     };
     this.saveChanges.emit(savedChanges);
+    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => gsapSet(e, { clearProps: 'transform' })));
     if (this.hasExtraActions && !this.showSaveInitial && !this.submitButton) {
       this.switchBackToExtras();
     }
     else {
-      await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => gsapSet(e, { clearProps: 'transform' })));
-      this.isLoading = false;
       ((_b = this.submitButton) === null || _b === void 0 ? void 0 : _b.handler) ? this.submitButton.handler(savedChanges) : this.closePhotoEditor(savedChanges);
     }
+    this.isLoading = false;
   }
   done() {
     var _a, _b, _c;
@@ -1221,9 +1192,8 @@ export class YooPhotoEditorComponent {
       } });
   }
   renderDot(dot) {
-    var _a;
     const disableTooltip = this.isPreview && !this.isImageZoomable;
-    return h(Dot, { annotation: dot, readonly: this.isReadonly, imageSize: (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized, isWeb: isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
+    return h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
   }
   renderOverlay() {
     return this.isCreateMode && (h("div", { id: "overlay", style: this.imageSizeStyle.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && h("div", null, translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor()));
@@ -1239,18 +1209,14 @@ export class YooPhotoEditorComponent {
     return h("canvas", { id: "src", onClick: (ev) => ev.preventDefault(), ref: el => this.canvasSrcElement = el, ...this.computedImageSize });
   }
   renderImage() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
+    const { width, height } = ((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized) || {};
     return (h("yoo-img", { instant: true, id: "src", src: this.finalSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false, ...((this.isPreview && !this.isImageZoomable) && {
-        cloudinaryOptions: {
-          width: (_b = (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized) === null || _b === void 0 ? void 0 : _b.width,
-          height: (_d = (_c = this.imageSize) === null || _c === void 0 ? void 0 : _c.resized) === null || _d === void 0 ? void 0 : _d.height,
-          noRatio: true,
-          fit: true
-        }
-      }), ref: el => this.imageElement = el, style: {
+        cloudinaryOptions: { width, height, noRatio: true, fit: true }
+      }), onLoaded: () => this.isLoading = false, ref: el => this.imageElement = el, style: {
         ...this.computedImageSizeStyle,
         ...(this.isImageZoomable && {
-          transform: `scale(${(_e = this.imageSize) === null || _e === void 0 ? void 0 : _e.scaleFactor})`
+          transform: `scale(${(_b = this.imageSize) === null || _b === void 0 ? void 0 : _b.scaleFactor})`
         })
       } }));
   }
@@ -1262,12 +1228,7 @@ export class YooPhotoEditorComponent {
   }
   renderContent() {
     const { scaleFactor } = this.imageSize || {};
-    return (h("yoo-zoom", { maxScale: this.isPreview ? scaleFactor : 1, allowWheelGesture: false, initScale: scaleFactor, minScale: scaleFactor, disabled: !this.isImageZoomable, hidden: this.isLoading, animated: this.isReadonly && !this.isPreview, ref: e => this.zoomElement = e, references: ['#src', '#drawings'], disableZoomOnSelectors: ['.annotation'], onSetup: async () => {
-        if (!this.hasKeyboardOpened) {
-          this.hasZoomSetup = true;
-          this.isLoading = false;
-        }
-      }, ...{ mode: this.mode }, onZoom: (ev) => this.onImageZoom(ev) }, this.renderOverlay(), this.renderDrawingsCanvas(), this.isReadonly ? this.renderImage() : this.renderSrcCanvas(), this.renderCursorPicker(), this.renderAnnotations()));
+    return (h("yoo-zoom", { maxScale: this.isPreview ? scaleFactor : 1, allowWheelGesture: false, initScale: scaleFactor, minScale: scaleFactor, disabled: !this.isImageZoomable, hidden: this.isLoading, animated: this.isReadonly && !this.isPreview, ref: e => this.zoomElement = e, references: ['#src', '#drawings'], disableZoomOnSelectors: ['.annotation'], ...{ mode: this.mode }, onZoom: (ev) => this.onImageZoom(ev) }, this.renderOverlay(), this.renderDrawingsCanvas(), this.isReadonly ? this.renderImage() : this.renderSrcCanvas(), this.renderCursorPicker(), this.renderAnnotations()));
   }
   renderLoader() {
     return this.isLoading && h("yoo-loader", { class: "absolute", size: "large" });

package/dist/collection/components/3.organisms/video-player/videoplayer-core.js

@@ -38,7 +38,7 @@ export class YooVideoPlayerCoreComponent {
    * Listen to player state changes
    */
   async onPlayerStateChanges(event) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     clearTimeout(this.showHeaderTimeout);
     this.playerState = event.detail;
     const isPlaying = this.playerState === videoPlayerStates.PLAYING;
@@ -71,7 +71,7 @@ export class YooVideoPlayerCoreComponent {
         this.onHideHeader();
       }
       if (this.playerState === videoPlayerStates.ENDED && ((_b = this.modalOptions) === null || _b === void 0 ? void 0 : _b.closeModalOnEnd)) {
-        closeModal(0);
+        closeModal({ currentTime: 0, currentDisplayingLang: await ((_d = (_c = this.playerInstance).getCurrnetDisplayingLang) === null || _d === void 0 ? void 0 : _d.call(_c)) });
         this.resetCordovaChanges();
       }
     }
@@ -217,8 +217,12 @@ export class YooVideoPlayerCoreComponent {
       if (this.blockControlAndAutoPlayOnTap && this.playerInstance) {
         this.pauseVideo();
         (_a = this.playerInstance) === null || _a === void 0 ? void 0 : _a.onTriggerFullscreen(this.modalOptions).then((res) => {
+          var _a, _b;
           if (res === null || res === void 0 ? void 0 : res.data) {
-            this.updateCurrentTime(res.data);
+            this.updateCurrentTime((_a = res.data) === null || _a === void 0 ? void 0 : _a.currentTime);
+            if (this.modalOptions) {
+              this.modalOptions.currentDisplayingLang = (_b = res.data) === null || _b === void 0 ? void 0 : _b.currentDisplayingLang;
+            }
           }
         });
       }
@@ -280,8 +284,9 @@ export class YooVideoPlayerCoreComponent {
     }
   }
   onCancel() {
-    this.getCurrentTime().then((currentTime) => {
-      closeModal(currentTime);
+    this.getCurrentTime().then(async (currentTime) => {
+      var _a, _b;
+      closeModal({ currentTime, currentDisplayingLang: await ((_b = (_a = this.playerInstance).getCurrnetDisplayingLang) === null || _b === void 0 ? void 0 : _b.call(_a)) });
       this.resetCordovaChanges();
     });
   }

package/dist/collection/components/3.organisms/video-player/videoplayer-videojs/videojs.helpers.js

@@ -1,13 +1,14 @@
 import { b64ToFile, changeExtension, Cloudinary, convertSrtToWebVTT, getExtension, getKeyToCache, isCloudinaryLink, isFile, isNativeMobile, isOffline, urlToFileBlob } from '@shared/utils';
 import { getFromLocalForage } from '@yobi/utils/cache';
 import { compact } from 'lodash-es';
-export async function prepareSubtitles(playerInstance, subtitles) {
+export async function prepareSubtitles(playerInstance, subtitles, currentDisplayingLang) {
   await Promise.all(subtitles === null || subtitles === void 0 ? void 0 : subtitles.map(async (subtitle) => {
     const src = await prepareSubtitleFile(subtitle);
     playerInstance.addRemoteTextTrack({
       src,
       srclang: subtitle.srclang,
       label: subtitle.label,
+      mode: currentDisplayingLang === subtitle.srclang ? 'showing' : 'disabled',
       kind: subtitle.kind
     }, false);
   }));
@@ -70,6 +71,3 @@ function getEcoLinks(newURL) {
     ...new Set([originalEcoLink, ecoMp4Link, originalMp4Link, originalLink])
   ]);
 }
-export function isSameLanguageTrack(lang, track) {
-  return (track === null || track === void 0 ? void 0 : track.language) === lang || ((track === null || track === void 0 ? void 0 : track.language) === 'en' && ['ca', 'us'].includes(lang));
-}

package/dist/collection/components/3.organisms/video-player/videoplayer-videojs/videoplayer-videojs.js

@@ -1,11 +1,11 @@
-import { Cloudinary, debounce, getClosestImageRatio, getCurrentLanguage, getExtension, getMedia, getVideoPoster, intersectionObserve, isCloudinaryLink, isVideo, isWeb, pipes } from '@shared/utils';
+import { Cloudinary, debounce, getClosestImageRatio, getExtension, getMedia, getVideoPoster, intersectionObserve, isCloudinaryLink, isVideo, isWeb, pipes } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getFromOfflineStorage } from '@yobi/utils/cache/local-forage';
 import { getAppContext, querySelectorDeep } from '@yobi/utils/helpers/common-helpers';
 import { openVideoPlayerInModal, updateCloudinaryDim } from '@yobi/utils/helpers/video-player-helpers';
 import videojs from 'video.js';
 import { videoPlayerStates } from '../constants';
-import { getFallbackSource, isSameLanguageTrack, prepareSubtitles } from './videojs.helpers';
+import { getFallbackSource, prepareSubtitles } from './videojs.helpers';
 export class YooVideoPlayerVideojsComponent {
   constructor() {
     this.scaledUp = undefined;
@@ -82,6 +82,13 @@ export class YooVideoPlayerVideojsComponent {
     }
     return Promise.resolve(true);
   }
+  /**
+   * Update the current time of video, will auto play the time is updated
+   */
+  async getCurrnetDisplayingLang() {
+    var _a, _b;
+    return ((_b = Array.from((_a = this.player) === null || _a === void 0 ? void 0 : _a.textTracks()).find(track => track.mode === 'showing')) === null || _b === void 0 ? void 0 : _b.language) || '';
+  }
   /**
    * Will play the video in fullscreen mode
    */
@@ -265,7 +272,7 @@ export class YooVideoPlayerVideojsComponent {
     });
     this.player.on('error', () => this.onVideoJSError());
     this.player.on('loadedmetadata', async (ev) => {
-      var _a;
+      var _a, _b;
       if (this.player && this.player.duration() >= 0) {
         this.videoDuration = pipes.timer.transform(Math.round(this.player.duration()), 'seconds');
       }
@@ -278,12 +285,8 @@ export class YooVideoPlayerVideojsComponent {
       }
       if (!this.subtitlePrepared) {
         this.subtitlePrepared = true;
-        prepareSubtitles(this.player, this.subtitles);
+        prepareSubtitles(this.player, this.subtitles, (_b = this.modalOptions) === null || _b === void 0 ? void 0 : _b.currentDisplayingLang);
       }
-      const textTracks = this.player.textTracks();
-      textTracks.addEventListener('addtrack', (event) => {
-        event.track.mode = isSameLanguageTrack(getCurrentLanguage(), event.track) ? 'showing' : 'hidden';
-      });
     });
     this.player.on('touchstart', (ev) => {
       var _a, _b;
@@ -1037,6 +1040,22 @@ export class YooVideoPlayerVideojsComponent {
           "tags": []
         }
       },
+      "getCurrnetDisplayingLang": {
+        "complexType": {
+          "signature": "() => Promise<string>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "Update the current time of video, will auto play the time is updated",
+          "tags": []
+        }
+      },
       "onTriggerFullscreen": {
         "complexType": {
           "signature": "(modalOptions?: IVideoPlayerModalOptions) => Promise<void | VideoJsPlayer>",

package/dist/collection/components/entities/card-sticky/card-sticky.css

@@ -234,6 +234,7 @@ svg:not(:root) {
   display: flex;
   flex-direction: row;
   max-width: var(--feed-card-width);
+  height: 14.0625rem;
   max-height: var(--feed-card-max-height);
   overflow: hidden;
   background-position: center;
@@ -619,6 +620,10 @@ svg:not(:root) {
     width: 280px !important;
   }
 }
+:host(.mobile.widget) .outer-container.feeds {
+  height: 100%;
+}
+
 :host(.web) .outer-container {
   width: auto;
 }

package/dist/collection/components/entities/card-sticky/card-sticky.js

@@ -94,7 +94,12 @@ export class YooCardStickyComponent {
   }
   render() {
     var _a;
-    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, inprogress: (_a = this.entry) === null || _a === void 0 ? void 0 : _a.inProgress }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
+    const classes = getAppContext(this.host);
+    if (this.host.classList.contains('widget')) {
+      delete classes.web;
+      classes.mobile = true;
+    }
+    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, inprogress: (_a = this.entry) === null || _a === void 0 ? void 0 : _a.inProgress }, class: { ...classes } }, this.renderBasedOnType())));
   }
   static get is() { return "yoo-card-sticky"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-catalog/form-catalog.js

@@ -179,9 +179,14 @@ export class YooFormCatalogComponent {
     else {
       value[product._id] = quantity > 0 ? quantity : 0;
     }
-    if (this.products && !this.products.find((p) => p._id === product._id)) {
+    this.products = this.products || [];
+    const index = this.products.findIndex((p) => p._id === product._id);
+    if (index < 0) {
       this.products.push(product);
     }
+    else {
+      this.products[index] = product;
+    }
     this.setValue(value);
   }
   addProduct(product) {
@@ -199,9 +204,13 @@ export class YooFormCatalogComponent {
       value[product._id] = product.step || 1;
     }
     this.products = this.products || [];
-    if (this.products && !this.products.find((p) => p._id === product._id)) {
+    const index = this.products.findIndex((p) => p._id === product._id);
+    if (index < 0) {
       this.products.push(product);
     }
+    else {
+      this.products[index] = product;
+    }
     this.setValue(value);
   }
   clearProduct(product) {

package/dist/collection/components/form/form-connect/form-connect.css

@@ -421,27 +421,27 @@ svg:not(:root) {
 :host yoo-img {
   border-radius: inherit;
 }
-:host main,
-:host #draggables,
-:host #connectables {
-  display: grid;
-  grid-gap: var(--spacing-08, 0.5rem);
-}
 :host #draggables,
 :host #connectables {
   position: relative;
+  width: calc(50% - var(--spacing-08, 0.5rem));
   height: max-content;
-  padding: var(--spacing-08, 0.5rem) 0;
 }
 :host main {
-  grid-template-rows: repeat(auto-fit, 75%);
-  grid-template-columns: 1fr 1fr;
-  padding: 0 var(--spacing-08, 0.5rem);
+  display: flex;
+  justify-content: space-around;
+  padding-top: var(--spacing-08, 0.5rem);
   word-break: break-word;
   background-color: var(--stable-alt-20, rgba(208, 208, 208, 0.2));
   border-radius: var(--border-radius-04, 0.25rem);
   transition: height 750ms ease-in-out;
 }
+:host main:first-of-type {
+  padding-left: var(--spacing-08, 0.5rem);
+}
+:host main:last-of-type {
+  padding-right: var(--spacing-08, 0.5rem);
+}
 :host main[style*=height] {
   overflow: hidden auto;
 }
@@ -459,17 +459,18 @@ svg:not(:root) {
   background: var(--app-color, #5a30f4);
   border-radius: var(--border-radius-04, 0.25rem);
 }
+:host [type], :host .overlay {
+  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
+}
 :host .connectable,
 :host .draggable {
   position: relative;
-  width: 100%;
   max-width: 15rem;
-  height: 100%;
+  margin-bottom: var(--spacing-08, 0.5rem);
   background-color: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   cursor: pointer;
-  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
 }
 :host .connectable:before,
 :host .draggable:before {
@@ -528,7 +529,7 @@ svg:not(:root) {
 :host .draggable > *:not(yoo-icon) {
   position: absolute;
 }
-:host #overlay {
+:host .overlay {
   background-color: inherit;
   border-radius: inherit;
   opacity: 0.6;