비디오 오버레이 관련 처리

2024-07-18 16:18:55 +09:00
parent c100914150
commit c1e4dd1520
4 changed files with 129 additions and 74 deletions
--- a/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.jsx
+++ b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.jsx
@@ -1,12 +1,11 @@
-import React, { memo } from "react";
+import React, { memo } from 'react';

-import classNames from "classnames";
-import { useSelector } from "react-redux";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';

-import IcWhiteCall from "../../../assets/images/icons/ic-wh-call.svg";
-import IcCallToOrder from "../../../assets/images/tag/tag-calltoorder.svg";
-import { $L } from "../../utils/helperMethods";
-import css from "./VideoOverlayWithPhoneNumber.module.less";
+import IcWhiteCall from '../../../assets/images/icons/ic-wh-call@3x.png';
+import { $L } from '../../utils/helperMethods';
+import css from './VideoOverlayWithPhoneNumber.module.less';

 const CALL_TO_ORDER_STRING = "Call to Order";
 const PHONE_STRING = "Phone";
@@ -24,6 +23,7 @@ export default memo(function VideoOverlayWithPhoneNumber({
  patnerName,
 }) {
  const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
+
  return (
    <>
      {orderPhnNo && (
@@ -31,7 +31,7 @@ export default memo(function VideoOverlayWithPhoneNumber({
          className={classNames(
            className && className,
            css.callBox,
-            countryCode === "DE" && patnerName === "QVC" && css.de,
+            countryCode === "RU" && patnerName === "Juvelirochka" && css.ru,
            countryCode === "US" && patnerName === "HSN" && css.hsn,
            countryCode === "US" && patnerName === "QVC" && css.qvc
          )}
--- a/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.module.less
+++ b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.module.less
@@ -3,51 +3,72 @@

 .callBox {
  .flex(@direction: column, @alignCenter: flex-start);
-  padding: 8px 8px 10px 14px;
+  .size(@w:350px,@h:220px);
+  padding: 61px 23px;
  border-radius: 10px;
  border: solid 2px rgba(255, 255, 255, 0.7);
-  background-image: linear-gradient(to top, #1a1a1a 93%, #8e8e8e);
+  background-color: #f4b800;
  position: absolute;
-  bottom: 200px;
-  left: 60px;
  box-shadow: 5px 8.7px 15px 0 rgba(6, 0, 1, 0.5);
-  color: @COLOR_WHITE;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
-  &.de {
-    bottom: 384px !important;
-    left: 116px !important;
+  &.hsn {
+    bottom: 59px !important;
+    left: 141px !important;
+  }
+  &.qvc {
+    bottom: 51px !important;
+    left: 85px !important;
+  }
+  &.ru {
+    bottom: 69px !important;
+    left: 910px !important;
+    .size(@w:470px,@h:132px);
+    padding: 18px 126px 18px 18px;
+    .callNum {
+      > span {
+        .font(@fontFamily: @baseFont, @fontSize: 36px);
+        width: 273px;
+        height: 26px;
+        font-weight: 600;
+        color: @COLOR_BLACK;
+        letter-spacing: -0.9px;
+      }
+    }
  }

  .callToOrder {
    .flex();
-    font-size: 14px;
+    font-size: 22px;
    font-weight: 600;
    border-radius: 2px;
-    background-color: #606060;
+    background-color: @COLOR_BLACK;
    margin-bottom: 6px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
-    padding: 0 5px;
+    color: @COLOR_WHITE;
+    padding: 0 10px;
    min-width: 0;
-    max-width: 200px;
+    max-width: 250px;
    text-align: left;
+    max-height: 42px;
  }

  .callNum {
+    margin-top: 10px;
    > img {
      width: 34px;
      height: 34px;
      margin-right: 4px;
    }
    > span {
-      .font(@fontFamily: @baseFont, @fontSize: 29px);
+      .font(@fontFamily: @baseFont, @fontSize: 40px);
      width: 181px;
      height: 21px;
      font-weight: 600;
-
+      color: @COLOR_BLACK;
      letter-spacing: -0.9px;
    }
  }
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
@@ -7,15 +7,18 @@
 * @exports VideoPlayerBase
 */

-import React from "react";
-import ReactDOM from "react-dom";
+import React from 'react';
+import ReactDOM from 'react-dom';

-import classNames from "classnames";
-import DurationFmt from "ilib/lib/DurationFmt";
-import PropTypes from "prop-types";
-import shallowEqual from "recompose/shallowEqual";
+import classNames from 'classnames';
+import DurationFmt from 'ilib/lib/DurationFmt';
+import PropTypes from 'prop-types';
+import shallowEqual from 'recompose/shallowEqual';

-import { off, on } from "@enact/core/dispatcher";
+import {
+  off,
+  on,
+} from '@enact/core/dispatcher';
 import {
  adaptEvent,
  call,
@@ -26,47 +29,62 @@ import {
  preventDefault,
  returnsTrue,
  stopImmediate,
-} from "@enact/core/handle";
-import ApiDecorator from "@enact/core/internal/ApiDecorator";
-import EnactPropTypes from "@enact/core/internal/prop-types";
-import { is } from "@enact/core/keymap";
-import { platform } from "@enact/core/platform";
-import { Job, memoize, perfNow } from "@enact/core/util";
-import { I18nContextDecorator } from "@enact/i18n/I18nDecorator";
-import { toUpperCase } from "@enact/i18n/util";
-import Skinnable from "@enact/sandstone/Skinnable";
-import { getDirection, Spotlight } from "@enact/spotlight";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import { Spottable } from "@enact/spotlight/Spottable";
-import Announce from "@enact/ui/AnnounceDecorator/Announce";
-import ComponentOverride from "@enact/ui/ComponentOverride";
-import { FloatingLayerDecorator } from "@enact/ui/FloatingLayer";
-import { FloatingLayerContext } from "@enact/ui/FloatingLayer/FloatingLayerDecorator";
-import Slottable from "@enact/ui/Slottable";
-import Touchable from "@enact/ui/Touchable";
+} from '@enact/core/handle';
+import ApiDecorator from '@enact/core/internal/ApiDecorator';
+import EnactPropTypes from '@enact/core/internal/prop-types';
+import { is } from '@enact/core/keymap';
+import { platform } from '@enact/core/platform';
+import {
+  Job,
+  memoize,
+  perfNow,
+} from '@enact/core/util';
+import { I18nContextDecorator } from '@enact/i18n/I18nDecorator';
+import { toUpperCase } from '@enact/i18n/util';
+import Skinnable from '@enact/sandstone/Skinnable';
+import {
+  getDirection,
+  Spotlight,
+} from '@enact/spotlight';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import { Spottable } from '@enact/spotlight/Spottable';
+import Announce from '@enact/ui/AnnounceDecorator/Announce';
+import ComponentOverride from '@enact/ui/ComponentOverride';
+import { FloatingLayerDecorator } from '@enact/ui/FloatingLayer';
+import {
+  FloatingLayerContext,
+} from '@enact/ui/FloatingLayer/FloatingLayerDecorator';
+import Slottable from '@enact/ui/Slottable';
+import Touchable from '@enact/ui/Touchable';

-import { panel_names } from "../../utils/Config";
-import { $L } from "../../utils/helperMethods";
-import { SpotlightIds } from "../../utils/SpotlightIds";
-import ThemeIndicator from "../../views/DetailPanel/components/indicator/ThemeIndicator";
-import ThemeIndicatorArrow from "../../views/DetailPanel/components/indicator/ThemeIndicatorArrow";
-import PlayerOverlayContents from "../../views/PlayerPanel/PlayerOverlay/PlayerOverlayContents";
-import Loader from "../Loader/Loader";
+import { panel_names } from '../../utils/Config';
+import { $L } from '../../utils/helperMethods';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import ThemeIndicator
+  from '../../views/DetailPanel/components/indicator/ThemeIndicator';
+import ThemeIndicatorArrow
+  from '../../views/DetailPanel/components/indicator/ThemeIndicatorArrow';
+import PlayerOverlayContents
+  from '../../views/PlayerPanel/PlayerOverlay/PlayerOverlayContents';
+import Loader from '../Loader/Loader';
 import {
  MediaControls,
  MediaSlider,
  secondsToTime,
  Times,
-} from "../MediaPlayer";
-import VideoOverlayWithPhoneNumber from "../VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber";
-import FeedbackContent from "./FeedbackContent";
-import FeedbackTooltip from "./FeedbackTooltip";
-import Media from "./Media";
-import MediaTitle from "./MediaTitle";
-import Overlay from "./Overlay";
-import TReactPlayer from "./TReactPlayer";
-import Video from "./Video";
-import css from "./VideoPlayer.module.less";
+} from '../MediaPlayer';
+import VideoOverlayWithPhoneNumber
+  from '../VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber';
+import FeedbackContent from './FeedbackContent';
+import FeedbackTooltip from './FeedbackTooltip';
+import Media from './Media';
+import MediaTitle from './MediaTitle';
+import Overlay from './Overlay';
+import TReactPlayer from './TReactPlayer';
+import Video from './Video';
+import css from './VideoPlayer.module.less';

 const isEnter = is("enter");
 const isLeft = is("left");
@@ -977,12 +995,12 @@ const VideoPlayerBase = class extends React.Component {
    }
    //for old browser
    const progressbarNode = document.querySelector(`[role="progressbar"]`);
-    if(progressbarNode){
+    if (progressbarNode) {
      const pBGNode = progressbarNode.childNodes?.[0]?.childNodes?.[0];
      const pProgressNode = progressbarNode.childNodes?.[0]?.childNodes?.[1];
-      if(pBGNode && pProgressNode){
-        pBGNode.style.width = this.state.proportionLoaded*100+"%";
-        pProgressNode.style.width = this.state.proportionPlayed*100+"%";
+      if (pBGNode && pProgressNode) {
+        pBGNode.style.width = this.state.proportionLoaded * 100 + "%";
+        pProgressNode.style.width = this.state.proportionPlayed * 100 + "%";
      }
    }
  }
@@ -2261,11 +2279,13 @@ const VideoPlayerBase = class extends React.Component {
          )}
        {panelInfo.modal && orderPhnNo && (
          <VideoOverlayWithPhoneNumber
-            className={
+            className={classNames(
              type === "MEDIA"
                ? css.videoOverlayMedia
-                : css.videoOverlayWithPhoneNumber
-            }
+                : css.videoOverlayWithPhoneNumber,
+              countryCode === "RU" ? css.ru : css.us,
+              videoVerticalVisible === "true" ? css.vertical : css.horizontal
+            )}
            orderPhnNo={orderPhnNo}
            show
          />
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
@@ -83,10 +83,24 @@
  }

  .videoOverlayWithPhoneNumber {
-    font-size: 29px;
-    bottom: 64px;
-    left: 18px;
+    &.ru {
+      scale: 0.4;
+      bottom: -11px !important;
+      left: 215px !important;
+    }

+    &.us {
+      &.vertical {
+        scale: 0.3;
+        bottom: 225px !important;
+        left: -96px !important;
+      }
+      &.horizontal {
+        scale: 0.4;
+        bottom: -43px !important;
+        left: -51px !important;
+      }
+    }
    > img {
      width: 102px;
      height: 35px;