diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index b51494dd..1e394f86 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js @@ -56,6 +56,7 @@ import { FloatingLayerDecorator } from '@enact/ui/FloatingLayer'; import { FloatingLayerContext, } from '@enact/ui/FloatingLayer/FloatingLayerDecorator'; +import Marquee from '@enact/ui/Marquee'; import Slottable from '@enact/ui/Slottable'; import Touchable from '@enact/ui/Touchable'; @@ -2285,7 +2286,11 @@ const VideoPlayerBase = class extends React.Component { <>
-

{disclaimer}

+

+ + {disclaimer} + +

)} diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less index 68e79732..c93721b6 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less @@ -159,25 +159,26 @@ height: 14px; } > span { - font-size: 18px; + font-size: 16px; height: auto; width: auto; } } &.qvc { display: flex; - width: 180px; - height: 80px; - bottom: 9.5% !important; + width: 19%; + height: 22%; + padding: 1%; + bottom: 4% !important; left: 4.5% !important; } &.hsn { display: flex; - left: 7% !important; width: 19%; height: 22%; + padding: 1%; bottom: 4% !important; - padding: 30px 5px; + left: 7% !important; } } } @@ -256,29 +257,23 @@ } } - .disclaimerContainer { - width: 524px; - height: 74px; - padding: 12px; - border-radius: 5px; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - position: absolute; - top: 14px; - left: 18px; + .disclaimer { + color: #f2f2f2; + font-size: 18px; + line-height: 1.56; + z-index: 1; + width: 1002px; - > span { - width: 18px; - height: 18px; - background-size: 18px 18px; - background-image: url("../../../assets/images/icons/ic-warning.svg"); - margin: 4px 12px 0 0; - } - .disclaimer { - width: 470px; - color: #f2f2f2; - font-size: 18px; - line-height: 1.56; + display: inline-flex; + > h3 { + width: 100%; + height: 54px; + line-height: 54px; + .elip(@clamp:1); + .marquee { + width: 100%; + transition: opacity 0.5s ease-in-out; + } } }