@24i/bigscreen-sdk 1.0.39 → 1.0.40-alpha.2687

package/packages/epg/src/v2/MockGenerator/utils.ts

@@ -1,28 +1,28 @@
-import { MOCK_IMAGE_WIDTH, MOCK_IMAGE_HEIGHT } from './config';
-import { channelLogos, programTitles, synopsisVariants } from './mocks/data';
-
-export const getRandomItemFromArray = <T>(array: Array<T>): T => (
-    array[Math.floor(Math.random() * array.length)]
-);
-
-export const shuffleArray = <T>(array: T[]): T[] => {
-    for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * array.length);
-        const temp = array[i];
-        array[i] = array[j];
-        array[j] = temp;
-    }
-    return array;
-};
-
-export const randomFromRange = (min: number, max: number) => Math.random() * (max - min) + min;
-
-export const getSynopsis = () => getRandomItemFromArray(synopsisVariants);
-
-export const getProgramName = () => getRandomItemFromArray(programTitles);
-
-export const getChannelImageUrl = () => getRandomItemFromArray(channelLogos).default;
-
-export const getProgramImageUrl = () => (
-    `https://picsum.photos/${MOCK_IMAGE_WIDTH}/${MOCK_IMAGE_HEIGHT}?time=${new Date().getTime()}`
-);
+import { MOCK_IMAGE_WIDTH, MOCK_IMAGE_HEIGHT } from './config';
+import { channelLogos, programTitles, synopsisVariants } from './mocks/data';
+
+export const getRandomItemFromArray = <T>(array: Array<T>): T => (
+    array[Math.floor(Math.random() * array.length)]
+);
+
+export const shuffleArray = <T>(array: T[]): T[] => {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * array.length);
+        const temp = array[i];
+        array[i] = array[j];
+        array[j] = temp;
+    }
+    return array;
+};
+
+export const randomFromRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+export const getSynopsis = () => getRandomItemFromArray(synopsisVariants);
+
+export const getProgramName = () => getRandomItemFromArray(programTitles);
+
+export const getChannelImageUrl = () => getRandomItemFromArray(channelLogos).default;
+
+export const getProgramImageUrl = () => (
+    `https://picsum.photos/${MOCK_IMAGE_WIDTH}/${MOCK_IMAGE_HEIGHT}?time=${new Date().getTime()}`
+);

package/packages/epg/src/v2/MouseNavigation/MouseNavigation.tsx

