fcr-ui-scene 3.8.0-alpha → 3.8.1-alpha

package/lib/modules/components/caption-menu/steps/index.css

@@ -1,73 +1,73 @@
-.fcr-steps-container {
-  display: flex;
-  width: 100%;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.fcr-steps-container.horizontal {
-  flex-direction: row;
-  align-items: center;
-}
-
-.fcr-steps-container.vertical {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.fcr-step-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.fcr-step-icon {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  flex-shrink: 0;
-  z-index: 1;
-}
-
-.fcr-step-item.fcr-wait .fcr-step-icon {
-  background-color: var(--fcr_mobile_ui_scene_fill1);
-}
-
-.fcr-step-item.fcr-finish .fcr-step-icon {
-  background-color: var(--fcr_ui_scene_icontext7);
-}
-.fcr-step-item.fcr-last {
-  flex: none;
-}
-
-.fcr-step-connector {
-  z-index: 0;
-  flex: 1;
-}
-
-.fcr-steps-container.horizontal .fcr-step-connector {
-  height: 4px;
-}
-
-.fcr-steps-container.vertical .fcr-step-connector {
-  width: 4px;
-}
-
-.fcr-step-line {
-  height: 100%;
-  width: 100%;
-  background-color: var(--fcr_mobile_ui_scene_fill1);
-}
-
-.fcr-step-connector.fcr-finish .fcr-step-line {
-  background-color: var(--fcr_ui_scene_icontext7);
-}
-
-.fcr-steps-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+.fcr-steps-container {
+  display: flex;
+  width: 100%;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.fcr-steps-container.horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.fcr-steps-container.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.fcr-step-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.fcr-step-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.fcr-step-item.fcr-wait .fcr-step-icon {
+  background-color: var(--fcr_mobile_ui_scene_fill1);
+}
+
+.fcr-step-item.fcr-finish .fcr-step-icon {
+  background-color: var(--fcr_ui_scene_icontext7);
+}
+.fcr-step-item.fcr-last {
+  flex: none;
+}
+
+.fcr-step-connector {
+  z-index: 0;
+  flex: 1;
+}
+
+.fcr-steps-container.horizontal .fcr-step-connector {
+  height: 4px;
+}
+
+.fcr-steps-container.vertical .fcr-step-connector {
+  width: 4px;
+}
+
+.fcr-step-line {
+  height: 100%;
+  width: 100%;
+  background-color: var(--fcr_mobile_ui_scene_fill1);
+}
+
+.fcr-step-connector.fcr-finish .fcr-step-line {
+  background-color: var(--fcr_ui_scene_icontext7);
+}
+
+.fcr-steps-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/lib/modules/components/caption-menu/translation-setting-options.js

@@ -56,8 +56,7 @@ var useSourceLanguageMenuOptions = function useSourceLanguageMenuOptions() {
   var _useContext = (0, _react.useContext)(_.CaptionMenuContext),
     languageOptions = _useContext.languageOptions,
     updateSourceLanguage = _useContext.updateSourceLanguage,
-    sourceLanguage = _useContext.sourceLanguage,
-    setIsSourceLanguageVisible = _useContext.setIsSourceLanguageVisible;
+    sourceLanguage = _useContext.sourceLanguage;
   var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
   var transI18n = (0, _i18n.useI18n)();
   var sourceLanguageOptions = languageOptions.sourceList.map(function (language) {
@@ -73,14 +72,17 @@ var useSourceLanguageMenuOptions = function useSourceLanguageMenuOptions() {
       }),
       onButtonClick: function onButtonClick() {
         updateSourceLanguage(language);
-        setIsSourceLanguageVisible(false);
       }
     };
   });
   return [{
+    type: 'title',
     title: transI18n('fmt_ai_subtitles_setting_label_source_language'),
     key: 'source_language_title',
-    type: 'title'
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
   }, _.line].concat((0, _toConsumableArray2["default"])(sourceLanguageOptions));
 };
 var useTranslationMenuOptions = function useTranslationMenuOptions() {
@@ -99,7 +101,9 @@ var useTranslationMenuOptions = function useTranslationMenuOptions() {
         checked: language === item.value
       }),
       key: item.value,
-      onButtonClick: function onButtonClick() {
+      onButtonClick: function onButtonClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
         var value = item.value === _type2.NONE ? null : item.value;
         subscribeTranslateLanguage(value);
       }
@@ -107,7 +111,12 @@ var useTranslationMenuOptions = function useTranslationMenuOptions() {
   });
   return [{
     title: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
-    key: 'traslation_settings_title'
+    key: 'traslation_settings_title',
+    type: 'title',
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
   }, _.line].concat((0, _toConsumableArray2["default"])(translationLanguageOptions));
 };
 var useTranslationSettingOptions = exports.useTranslationSettingOptions = function useTranslationSettingOptions() {
@@ -119,12 +128,11 @@ var useTranslationSettingOptions = exports.useTranslationSettingOptions = functi
     isTwoLineTranscribingEnabled = _useContext3.isTwoLineTranscribingEnabled,
     toggleTwoLineTranscribingEnabled = _useContext3.toggleTwoLineTranscribingEnabled,
     hasSetSourceLanguagePermission = _useContext3.hasSetSourceLanguagePermission,
-    captionState = _useContext3.captionState,
-    transcribingState = _useContext3.transcribingState,
     isSourceLanguageVisible = _useContext3.isSourceLanguageVisible,
-    setIsSourceLanguageVisible = _useContext3.setIsSourceLanguageVisible;
+    setIsSourceLanguageVisible = _useContext3.setIsSourceLanguageVisible,
+    isTranslationVisible = _useContext3.isTranslationVisible,
+    setIsTranslationVisible = _useContext3.setIsTranslationVisible;
   var transI18n = (0, _i18n.useI18n)();
-  0;
   var sourceLanguageOptions = useSourceLanguageMenuOptions();
   var translationLanguageOptions = useTranslationMenuOptions();
   var twoLineProps = menuType === FcrUICaptionMenuType.CAPTION ? {
@@ -134,31 +142,33 @@ var useTranslationSettingOptions = exports.useTranslationSettingOptions = functi
     value: isTwoLineTranscribingEnabled,
     onChange: toggleTwoLineTranscribingEnabled
   };
-  var isDisabled = menuType === FcrUICaptionMenuType.CAPTION ? !captionState : !transcribingState;
   return [{
     key: 'translate_settings_title',
     title: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
-    type: 'title',
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    type: 'title'
   }, {
     title: transI18n('fmt_ai_subtitles_setting_label_source_language'),
     key: 'source_language',
     options: sourceLanguageOptions,
-    disabled: !hasSetSourceLanguagePermission || isDisabled,
-    onButtonClick: function onButtonClick() {
+    disabled: !hasSetSourceLanguagePermission,
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
       setIsSourceLanguageVisible(true);
+      setIsTranslationVisible(false);
     },
     visible: isSourceLanguageVisible
   }, {
     title: transI18n('fmt_ai_subtitles_setting_label_translations_display'),
     key: 'translate_display',
     options: translationLanguageOptions,
-    disabled: isDisabled,
-    onButtonClick: function onButtonClick() {
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsTranslationVisible(true);
       setIsSourceLanguageVisible(false);
-    }
+    },
+    visible: isTranslationVisible
   }, _.line, {
     key: 'two_line_caption_enabled',
     title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -173,9 +183,6 @@ var useTranslationSettingOptions = exports.useTranslationSettingOptions = functi
         value: twoLineProps.value,
         onChange: twoLineProps.onChange
       })]
