[PlayerPanel] channel title dangerousHTML

This commit is contained in:
고동영
2024-06-25 11:17:22 +09:00
parent 76d5398a96
commit 2bf6e43dda
4 changed files with 47 additions and 46 deletions

View File

@@ -50,6 +50,7 @@ export default memo(function PlayerItemCard({
selectedIndex,
videoVerticalVisible,
currentVideoVisible,
dangerouslySetInnerHTML,
liveInfo,
type = TYPES.liveHorizontal,
@@ -144,7 +145,11 @@ export default memo(function PlayerItemCard({
/>
<h3 className={css.brandName}>{patnerName}</h3>
</div>
<h3 className={css.title}>{productName}</h3>
<h3
dangerouslySetInnerHTML={productName && productName()}
className={css.title}
/>
{liveInfo && (
<div
className={classNames(

View File

@@ -1,24 +1,19 @@
import React, {
useCallback,
useMemo,
} from 'react';
import React, { useCallback, useMemo } from "react";
import classNames from 'classnames';
import { useDispatch } from 'react-redux';
import classNames from "classnames";
import { useDispatch } from "react-redux";
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { Cancelable } from '@enact/ui/Cancelable';
import Marquee from '@enact/ui/Marquee';
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { Cancelable } from "@enact/ui/Cancelable";
import Marquee from "@enact/ui/Marquee";
import defaultLogoImg
from '../../../../assets/images/ic-tab-partners-default@3x.png';
import CustomImage from '../../../components/CustomImage/CustomImage';
import { SpotlightIds } from '../../../utils/SpotlightIds';
import PlayerTabButton from '../PlayerTabContents/TabButton/PlayerTabButton';
import css from './PlayerOverlayContents.module.less';
import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png";
import CustomImage from "../../../components/CustomImage/CustomImage";
import { SpotlightIds } from "../../../utils/SpotlightIds";
import PlayerTabButton from "../PlayerTabContents/TabButton/PlayerTabButton";
import css from "./PlayerOverlayContents.module.less";
const SpottableBtn = Spottable("button");
@@ -80,10 +75,10 @@ export default function PlayerOverlayContents({
[playListInfo, selectedIndex, panelInfo]
);
const showName = useMemo(
() => getPartnerInfo("showNm"),
[playListInfo, selectedIndex, panelInfo]
);
const showName = useMemo(() => {
const name = getPartnerInfo("showNm");
return name.replace(/<br\s*\/?>/gi, " ");
}, [playListInfo, selectedIndex, panelInfo]);
const onSpotlightMoveTabButton = (e) => {
e.stopPropagation();

View File

@@ -1,27 +1,17 @@
import React, {
useCallback,
useEffect,
useMemo,
} from 'react';
import React, { useCallback, useEffect, useMemo } from "react";
import { useDispatch } from 'react-redux';
import { useDispatch } from "react-redux";
import Spotlight from '@enact/spotlight';
import Spotlight from "@enact/spotlight";
import defaultImage
from '../../../../../assets/images/img-thumb-empty-144@3x.png';
import { updatePanel } from '../../../../actions/panelActions';
import TVirtualGridList
from '../../../../components/TVirtualGridList/TVirtualGridList';
import {
LOG_MENU,
panel_names,
} from '../../../../utils/Config';
import { $L } from '../../../../utils/helperMethods';
import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
import ListEmptyContents
from '../TabContents/ListEmptyContents/ListEmptyContents';
import css from './LiveChannelContents.module.less';
import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
import { updatePanel } from "../../../../actions/panelActions";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { LOG_MENU, panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
import css from "./LiveChannelContents.module.less";
export default function FeaturedShowContents({
featuredShowsInfos,
@@ -72,6 +62,9 @@ export default function FeaturedShowContents({
showNm,
} = featuredShowsInfos[index];
const showNameDangerouslySetInnerHTML = () => {
return { __html: showNm };
};
return (
<PlayerItemCard
{...rest}
@@ -79,7 +72,7 @@ export default function FeaturedShowContents({
imageAlt={prdtId}
logo={patncLogoPath}
imageSource={thumbnailUrl ? thumbnailUrl : defaultImage}
productName={showNm}
productName={showNameDangerouslySetInnerHTML}
patnerName={patncNm}
onClick={handleItemClick(index, patnrId, showId)}
onFocus={handleFocus()}

View File

@@ -69,6 +69,10 @@ export default function LiveChannelContents({
);
};
const showNameDangerouslySetInnerHTML = () => {
return { __html: showNm };
};
return (
<PlayerItemCard
{...rest}
@@ -77,7 +81,11 @@ export default function LiveChannelContents({
logo={patncLogoPath}
imageSource={thumbnailUrl ? thumbnailUrl : dfltThumbnailImgPath}
videoVerticalVisible={videoVerticalVisible}
productName={showNm ? showNm : $L("No Livestream scheduled yet")}
productName={
showNm
? showNameDangerouslySetInnerHTML
: $L("No Livestream scheduled yet")
}
patnerName={patncNm}
onClick={handleItemClick}
onFocus={handleFocus()}