@@ -1,88 +1,88 @@
-import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
-import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
-import {
-    EpgMouseNavigationProps as Props,
-    EpgMouseNavigation as IEpgMouseNavigation,
-    MouseArrowDirection,
-} from '../interface';
-
-export class EpgMouseNavigation extends Component<Props> implements IEpgMouseNavigation {
-    private readonly div = createRef<HTMLDivElement>();
-
-    private readonly horizontal = createRef<MouseNavigation>();
-
-    private readonly vertical = createRef<MouseNavigation>();
-
-    private directionEnabledState: Record<MouseArrowDirection, boolean> = {
-        up: true,
-        down: true,
-        left: true,
-        right: true,
-    };
-
-    private getNavigationByDirection(direction: MouseArrowDirection) {
-        switch (direction) {
-            case 'up':
-            case 'down':
-                return this.vertical;
-            case 'left':
-            case 'right':
-                return this.horizontal;
-            default: return null;
-        }
-    }
-
-    private setDirectionEnabledState(direction: MouseArrowDirection, state: boolean) {
-        this.directionEnabledState[direction] = state;
-        const navigation = this.getNavigationByDirection(direction);
-        navigation?.current!.handleArrowState();
-    }
-
-    private readonly shouldShowUp = () => this.directionEnabledState.up;
-
-    private readonly shouldShowDown = () => this.directionEnabledState.down;
-
-    private readonly shouldShowLeft = () => this.directionEnabledState.left;
-
-    private readonly shouldShowRight = () => this.directionEnabledState.right;
-
-    enableDirection(direction: MouseArrowDirection) {
-        if (this.directionEnabledState[direction] === true) return;
-        this.setDirectionEnabledState(direction, true);
-    }
-
-    disableDirection(direction: MouseArrowDirection) {
-        if (this.directionEnabledState[direction] === false) return;
-        this.setDirectionEnabledState(direction, false);
-    }
-
-    render() {
-        const { onUp, onDown, onLeft, onRight } = this.props;
-        return (
-            <div ref={this.div} className="mouse-navigation">
-                <MouseNavigation
-                    ref={this.vertical}
-                    getMountingPoint={() => this.div}
-                    direction="vertical"
-                    forward={onDown}
-                    backward={onUp}
-                    shouldShowMrcuForward={this.shouldShowDown}
-                    shouldShowMrcuBackward={this.shouldShowUp}
-                >
-                    {null as unknown as JSX.Element}
-                </MouseNavigation>
-                <MouseNavigation
-                    ref={this.horizontal}
-                    getMountingPoint={() => this.div}
-                    direction="horizontal"
-                    forward={onRight}
-                    backward={onLeft}
-                    shouldShowMrcuForward={this.shouldShowRight}
-                    shouldShowMrcuBackward={this.shouldShowLeft}
-                >
-                    {null as unknown as JSX.Element}
-                </MouseNavigation>
-            </div>
-        );
-    }
-}
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
+import {
+    EpgMouseNavigationProps as Props,
+    EpgMouseNavigation as IEpgMouseNavigation,
+    MouseArrowDirection,
+} from '../interface';
+
+export class EpgMouseNavigation extends Component<Props> implements IEpgMouseNavigation {
+    private readonly div = createRef<HTMLDivElement>();
+
+    private readonly horizontal = createRef<MouseNavigation>();
+
+    private readonly vertical = createRef<MouseNavigation>();
+
+    private directionEnabledState: Record<MouseArrowDirection, boolean> = {
+        up: true,
+        down: true,
+        left: true,
+        right: true,
+    };
+
+    private getNavigationByDirection(direction: MouseArrowDirection) {
+        switch (direction) {
+            case 'up':
+            case 'down':
+                return this.vertical;
+            case 'left':
+            case 'right':
+                return this.horizontal;
+            default: return null;
+        }
+    }
+
+    private setDirectionEnabledState(direction: MouseArrowDirection, state: boolean) {
+        this.directionEnabledState[direction] = state;
+        const navigation = this.getNavigationByDirection(direction);
+        navigation?.current!.handleArrowState();
+    }
+
+    private readonly shouldShowUp = () => this.directionEnabledState.up;
+
+    private readonly shouldShowDown = () => this.directionEnabledState.down;
+
+    private readonly shouldShowLeft = () => this.directionEnabledState.left;
+
+    private readonly shouldShowRight = () => this.directionEnabledState.right;
+
+    enableDirection(direction: MouseArrowDirection) {
+        if (this.directionEnabledState[direction] === true) return;
+        this.setDirectionEnabledState(direction, true);
+    }
+
+    disableDirection(direction: MouseArrowDirection) {
+        if (this.directionEnabledState[direction] === false) return;
+        this.setDirectionEnabledState(direction, false);
+    }
+
+    render() {
+        const { onUp, onDown, onLeft, onRight } = this.props;
+        return (
+            <div ref={this.div} className="mouse-navigation">
+                <MouseNavigation
+                    ref={this.vertical}
+                    getMountingPoint={() => this.div}
+                    direction="vertical"
+                    forward={onDown}
+                    backward={onUp}
+                    shouldShowMrcuForward={this.shouldShowDown}
+                    shouldShowMrcuBackward={this.shouldShowUp}
+                >
+                    {null as unknown as JSX.Element}
+                </MouseNavigation>
+                <MouseNavigation
+                    ref={this.horizontal}
+                    getMountingPoint={() => this.div}
+                    direction="horizontal"
+                    forward={onRight}
+                    backward={onLeft}
+                    shouldShowMrcuForward={this.shouldShowRight}
+                    shouldShowMrcuBackward={this.shouldShowLeft}
+                >
+                    {null as unknown as JSX.Element}
+                </MouseNavigation>
+            </div>
+        );
+    }
+}

package/packages/epg/src/v2/MouseNavigation/MouseNavigationFallback.ts

@@ -1,4 +1,4 @@
-import { EpgMouseNavigationProps as Props } from '../interface';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const EpgMouseNavigation = (props: Props) => false as unknown as JSX.Element;
+import { EpgMouseNavigationProps as Props } from '../interface';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const EpgMouseNavigation = (props: Props) => false as unknown as JSX.Element;

package/packages/epg/src/v2/MouseNavigation/index.tizen.tv.ts

@@ -1 +1 @@
-export { EpgMouseNavigation } from './MouseNavigation';
+export { EpgMouseNavigation } from './MouseNavigation';