-    }),
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    })
   }];
 };

package/lib/modules/components/control-bar/components/loading/index.css

@@ -1,76 +1,76 @@
-.fcr-board-loading {
-  border-radius: 10px;
-  position: absolute;
-  z-index: 999;
-  display: flex;
-  top: 38px;
-  right: 13px;
-  width: 447px;
-  height: fit-content;
-  transition: all 0.2s;
-  padding: 16px 12px 0 19px;
-  gap: 14px;
-  background: #748bff;
-}
-.fcr-board-loading-minimize {
-  width: fit-content;
-  height: 38px;
-  padding: 0 14px 0;
-  gap: 6px;
-  display: flex;
-  align-items: center;
-}
-
-.fcr-board-loading-img-wrap img {
-  width: 100%;
-  height: 100%;
-  animation: rotate 1s linear infinite;
-  width: 43px;
-  height: 43px;
-}
-.fcr-board-loading-minimize .fcr-board-loading-img-wrap img {
-  width: 22px;
-  height: 22px;
-}
-.fcr-board-loading-text {
-  color: #fff;
-  font-size: 14px;
-  line-height: 18px;
-  font-weight: 600;
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-  white-space: pre-wrap;
-}
-.fcr-board-loading-minimize .fcr-board-loading-text {
-  color: #fff;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 600;
-}
-.fcr-board-loading-btns {
-  color: #fff;
-  display: flex;
-  gap: 7px;
-  justify-content: flex-end;
-  padding-top: 10px;
-}
-.fcr-board-loading-btns .fcr-button-secondary {
-  color: #fff;
-}
-.fcr-board-loading-content {
-  flex: 1;
-  justify-content: space-between;
-  padding-bottom: 10px;
-  display: flex;
-  flex-direction: column;
-}
-.fcr-board-loading-minimize .fcr-board-loading-content {
-  padding-bottom: 0;
-}
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(359deg);
-  }
-}
+.fcr-board-loading {
+  border-radius: 10px;
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  top: 38px;
+  right: 13px;
+  width: 447px;
+  height: fit-content;
+  transition: all 0.2s;
+  padding: 16px 12px 0 19px;
+  gap: 14px;
+  background: #748bff;
+}
+.fcr-board-loading-minimize {
+  width: fit-content;
+  height: 38px;
+  padding: 0 14px 0;
+  gap: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-board-loading-img-wrap img {
+  width: 100%;
+  height: 100%;
+  animation: rotate 1s linear infinite;
+  width: 43px;
+  height: 43px;
+}
+.fcr-board-loading-minimize .fcr-board-loading-img-wrap img {
+  width: 22px;
+  height: 22px;
+}
+.fcr-board-loading-text {
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  white-space: pre-wrap;
+}
+.fcr-board-loading-minimize .fcr-board-loading-text {
+  color: #fff;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 600;
+}
+.fcr-board-loading-btns {
+  color: #fff;
+  display: flex;
+  gap: 7px;
+  justify-content: flex-end;
+  padding-top: 10px;
+}
+.fcr-board-loading-btns .fcr-button-secondary {
+  color: #fff;
+}
+.fcr-board-loading-content {
+  flex: 1;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.fcr-board-loading-minimize .fcr-board-loading-content {
+  padding-bottom: 0;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}

package/lib/modules/components/control-bar/components/progress/style.css

@@ -1,51 +1,51 @@
-.fcr-progress-dialog-frame {
-  width: 290px;
-  min-height: 58px;
-  padding: 10px 0;
-  border-radius: var(--fcr_cornerradius_s);
-  background: var(--fcr_ui_scene_white6);
-  box-shadow: var(--fcr_web_light_dropup);
-  display: flex;
-  align-items: center;
-  z-index: 1000;
-  position: absolute;
-  top: calc(100% - 98px);
-  left: calc(100vw - 310px);
-}
-.fcr-progress-dialog-icon {
-  width: 32px;
-  height: 32px;
-  margin: 0 18px;
-}
-.fcr-progress-dialog-icon svg {
-  width: 32px;
-  height: 32px;
-}
-.fcr-progress-dialog-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  padding-right: 18px;
-}
-.fcr-progress-dialog-title {
-  font-size: 13px;
-  color: var(--fcr_ui_scene_icontext1);
-  margin-bottom: 10px;
-  justify-content: space-between;
-  display: flex;
-  flex: 1;
-}
-.fcr-progress-dialog-progress {
-  font-size: 12px;
-  height: 9px;
-  background: var(--fcr_ui_scene_ramp_brand1);
-  border-radius: var(--fcr_cornerradius_round);
-  flex: 1;
-}
-.fcr-progress-dialog-progress-bar {
-  width: 100%;
-  height: 9px;
-  background: var(--fcr_ui_scene_ramp_brand6);
-  border-radius: var(--fcr_cornerradius_round);
-}
+.fcr-progress-dialog-frame {
+  width: 290px;
+  min-height: 58px;
+  padding: 10px 0;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_ui_scene_white6);
+  box-shadow: var(--fcr_web_light_dropup);
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  position: absolute;
+  top: calc(100% - 98px);
+  left: calc(100vw - 310px);
+}
+.fcr-progress-dialog-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 18px;
+}
+.fcr-progress-dialog-icon svg {
+  width: 32px;
+  height: 32px;
+}
+.fcr-progress-dialog-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding-right: 18px;
+}
+.fcr-progress-dialog-title {
+  font-size: 13px;
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+  justify-content: space-between;
+  display: flex;
+  flex: 1;
+}
+.fcr-progress-dialog-progress {
+  font-size: 12px;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand1);
+  border-radius: var(--fcr_cornerradius_round);
+  flex: 1;
+}
+.fcr-progress-dialog-progress-bar {
+  width: 100%;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand6);
+  border-radius: var(--fcr_cornerradius_round);
+}