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}
+
+
+
>
)}
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;
+ }
}
}