package/packages/epg/src/v2/MouseNavigation/index.ts

@@ -1 +1 @@
-export { EpgMouseNavigation } from './MouseNavigationFallback';
+export { EpgMouseNavigation } from './MouseNavigationFallback';

package/packages/epg/src/v2/MouseNavigation/index.web.ts

@@ -1 +1 @@
-export { EpgMouseNavigation } from './MouseNavigation';
+export { EpgMouseNavigation } from './MouseNavigation';

package/packages/epg/src/v2/MouseNavigation/index.webos.tv.ts

@@ -1 +1 @@
-export { EpgMouseNavigation } from './MouseNavigation';
+export { EpgMouseNavigation } from './MouseNavigation';

package/packages/epg/src/v2/NowLine.tsx

@@ -1,66 +1,66 @@
-import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
-import { getDisplayToggler, offsetPosition } from '@24i/bigscreen-sdk/utils';
-import {
-    NowLineProps as Props,
-    NowLine as INowLine,
-    NowLineHeader,
-} from './interface';
-
-export class NowLine extends Component<Props> implements INowLine {
-    div = createRef<HTMLDivElement>();
-
-    header = createRef<NowLineHeader>();
-
-    displayToggler = getDisplayToggler(this.div, false);
-
-    lastX = NaN;
-
-    /* eslint-disable react/destructuring-assignment */
-    timestamp = this.props.timestamp;
-
-    time = this.props.time;
-    /* eslint-enable react/destructuring-assignment */
-
-    componentDidMount() {
-        this.time.addEventListener('onsecond', this.setNowLinePosition);
-        this.setNowLinePosition(this.time.getCurrentTime());
-    }
-
-    componentWillUnmount() {
-        this.time.removeEventListener('onsecond', this.setNowLinePosition);
-    }
-
-    private readonly setNowLinePosition = (currentTime: number) => {
-        const { timelineWidthPx, channelHeaderWidthPx, pixelInMs } = this.props;
-        const halfTimelineWidthPx = timelineWidthPx / 2;
-        const leftEdgeMs = this.timestamp - halfTimelineWidthPx * pixelInMs;
-        const rightEdgeMs = this.timestamp + halfTimelineWidthPx * pixelInMs;
-        if (currentTime < leftEdgeMs || currentTime > rightEdgeMs) {
-            this.displayToggler.hide();
-            return;
-        }
-        const msFromLeftEdge = currentTime - leftEdgeMs;
-        this.displayToggler.show();
-        const x = Math.round(msFromLeftEdge / pixelInMs + channelHeaderWidthPx);
-        if (x !== this.lastX) {
-            this.lastX = x;
-            offsetPosition(this.div, { x });
-        }
-        this.header.current?.updateData(currentTime);
-    };
-
-    scrollToTimestamp(timestamp: number) {
-        this.timestamp = timestamp;
-        this.setNowLinePosition(this.time.getCurrentTime());
-    }
-
-    render() {
-        const { renderNowLineHeader, time } = this.props;
-        const timestamp = time.getCurrentTime();
-        return (
-            <div ref={this.div} className="epg-now-line">
-                {renderNowLineHeader && renderNowLineHeader(timestamp, this.header)}
-            </div>
-        );
-    }
-}
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { getDisplayToggler, offsetPosition } from '@24i/bigscreen-sdk/utils';
+import {
+    NowLineProps as Props,
+    NowLine as INowLine,
+    NowLineHeader,
+} from './interface';
+
+export class NowLine extends Component<Props> implements INowLine {
+    div = createRef<HTMLDivElement>();
+
+    header = createRef<NowLineHeader>();
+
+    displayToggler = getDisplayToggler(this.div, false);
+
+    lastX = NaN;
+
+    /* eslint-disable react/destructuring-assignment */
+    timestamp = this.props.timestamp;
+
+    time = this.props.time;
+    /* eslint-enable react/destructuring-assignment */
+
+    componentDidMount() {
+        this.time.addEventListener('onsecond', this.setNowLinePosition);
+        this.setNowLinePosition(this.time.getCurrentTime());
+    }
+
+    componentWillUnmount() {
+        this.time.removeEventListener('onsecond', this.setNowLinePosition);
+    }
+
+    private readonly setNowLinePosition = (currentTime: number) => {
+        const { timelineWidthPx, channelHeaderWidthPx, pixelInMs } = this.props;
+        const halfTimelineWidthPx = timelineWidthPx / 2;
+        const leftEdgeMs = this.timestamp - halfTimelineWidthPx * pixelInMs;
+        const rightEdgeMs = this.timestamp + halfTimelineWidthPx * pixelInMs;
+        if (currentTime < leftEdgeMs || currentTime > rightEdgeMs) {
+            this.displayToggler.hide();
+            return;
+        }
+        const msFromLeftEdge = currentTime - leftEdgeMs;
+        this.displayToggler.show();
+        const x = Math.round(msFromLeftEdge / pixelInMs + channelHeaderWidthPx);
+        if (x !== this.lastX) {
+            this.lastX = x;
+            offsetPosition(this.div, { x });
+        }
+        this.header.current?.updateData(currentTime);
+    };
+
+    scrollToTimestamp(timestamp: number) {
+        this.timestamp = timestamp;
+        this.setNowLinePosition(this.time.getCurrentTime());
+    }
+
+    render() {
+        const { renderNowLineHeader, time } = this.props;
+        const timestamp = time.getCurrentTime();
+        return (
+            <div ref={this.div} className="epg-now-line">
+                {renderNowLineHeader && renderNowLineHeader(timestamp, this.header)}
+            </div>
+        );
+    }
+}

