fcr-ui-scene 3.8.1-alpha → 3.8.1

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

@@ -1,340 +1,340 @@
-.share-action-nav__container {
-  width: fit-content;
-}
-
-.share-action-nav {
-  height: 54px;
-  border-radius: var(--fcr_cornerradius_m);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 0px;
-  padding: 8px 12px;
-  box-sizing: border-box;
-  align-items: center;
-  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  width: fit-content;
-}
-
-.draggable {
-  -webkit-app-region: drag;
-}
-
-.not-draggable {
-  -webkit-app-region: no-drag;
-}
-
-.share-action-nav__media-control-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 30px;
-  box-sizing: border-box;
-  align-items: center;
-}
-
-.share-action-nav__button {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  border-radius: var(--fcr_cornerradius_xs);
-  cursor: pointer;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.share-action-nav__button:hover {
-  background-color: var(--fcr_ui_scene_line1);
-}
-
-.share-action-nav__action-button {
-  width: 100%;
-  height: 36px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: center;
-}
-
-.share-action-nav__action-button:hover {
-  background-color: var(--fcr_web_ui_scene_hover2);
-}
-
-.share-action-nav__single-button {
-  width: 46px;
-}
-
-.share-action-nav__meeting-control-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 16px;
-  box-sizing: border-box;
-  align-items: center;
-}
-
-.share-action-nav__popover {
-  color: var(--fcr_ui_scene_icontext1);
-  border: 0.5px solid var(--fcr_ui_scene_line1);
-  box-shadow: var(--fcr_web_light_dropup_m);
-  border-radius: var(--fcr_cornerradius_l);
-  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  max-width: 300px;
-}
-
-.share-action-nav__popover .fcr-tooltip-inner {
-  width: 300px !important;
-}
-
-.share-action-nav__popover-inner-content {
-  padding: 10px 0;
-  color: var(--fcr_ui_scene_icontext1);
-  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
-}
-
-.color-dark-gray-icontext1 {
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.share-action-nav__media-title {
-  padding-left: 14px;
-  color: var(--fcr_ui_scene_icontext1);
-  font-size: 12px;
-}
-
-.share-action-nav__popover-option {
-  border-radius: 4px;
-  height: 32px;
-  display: flex;
-  color: var(--fcr_ui_scene_icontext1);
-  align-items: center;
-  gap: 8px;
-  padding: 6px;
-  box-sizing: border-box;
-  padding-left: 38px;
-}
-
-.share-action-nav__popover-option:hover {
-  background-color: var(--fcr_web_ui_scene_hover);
-}
-
-.share-action-nav__popover-option-media-setting {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 8px;
-  padding-left: 6px;
-}
-
-.share-action-nav__media-list-group .fcr-radio-transparent:hover span,
-.share-action-nav__popover-option:hover {
-  color: var(--fcr_web_ui_scene_mainicon2);
-}
-
-.share-action-nav__popover-option-media-setting:hover path {
-  fill: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.share-action-nav__button .fcr-radio {
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.share-action-nav__popover .fcr-radio {
-  width: 100%;
-  border-radius: 4px;
-  height: 32px;
-  display: flex;
-  color: var(--fcr_ui_scene_icontext1);
-  align-items: center;
-  gap: 8px;
-  padding: 6px;
-  box-sizing: border-box;
-}
-
-.share-action-nav__popover .fcr-radio:hover {
-  background-color: var(--fcr_web_ui_scene_hover);
-}
-
-.share-audio-button .fcr-checkbox-label {
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.room-screen-share-state-bar {
-  display: flex;
-}
-
-.share-action-nav__can-draggable {
-  cursor: pointer;
-  /* -webkit-app-region: drag; */
-}
-
-.share-action-nav__move_to_top {
-  flex-direction: column;
-  transition: all 0.3s ease;
-}
-
-.share-action-nav__move_to_bottom {
-  flex-direction: column-reverse;
-  transition: all 0.3s ease;
-}
-
-.invisible {
-  opacity: 0;
-}
-
-.completely-hidden-in-bottom {
-  transition: all 0.3s ease;
-  transform: translateY(54px);
-}
-
-.completely-hidden-in-top {
-  transition: all 0.3s ease;
-  transform: translateY(-54px);
-}
-
-/* .radio-label-active {
-  color: var(--fcr_web_ui_scene_mainicon2);
-} */
-
-.radio-label-normal {
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-control-bar-cloud-recording-buttons {
-  width: 78px;
-  height: 36px;
-  overflow: hidden;
-  border-radius: var(--fcr_cornerradius_xs);
-  display: inline-flex;
-  align-items: stretch;
-}
-
-.fcr-control-bar-cloud-recording-buttons > button {
-  flex: 1 0 38px;
-  font-size: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fcr-control-bar-cloud-recording-buttons:hover,
-.fcr-control-bar-cloud-recording-buttons > button:hover {
-  background-color: var(--fcr_web_ui_scene_hover2);
-}
-
-.fcr-control-bar-cloud-recording-buttons > button:first-child {
-  flex-basis: 40px;
-}
-
-.leave-title {
-  width: 100%;
-  height: 39px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-family: Verdana;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18.2px;
-  text-align: center;
-
-  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
-}
-
-.leave-confirm {
-  width: 100%;
-  height: 36px;
-  margin-top: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fcr_ui_scene_white10);
-  background: var(--fcr_ui_scene_ramp_red6);
-  border-radius: var(--fcr_cornerradius_l);
-
-  font-family: Helvetica Neue;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 24px;
-
-  cursor: pointer;
-}
-
-.leave-cancel {
-  width: 100%;
-  height: 36px;
-  margin-top: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fcr_ui_scene_ramp_red6, rgba(251, 88, 78, 1));
-  border-radius: var(--fcr_cornerradius_l);
-  border: 1px solid var(--fcr_ui_scene_ramp_red6);
-
-  font-family: Verdana;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 24px;
-  text-align: center;
-
-  cursor: pointer;
-}
-.share-action-nav .fcr-button {
-  -webkit-app-region: no-drag;
-}
-
-/* overide the default device control style for control bar */
-.share-action-nav__media-control-group .device-control {
-  width: 54px;
-  max-width: 54px;
-  min-width: 54px;
-  display: flex;
-}
-
-.share-action-nav__media-control-group .device-control-inner {
-  width: 36px;
-  height: 36px;
-  border-radius: none;
-  border-top-left-radius: var(--fcr_cornerradius_xs);
-  border-bottom-left-radius: var(--fcr_cornerradius_xs);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-
-.share-action-nav__media-control-group .device-control-inner:hover {
-  background: var(--fcr_web_ui_scene_hover2);
-}
-
-.share-action-nav__media-control-group .device-control-extra {
-  width: calc(54px - 34px);
-  height: 36px;
-  border-radius: 0;
-  border-top-right-radius: var(--fcr_cornerradius_xs);
-  border-bottom-right-radius: var(--fcr_cornerradius_xs);
-  position: initial;
-  cursor: pointer;
-}
-
-.share-action-nav__media-control-group .device-control-extra:hover svg {
-  transition: none;
-  transform: none;
-}
-
-.fcr-confirm-container .leave-container {
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-.fcr-confirm-container .leave-title {
-  height: auto;
-}
-
-.fcr-control-bar .fcr-tooltip {
-  max-width: 300px;
-}
+.share-action-nav__container {
+  width: fit-content;
+}
+
+.share-action-nav {
+  height: 54px;
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 0px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  align-items: center;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  width: fit-content;
+}
+
+.draggable {
+  -webkit-app-region: drag;
+}
+
+.not-draggable {
+  -webkit-app-region: no-drag;
+}
+
+.share-action-nav__media-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 30px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.share-action-nav__button:hover {
+  background-color: var(--fcr_ui_scene_line1);
+}
+
+.share-action-nav__action-button {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-action-nav__action-button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__single-button {
+  width: 46px;
+}
+
+.share-action-nav__meeting-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 16px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__popover {
+  color: var(--fcr_ui_scene_icontext1);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  max-width: 300px;
+}
+
+.share-action-nav__popover .fcr-tooltip-inner {
+  width: 300px !important;
+}
+
+.share-action-nav__popover-inner-content {
+  padding: 10px 0;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.color-dark-gray-icontext1 {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__media-title {
+  padding-left: 14px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+}
+
+.share-action-nav__popover-option {
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+  padding-left: 38px;
+}
+
+.share-action-nav__popover-option:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-action-nav__popover-option-media-setting {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  padding-left: 6px;
+}
+
+.share-action-nav__media-list-group .fcr-radio-transparent:hover span,
+.share-action-nav__popover-option:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-action-nav__popover-option-media-setting:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.share-action-nav__button .fcr-radio {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__popover .fcr-radio {
+  width: 100%;
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.share-action-nav__popover .fcr-radio:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-audio-button .fcr-checkbox-label {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.room-screen-share-state-bar {
+  display: flex;
+}
+
+.share-action-nav__can-draggable {
+  cursor: pointer;
+  /* -webkit-app-region: drag; */
+}
+
+.share-action-nav__move_to_top {
+  flex-direction: column;
+  transition: all 0.3s ease;
+}
+
+.share-action-nav__move_to_bottom {
+  flex-direction: column-reverse;
+  transition: all 0.3s ease;
+}
+
+.invisible {
+  opacity: 0;
+}
+
+.completely-hidden-in-bottom {
+  transition: all 0.3s ease;
+  transform: translateY(54px);
+}
+
+.completely-hidden-in-top {
+  transition: all 0.3s ease;
+  transform: translateY(-54px);
+}
+
+/* .radio-label-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+} */
+
+.radio-label-normal {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-control-bar-cloud-recording-buttons {
+  width: 78px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.fcr-control-bar-cloud-recording-buttons > button {
+  flex: 1 0 38px;
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-control-bar-cloud-recording-buttons:hover,
+.fcr-control-bar-cloud-recording-buttons > button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.fcr-control-bar-cloud-recording-buttons > button:first-child {
+  flex-basis: 40px;
+}
+
+.leave-title {
+  width: 100%;
+  height: 39px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18.2px;
+  text-align: center;
+
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.leave-confirm {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.leave-cancel {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_ramp_red6, rgba(251, 88, 78, 1));
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+
+  font-family: Verdana;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+
+  cursor: pointer;
+}
+.share-action-nav .fcr-button {
+  -webkit-app-region: no-drag;
+}
+
+/* overide the default device control style for control bar */
+.share-action-nav__media-control-group .device-control {
+  width: 54px;
+  max-width: 54px;
+  min-width: 54px;
+  display: flex;
+}
+
+.share-action-nav__media-control-group .device-control-inner {
+  width: 36px;
+  height: 36px;
+  border-radius: none;
+  border-top-left-radius: var(--fcr_cornerradius_xs);
+  border-bottom-left-radius: var(--fcr_cornerradius_xs);
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-inner:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__media-control-group .device-control-extra {
+  width: calc(54px - 34px);
+  height: 36px;
+  border-radius: 0;
+  border-top-right-radius: var(--fcr_cornerradius_xs);
+  border-bottom-right-radius: var(--fcr_cornerradius_xs);
+  position: initial;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-extra:hover svg {
+  transition: none;
+  transform: none;
+}
+
+.fcr-confirm-container .leave-container {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+.fcr-confirm-container .leave-title {
+  height: auto;
+}
+
+.fcr-control-bar .fcr-tooltip {
+  max-width: 300px;
+}

package/lib/modules/control-bar/index.js

@@ -114,10 +114,10 @@ var ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UI
       this.leaveMeetingStore.release();
     }
 
-    /**
-     * 屏幕共享时，浮动控制栏
-     * @param props
-     * @returns
+    /**
+     * 屏幕共享时，浮动控制栏
+     * @param props
+     * @returns
      */
   }, {
     key: "getComponent",