비디오 플레이어 콜투 오더 부분 처리건.
This commit is contained in:
junghoon86.park
@@ -1,4 +1,7 @@
|
||||
import React, { memo } from 'react';
|
||||
import React, {
|
||||
memo,
|
||||
useEffect,
|
||||
} from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useSelector } from 'react-redux';
|
||||
@@ -21,6 +24,7 @@ export default memo(function VideoOverlayWithPhoneNumber({
|
||||
className,
|
||||
orderPhnNo,
|
||||
patnerName,
|
||||
chanId,
|
||||
}) {
|
||||
const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
|
||||
|
||||
@@ -31,7 +35,7 @@ export default memo(function VideoOverlayWithPhoneNumber({
|
||||
className={classNames(
|
||||
className && className,
|
||||
css.callBox,
|
||||
countryCode === "RU" && patnerName === "Juvelirochka" && css.ru,
|
||||
countryCode === "RU" && chanId === "RUJUVELIROCHKA" && css.ru,
|
||||
countryCode === "US" && patnerName === "HSN" && css.hsn,
|
||||
countryCode === "US" && patnerName === "QVC" && css.qvc
|
||||
)}
|
||||
|
||||
@@ -2,7 +2,10 @@
|
||||
@import "../../style/utils.module.less";
|
||||
|
||||
.callBox {
|
||||
.flex(@direction: column, @alignCenter: flex-start);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
.size(@w:350px,@h:220px);
|
||||
padding: 61px 23px;
|
||||
border-radius: 10px;
|
||||
@@ -14,18 +17,25 @@
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
&.hsn {
|
||||
display: flex;
|
||||
bottom: 59px !important;
|
||||
left: 141px !important;
|
||||
}
|
||||
&.qvc {
|
||||
display: flex;
|
||||
bottom: 51px !important;
|
||||
left: 85px !important;
|
||||
}
|
||||
&.ru {
|
||||
bottom: 69px !important;
|
||||
left: 910px !important;
|
||||
.size(@w:470px,@h:132px);
|
||||
padding: 18px 126px 18px 18px;
|
||||
display: flex;
|
||||
width: 22%;
|
||||
height: 12%;
|
||||
bottom: 6.5% !important;
|
||||
left: 48% !important;
|
||||
padding: 18px 78px 18px 18px;
|
||||
.callToOrder {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.callNum {
|
||||
> span {
|
||||
.font(@fontFamily: @baseFont, @fontSize: 36px);
|
||||
|
||||
@@ -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");
|
||||
@@ -2269,8 +2287,19 @@ const VideoPlayerBase = class extends React.Component {
|
||||
type === "MEDIA"
|
||||
? css.videoOverlayMedia
|
||||
: css.videoOverlayWithPhoneNumber,
|
||||
countryCode === "RU" ? css.ru : css.us,
|
||||
videoVerticalVisible === "true" ? css.vertical : css.horizontal
|
||||
countryCode === "RU" ? css.ru : "",
|
||||
countryCode === "US" ? css.us : "",
|
||||
videoVerticalVisible === "true" ? css.vertical : css.horizontal,
|
||||
panelInfo?.chanId === "USQVC" ||
|
||||
panelInfo?.patnrNm === "QVC" ||
|
||||
panelInfo?.patncNm === "QVC"
|
||||
? css.qvc
|
||||
: "",
|
||||
panelInfo?.chanId === "USHSN" ||
|
||||
panelInfo?.patnrNm === "HSN" ||
|
||||
panelInfo?.patncNm === "HSN"
|
||||
? css.hsn
|
||||
: ""
|
||||
)}
|
||||
orderPhnNo={orderPhnNo}
|
||||
show
|
||||
|
||||
@@ -83,22 +83,79 @@
|
||||
}
|
||||
|
||||
.videoOverlayWithPhoneNumber {
|
||||
display: none;
|
||||
&.ru {
|
||||
scale: 0.4;
|
||||
bottom: -11px !important;
|
||||
left: 215px !important;
|
||||
display: flex;
|
||||
|
||||
width: 22%;
|
||||
height: 12.5%;
|
||||
bottom: 6.5% !important;
|
||||
left: 48% !important;
|
||||
padding: 4px !important;
|
||||
margin-bottom: 0 !important;
|
||||
> div:first-child {
|
||||
font-size: 12px !important;
|
||||
line-height: 12px !important;
|
||||
}
|
||||
> div:last-child {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
> span {
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.us {
|
||||
&.vertical {
|
||||
scale: 0.3;
|
||||
width: 105px;
|
||||
height: 66px;
|
||||
// width: 105px;
|
||||
// height: 66px;
|
||||
// scale: 0.3;
|
||||
bottom: 225px !important;
|
||||
left: -96px !important;
|
||||
}
|
||||
&.horizontal {
|
||||
scale: 0.4;
|
||||
bottom: -43px !important;
|
||||
left: -51px !important;
|
||||
> div:first-child {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
> div:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
> span {
|
||||
font-size: 18px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.qvc {
|
||||
display: flex;
|
||||
width: 180px;
|
||||
height: 125px;
|
||||
bottom: 5% !important;
|
||||
left: 4.5% !important;
|
||||
}
|
||||
&.hsn {
|
||||
display: flex;
|
||||
left: 7% !important;
|
||||
width: 19%;
|
||||
height: 22%;
|
||||
bottom: 4% !important;
|
||||
padding: 30px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> img {
|
||||
@@ -113,46 +170,12 @@
|
||||
}
|
||||
|
||||
.videoOverlayMedia {
|
||||
height: 68px;
|
||||
.flex(@direction: column, @alignCenter: flex-start);
|
||||
padding: 8px 8px 10px 6px;
|
||||
border-radius: 4px;
|
||||
border: solid 2px rgba(255, 255, 255, 0.7);
|
||||
background-image: linear-gradient(to top, #1a1a1a 93%, #8e8e8e);
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 20px;
|
||||
box-shadow: 5px 8.7px 15px 0 rgba(6, 0, 1, 0.5);
|
||||
|
||||
> div:first-child {
|
||||
.flex();
|
||||
font-size: 14px;
|
||||
line-height: 2.67;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
background-color: #606060;
|
||||
margin-bottom: 6px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
.size(@w: 146px, @h: 20px);
|
||||
.flex(@justifyCenter:flex-start);
|
||||
|
||||
> img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
> span {
|
||||
.font(@fontFamily: @baseFont, @fontSize: 14.5px);
|
||||
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.9px;
|
||||
}
|
||||
scale: 0.3;
|
||||
bottom: 62px !important;
|
||||
left: -84px !important;
|
||||
&.qvc,
|
||||
&.hsn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,40 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import classNames from "classnames";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
import Spotlight from '@enact/spotlight';
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
import Spottable from '@enact/spotlight/Spottable';
|
||||
|
||||
import playImg from "../../../../../assets/images/btn/btn-play-thumb-nor.png";
|
||||
import indicatorDefaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
|
||||
import defaultImage from "../../../../../assets/images/img-thumb-empty-560.png";
|
||||
import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
|
||||
import indicatorDefaultImage
|
||||
from '../../../../../assets/images/img-thumb-empty-144@3x.png';
|
||||
import defaultImage from '../../../../../assets/images/img-thumb-empty-560.png';
|
||||
import {
|
||||
finishVideoPreview,
|
||||
startVideoPlayer,
|
||||
} from "../../../../actions/playActions";
|
||||
import CustomImage from "../../../../components/CustomImage/CustomImage";
|
||||
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
|
||||
import usePriceInfo from "../../../../hooks/usePriceInfo";
|
||||
import useScrollTo from "../../../../hooks/useScrollTo";
|
||||
import { panel_names } from "../../../../utils/Config";
|
||||
import { $L, scaleW } from "../../../../utils/helperMethods";
|
||||
import css from "./Indicator.module.less";
|
||||
} from '../../../../actions/playActions';
|
||||
import CustomImage from '../../../../components/CustomImage/CustomImage';
|
||||
import TVirtualGridList
|
||||
from '../../../../components/TVirtualGridList/TVirtualGridList';
|
||||
import usePriceInfo from '../../../../hooks/usePriceInfo';
|
||||
import useScrollTo from '../../../../hooks/useScrollTo';
|
||||
import { panel_names } from '../../../../utils/Config';
|
||||
import {
|
||||
$L,
|
||||
scaleW,
|
||||
} from '../../../../utils/helperMethods';
|
||||
import css from './Indicator.module.less';
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{ enterTo: "last-focused", preserveld: true },
|
||||
@@ -90,6 +104,7 @@ function Indicator({
|
||||
lgCatNm: productInfo?.catNm,
|
||||
prdtId: productInfo?.prdtId,
|
||||
prdtNm: productInfo?.prdtNm,
|
||||
patncNm: productInfo?.patncNm,
|
||||
// modal: autoPlaying,
|
||||
modal: true,
|
||||
shptmBanrTpNm: "MEDIA",
|
||||
@@ -175,6 +190,7 @@ function Indicator({
|
||||
patnrId: productInfo?.patnrId,
|
||||
lgCatNm: productInfo?.catNm,
|
||||
prdtId: productInfo?.prdtId,
|
||||
patncNm: productInfo?.patncNm,
|
||||
prdtNm: productInfo?.prdtNm,
|
||||
shptmBanrTpNm: "MEDIA",
|
||||
modal: false,
|
||||
|
||||
@@ -1,26 +1,39 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import classNames from "classnames";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import Image from "@enact/sandstone/Image";
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
import Image from '@enact/sandstone/Image';
|
||||
import Spotlight from '@enact/spotlight';
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
import Spottable from '@enact/spotlight/Spottable';
|
||||
|
||||
import playImg from "../../../../../assets/images/btn/btn-play-thumb-nor.png";
|
||||
import defaultImage from "../../../../../assets/images/img-thumb-empty-560.png";
|
||||
import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
|
||||
import defaultImage from '../../../../../assets/images/img-thumb-empty-560.png';
|
||||
import {
|
||||
finishVideoPreview,
|
||||
startVideoPlayer,
|
||||
} from "../../../../actions/playActions";
|
||||
import CustomImage from "../../../../components/CustomImage/CustomImage";
|
||||
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
|
||||
import useScrollTo from "../../../../hooks/useScrollTo";
|
||||
import { panel_names } from "../../../../utils/Config";
|
||||
import { $L, scaleW } from "../../../../utils/helperMethods";
|
||||
import css from "./ThemeIndicator.module.less";
|
||||
import ThemeIndicatorArrow from "./ThemeIndicatorArrow";
|
||||
} from '../../../../actions/playActions';
|
||||
import CustomImage from '../../../../components/CustomImage/CustomImage';
|
||||
import TVirtualGridList
|
||||
from '../../../../components/TVirtualGridList/TVirtualGridList';
|
||||
import useScrollTo from '../../../../hooks/useScrollTo';
|
||||
import { panel_names } from '../../../../utils/Config';
|
||||
import {
|
||||
$L,
|
||||
scaleW,
|
||||
} from '../../../../utils/helperMethods';
|
||||
import css from './ThemeIndicator.module.less';
|
||||
import ThemeIndicatorArrow from './ThemeIndicatorArrow';
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{ enterTo: "last-focused", preserveld: true },
|
||||
@@ -125,6 +138,7 @@ function ThemeIndicator({
|
||||
lgCatCd: themeProductInfo?.catCd,
|
||||
lgCatNm: themeProductInfo?.catNm,
|
||||
prdtId: themeProductInfo?.prdtId,
|
||||
patncNm: productInfo?.patncNm,
|
||||
prdtNm: themeProductInfo?.prdtNm,
|
||||
shptmBanrTpNm: "MEDIA",
|
||||
// modal: autoPlaying,
|
||||
@@ -266,6 +280,7 @@ function ThemeIndicator({
|
||||
patnrId: themeProductInfo?.patnrId,
|
||||
lgCatNm: themeProductInfo?.catNm,
|
||||
prdtId: themeProductInfo?.prdtId,
|
||||
patncNm: productInfo?.patncNm,
|
||||
prdtNm: themeProductInfo?.prdtNm,
|
||||
shptmBanrTpNm: "MEDIA",
|
||||
modal: false,
|
||||
|
||||
@@ -4,53 +4,62 @@ import React, {
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
} from 'react';
|
||||
|
||||
import classNames from "classnames";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import { Job } from "@enact/core/util";
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import { Job } from '@enact/core/util';
|
||||
import Spotlight from '@enact/spotlight';
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
|
||||
import dummyVtt from "../../../assets/mock/video.vtt";
|
||||
import dummyVtt from '../../../assets/mock/video.vtt';
|
||||
import {
|
||||
changeLocalSettings,
|
||||
requestLiveSubtitle,
|
||||
sendBroadCast,
|
||||
} from "../../actions/commonActions";
|
||||
import { sendLogGNB, sendLogLive, sendLogVOD } from "../../actions/logActions";
|
||||
} from '../../actions/commonActions';
|
||||
import {
|
||||
sendLogGNB,
|
||||
sendLogLive,
|
||||
sendLogVOD,
|
||||
} from '../../actions/logActions';
|
||||
import {
|
||||
clearShopNowInfo,
|
||||
getHomeFullVideoInfo,
|
||||
getMainCategoryShowDetail,
|
||||
getMainLiveShow,
|
||||
getMainLiveShowNowProduct,
|
||||
} from "../../actions/mainActions";
|
||||
import * as PanelActions from "../../actions/panelActions";
|
||||
import { updatePanel } from "../../actions/panelActions";
|
||||
} from '../../actions/mainActions';
|
||||
import * as PanelActions from '../../actions/panelActions';
|
||||
import { updatePanel } from '../../actions/panelActions';
|
||||
import {
|
||||
CLEAR_PLAYER_INFO,
|
||||
getChatLog,
|
||||
getSubTitle,
|
||||
startVideoPlayer,
|
||||
} from "../../actions/playActions";
|
||||
import { convertUtcToLocal } from "../../components/MediaPlayer/util";
|
||||
import TPanel from "../../components/TPanel/TPanel";
|
||||
import VideoOverlayWithPhoneNumber from "../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber";
|
||||
import Media from "../../components/VideoPlayer/Media";
|
||||
import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
|
||||
import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
|
||||
import usePrevious from "../../hooks/usePrevious";
|
||||
import * as Config from "../../utils/Config";
|
||||
import { panel_names } from "../../utils/Config";
|
||||
import { formatGMTString } from "../../utils/helperMethods";
|
||||
import { SpotlightIds } from "../../utils/SpotlightIds";
|
||||
import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat";
|
||||
import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
|
||||
import css from "./PlayerPanel.module.less";
|
||||
import PlayerTabButton from "./PlayerTabContents/TabButton/PlayerTabButton";
|
||||
import TabContainer from "./PlayerTabContents/TabContaienr";
|
||||
} from '../../actions/playActions';
|
||||
import { convertUtcToLocal } from '../../components/MediaPlayer/util';
|
||||
import TPanel from '../../components/TPanel/TPanel';
|
||||
import VideoOverlayWithPhoneNumber
|
||||
from '../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber';
|
||||
import Media from '../../components/VideoPlayer/Media';
|
||||
import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
|
||||
import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
|
||||
import usePrevious from '../../hooks/usePrevious';
|
||||
import * as Config from '../../utils/Config';
|
||||
import { panel_names } from '../../utils/Config';
|
||||
import { formatGMTString } from '../../utils/helperMethods';
|
||||
import { SpotlightIds } from '../../utils/SpotlightIds';
|
||||
import PlayerOverlayChat from './PlayerOverlay/PlayerOverlayChat';
|
||||
import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
|
||||
import css from './PlayerPanel.module.less';
|
||||
import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton';
|
||||
import TabContainer from './PlayerTabContents/TabContaienr';
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{ enterTo: "default-element", preserveld: true },
|
||||
@@ -1481,6 +1490,7 @@ const PlayerPanel = ({
|
||||
handleIndicatorUpClick();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TPanel
|
||||
isTabActivated={false}
|
||||
@@ -1579,6 +1589,7 @@ const PlayerPanel = ({
|
||||
className={css.videoOverlayWithPhoneNumber}
|
||||
orderPhnNo={orderPhoneNumber}
|
||||
patnerName={playListInfo[selectedIndex]?.patncNm}
|
||||
chanId={panelInfo?.chanId}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
}
|
||||
|
||||
.videoOverlayWithPhoneNumber {
|
||||
bottom: 210px;
|
||||
left: 60px;
|
||||
bottom: 59px;
|
||||
left: 141px;
|
||||
}
|
||||
|
||||
.videoReduce {
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
import React, { useCallback, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spotlight from '@enact/spotlight';
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
|
||||
import { LOG_MENU } from "../../../utils/Config";
|
||||
import css from "./PopularShowIndicator.module.less";
|
||||
import PopularProductList from "./PopularShowVerticalContents/PopularProductList";
|
||||
import PopularVideoCard from "./PopularVideoCard/PopularVideoCard";
|
||||
import { LOG_MENU } from '../../../utils/Config';
|
||||
import css from './PopularShowIndicator.module.less';
|
||||
import PopularProductList
|
||||
from './PopularShowVerticalContents/PopularProductList';
|
||||
import PopularVideoCard from './PopularVideoCard/PopularVideoCard';
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{
|
||||
@@ -34,6 +39,7 @@ export default function PopularShowIndicator({
|
||||
showUrl,
|
||||
catCd,
|
||||
showId,
|
||||
patncNm,
|
||||
} = topInfos[selectedIndex];
|
||||
|
||||
const isVertical = Boolean(vtctpYn === "Y");
|
||||
@@ -69,6 +75,7 @@ export default function PopularShowIndicator({
|
||||
patnrId={patnrId}
|
||||
lgCatCd={catCd}
|
||||
handleItemFocus={_handleItemFocus}
|
||||
patncNm={patncNm}
|
||||
/>
|
||||
</Container>
|
||||
<Container className={css.popularProductListContainer}>
|
||||
|
||||
@@ -1,22 +1,27 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import classNames from "classnames";
|
||||
import { useDispatch } from "react-redux";
|
||||
import classNames from 'classnames';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { Job } from "@enact/core/util";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
import { Marquee } from "@enact/ui/Marquee";
|
||||
import { Job } from '@enact/core/util';
|
||||
import Spottable from '@enact/spotlight/Spottable';
|
||||
import { Marquee } from '@enact/ui/Marquee';
|
||||
|
||||
import ic_crown from "../../../../../assets/images/icons/ic-crown-badge@3x.png";
|
||||
import ic_warning from "../../../../../assets/images/icons/ic-warning@3x.png";
|
||||
import ic_call from "../../../../../assets/images/icons/ic-wh-call@3x.png";
|
||||
import ic_crown from '../../../../../assets/images/icons/ic-crown-badge@3x.png';
|
||||
import ic_warning from '../../../../../assets/images/icons/ic-warning@3x.png';
|
||||
import ic_call from '../../../../../assets/images/icons/ic-wh-call@3x.png';
|
||||
import {
|
||||
finishVideoPreview,
|
||||
startVideoPlayer,
|
||||
} from "../../../../actions/playActions";
|
||||
import CustomImage from "../../../../components/CustomImage/CustomImage";
|
||||
import { $L } from "../../../../utils/helperMethods";
|
||||
import css from "./PopularVideoCard.module.less";
|
||||
} from '../../../../actions/playActions';
|
||||
import CustomImage from '../../../../components/CustomImage/CustomImage';
|
||||
import { $L } from '../../../../utils/helperMethods';
|
||||
import css from './PopularVideoCard.module.less';
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
|
||||
@@ -45,6 +50,7 @@ export default function PopularVideoCard({
|
||||
patnrId,
|
||||
lgCatCd,
|
||||
handleItemFocus,
|
||||
patncNm,
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
@@ -64,6 +70,7 @@ export default function PopularVideoCard({
|
||||
patnrId,
|
||||
shptmBanrTpNm: "VOD",
|
||||
lgCatCd: lgCatCd,
|
||||
patncNm,
|
||||
modal: true,
|
||||
modalContainerId: spotlightId, //to calc width, height, left, top
|
||||
modalClassName: css.videoModal,
|
||||
@@ -96,6 +103,7 @@ export default function PopularVideoCard({
|
||||
patnrId,
|
||||
shptmBanrTpNm: "VOD",
|
||||
lgCatCd: lgCatCd,
|
||||
patncNm,
|
||||
modal: false,
|
||||
modalContainerId: spotlightId, //to calc width, height, left, top
|
||||
modalClassName: css.videoModal,
|
||||
|
||||
@@ -125,46 +125,9 @@
|
||||
}
|
||||
|
||||
.callBox {
|
||||
width: 154px;
|
||||
height: 68px;
|
||||
.flex(@direction: column, @alignCenter: flex-start);
|
||||
padding: 8px 8px 10px 6px;
|
||||
border-radius: 4px;
|
||||
border: solid 2px rgba(255, 255, 255, 0.7);
|
||||
background-image: linear-gradient(to top, #1a1a1a 93%, #8e8e8e);
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
left: 58px;
|
||||
box-shadow: 5px 8.7px 15px 0 rgba(6, 0, 1, 0.5);
|
||||
|
||||
.callToOrder {
|
||||
.flex();
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
width: 98px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
background-color: #606060;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.callNum {
|
||||
.size(@w: 146px, @h: 20px);
|
||||
.flex(@justifyCenter:flex-start);
|
||||
|
||||
> img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
> span {
|
||||
.font(@fontFamily: @baseFont, @fontSize: 18px);
|
||||
width: 122px;
|
||||
font-weight: 600;
|
||||
line-height: 1.73;
|
||||
letter-spacing: -0.9px;
|
||||
}
|
||||
}
|
||||
scale: 0.52 !important;
|
||||
bottom: -24px !important;
|
||||
left: -39px !important;
|
||||
}
|
||||
|
||||
.notice {
|
||||
|
||||
Reference in New Issue
Block a user