package/packages/epg/src/v2/Program.tsx

@@ -1,58 +1,58 @@
-import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
-import { t } from '@24i/bigscreen-sdk/i18n';
-import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
-import { Asset } from '@24i/smartapps-datalayer/models';
-import { getXOffsetStyleObject } from './utils';
-import { ProgramProps as Props, Program as IProgram, ProgramTextMode } from './interface';
-
-const getName = (data: Asset, textMode: ProgramTextMode) => {
-    switch (textMode) {
-        case 'ellipsis_only': return '…';
-        case 'empty': return '';
-        default: return data.name;
-    }
-};
-
-export class Program extends Component<Props> implements IProgram {
-    div = createRef<HTMLDivElement>();
-
-    /* eslint-disable react/destructuring-assignment */
-    widthPx = this.props.widthPx;
-
-    xOffsetPx = this.props.xOffsetPx;
-    /* eslint-enable react/destructuring-assignment */
-
-    setOffset(offset: number) {
-        if (offset === this.xOffsetPx) return;
-        this.xOffsetPx = offset;
-        offsetPosition(this.div, { x: offset });
-    }
-
-    setWidth(width: number) {
-        if (width === this.widthPx) return;
-        this.widthPx = width;
-        this.div.current!.style.width = `${width}px`;
-    }
-
-    updateData(data: Asset, textMode: ProgramTextMode) {
-        setText(this.div, getName(data, textMode));
-    }
-
-    render() {
-        const { data, widthPx, xOffsetPx, textMode } = this.props;
-        const name = data ? getName(data, textMode) : t('common.status.loading');
-        return (
-            <div
-                ref={this.div}
-                dir="auto"
-                className="epg-program-name"
-                style={{
-                    width: `${widthPx}px`,
-                    ...getXOffsetStyleObject(xOffsetPx),
-                }}
-            >
-                {name}
-            </div>
-        );
-    }
-}
+import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { t } from '@24i/bigscreen-sdk/i18n';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { getXOffsetStyleObject } from './utils';
+import { ProgramProps as Props, Program as IProgram, ProgramTextMode } from './interface';
+
+const getName = (data: Asset, textMode: ProgramTextMode) => {
+    switch (textMode) {
+        case 'ellipsis_only': return '…';
+        case 'empty': return '';
+        default: return data.name;
+    }
+};
+
+export class Program extends Component<Props> implements IProgram {
+    div = createRef<HTMLDivElement>();
+
+    /* eslint-disable react/destructuring-assignment */
+    widthPx = this.props.widthPx;
+
+    xOffsetPx = this.props.xOffsetPx;
+    /* eslint-enable react/destructuring-assignment */
+
+    setOffset(offset: number) {
+        if (offset === this.xOffsetPx) return;
+        this.xOffsetPx = offset;
+        offsetPosition(this.div, { x: offset });
+    }
+
+    setWidth(width: number) {
+        if (width === this.widthPx) return;
+        this.widthPx = width;
+        this.div.current!.style.width = `${width}px`;
+    }
+
+    updateData(data: Asset, textMode: ProgramTextMode) {
+        setText(this.div, getName(data, textMode));
+    }
+
+    render() {
+        const { data, widthPx, xOffsetPx, textMode } = this.props;
+        const name = data ? getName(data, textMode) : t('common.status.loading');
+        return (
+            <div
+                ref={this.div}
+                dir="auto"
+                className="epg-program-name"
+                style={{
+                    width: `${widthPx}px`,
+                    ...getXOffsetStyleObject(xOffsetPx),
+                }}
+            >
+                {name}
+            </div>
+        );
+    }
+}

package/packages/epg/src/v2/ProgramInfo/ProgramInfo.scss

@@ -1,67 +1,67 @@
-.program-info {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: $program-info-width;
-    height: $program-info-height;
-    background-color: #1f1f1f;
-    z-index: 1;
-
-    &.visible {
-        display: block;
-    }
-
-    .cover-image {
-        display: inline-block;
-        background-size: contain;
-        width: $cover-image-width;
-        height: $cover-image-height;
-        opacity: 0;
-
-        .gradient {
-            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(31, 31, 31, 1) 100%);
-            width: 100%;
-            height: 100%;
-        }
-
-        &.loaded {
-            opacity: 1;
-        }
-    }
-
-    .info-wrapper {
-        display: inline-block;
-        box-sizing: border-box;
-        vertical-align: top;
-        width: $program-info-width - $cover-image-width;
-        padding-left: $info-wrapper-padding-left;
-        padding-right: $info-wrapper-padding-right;
-        padding-top: $info-wrapper-padding-top;
-
-        .title {
-            @include truncate-with-ellipsis;
-            width: 100%;
-            font-size: $info-wrapper-title-font-size;
-            height: $info-wrapper-title-height;
-            font-weight: bold;
-        }
-    
-        .broadcast-time {
-            font-size: $info-wrapper-broadcast-font-size;
-            margin-top: $info-wrapper-broadcast-margin-top;
-        }
-    
-        .subtitle {
-            @include truncate-with-ellipsis;
-            width: 100%;
-            font-size: $info-wrapper-subtitle-font-size;
-            margin-top: $info-wrapper-subtitle-margin-top;
-        }
-    
-        .description {
-            font-size: $info-wrapper-description-font-size;
-            width: $info-wrapper-description-width;
-            margin-top: $info-wrapper-description-margin-top;
-        }
-    }
-}
+.program-info {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: $program-info-width;
+    height: $program-info-height;
+    background-color: #1f1f1f;
+    z-index: 1;
+
+    &.visible {
+        display: block;
+    }
+
+    .cover-image {
+        display: inline-block;
+        background-size: contain;
+        width: $cover-image-width;
+        height: $cover-image-height;
+        opacity: 0;
+
+        .gradient {
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(31, 31, 31, 1) 100%);
+            width: 100%;
+            height: 100%;
+        }
+
+        &.loaded {
+            opacity: 1;
+        }
+    }
+
+    .info-wrapper {
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: top;
+        width: $program-info-width - $cover-image-width;
+        padding-left: $info-wrapper-padding-left;
+        padding-right: $info-wrapper-padding-right;
+        padding-top: $info-wrapper-padding-top;
+
+        .title {
+            @include truncate-with-ellipsis;
+            width: 100%;
+            font-size: $info-wrapper-title-font-size;
+            height: $info-wrapper-title-height;
+            font-weight: bold;
+        }
+    
+        .broadcast-time {
+            font-size: $info-wrapper-broadcast-font-size;
+            margin-top: $info-wrapper-broadcast-margin-top;
+        }
+    
+        .subtitle {
+            @include truncate-with-ellipsis;
+            width: 100%;
+            font-size: $info-wrapper-subtitle-font-size;
+            margin-top: $info-wrapper-subtitle-margin-top;
+        }
+    
+        .description {
+            font-size: $info-wrapper-description-font-size;
+            width: $info-wrapper-description-width;
+            margin-top: $info-wrapper-description-margin-top;
+        }
+    }
+}

package/packages/epg/src/v2/ProgramInfo/ProgramInfo.styles.1080.scss

@@ -1,3 +1,3 @@
-@import './mixins';
-@import './sizes.1080';
-@import './ProgramInfo';
+@import './mixins';
+@import './sizes.1080';
+@import './ProgramInfo';

package/packages/epg/src/v2/ProgramInfo/ProgramInfo.styles.animated.1080.scss

@@ -1,2 +1,2 @@
-@import './ProgramInfo.styles.1080';
-@import './animated';
+@import './ProgramInfo.styles.1080';
+@import './animated';