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

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

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

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

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

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

@@ -1,149 +1,149 @@
-import { createRef, Component, setText, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { AsyncImage } from '@24i/bigscreen-sdk/async-image';
-import {
-    getDisplayToggler,
-    DISPLAY_NONE,
-    IDisplayToggler,
-} from '@24i/bigscreen-sdk/utils/displayToggler';
-import { scaledImage } from '@24i/bigscreen-sdk/utils/scaledImage';
-import { debounce, DebounceResult } from '@24i/bigscreen-sdk/utils/debounce';
-import { Asset, UIElementType, Image } from '@24i/smartapps-datalayer/models';
-import { i18n } from '@24i/bigscreen-sdk/i18n';
-import { find } from '@24i/bigscreen-sdk/perf-utils/array';
-import { Epg, Plugin } from '../interface';
-import { cutString, getTitle, getSubtitle, getBroadcastTime } from './utils';
-import { COVER_IMAGE_SIZES } from './sizes';
-
-const DEFAULT_DEBOUNCE_TIME_MS = 700;
-const DEFAULT_DESCRIPTION_MAX_LENGTH = 150;
-
-type Props = {
-    epg: Epg<any, any, any, any>,
-    descriptionMaxLength?: number,
-    debounceMs?: number,
-};
-
-export class ProgramInfo extends Component<Props> implements Plugin {
-    private readonly div = createRef<HTMLDivElement>();
-
-    private readonly coverImage = createRef<AsyncImage>();
-
-    private readonly title = createRef<HTMLDivElement>();
-
-    private readonly subtitle = createRef<HTMLDivElement>();
-
-    private readonly broadcastTime = createRef<HTMLDivElement>();
-
-    private readonly description = createRef<HTMLDivElement>();
-
-    private currentChannel: Asset | null = null;
-
-    private isLoading = false;
-
-    private readonly displayToggler = getDisplayToggler(this.div, true);
-
-    private coverImageDisplayToggler: IDisplayToggler | null = null;
-
-    private readonly subtitleDisplayToggler = getDisplayToggler(this.subtitle, false);
-
-    private readonly broadcastTimeDisplayToggler = getDisplayToggler(this.broadcastTime, false);
-
-    private readonly descriptionDisplayToggler = getDisplayToggler(this.description, false);
-
-    private readonly showProgramWithDebounce = debounce((model: Asset) => {
-        this.showProgram(model);
-    // eslint-disable-next-line react/destructuring-assignment
-    }, this.props.debounceMs);
-
-    private debouncedShow: DebounceResult | null = null;
-
-    static defaultProps = {
-        descriptionMaxLength: DEFAULT_DESCRIPTION_MAX_LENGTH,
-        debounceMs: DEFAULT_DEBOUNCE_TIME_MS,
-    };
-
-    declare props: DeclareProps<Props, typeof ProgramInfo.defaultProps>;
-
-    componentDidMount() {
-        this.coverImageDisplayToggler = getDisplayToggler(this.coverImage.current!.domRef, false);
-    }
-
-    onFocusChange(data: Asset | undefined, channel: Asset) {
-        if (data) this.show(data, channel);
-        else this.hide();
-    }
-
-    onFastVerticalScrollingStart() {
-        this.hide();
-    }
-
-    private setCoverImage(program: Asset) {
-        if (!program.uiElements) return;
-        const image = find(program.uiElements, ({ type }) => (
-            type === UIElementType.IMAGE
-        )) as Image | null;
-        if (image && image.url) {
-            this.coverImage.current!.updateImage(scaledImage(image.url, COVER_IMAGE_SIZES));
-        }
-    }
-
-    private showProgram(program: Asset) {
-        this.debouncedShow = null;
-        const { descriptionMaxLength, epg } = this.props;
-        if (epg.isVerticallyFastScrolling()) return;
-        this.isLoading = false;
-        this.setCoverImage(program);
-        this.coverImageDisplayToggler!.show();
-        setText(this.title, getTitle(program));
-        setText(this.subtitle, getSubtitle(program));
-        this.subtitleDisplayToggler.show();
-        setText(this.broadcastTime, getBroadcastTime(program));
-        this.broadcastTimeDisplayToggler.show();
-        setText(this.description, cutString(
-            (program as any).description ?? '', descriptionMaxLength,
-        ));
-        this.descriptionDisplayToggler.show();
-        this.displayToggler.show();
-    }
-
-    private showLoading() {
-        if (this.isLoading) return;
-        this.isLoading = true;
-        this.coverImageDisplayToggler!.hide();
-        this.subtitleDisplayToggler.hide();
-        this.broadcastTimeDisplayToggler.hide();
-        this.descriptionDisplayToggler.hide();
-        setText(this.title, i18n.t('common.status.loading'));
-    }
-
-    private show(program: Asset, channel: Asset) {
-        const { epg } = this.props;
-        if (this.currentChannel !== channel && epg.isVerticallyFastScrolling()) {
-            this.hide();
-            this.currentChannel = channel;
-        }
-        this.showLoading();
-        this.debouncedShow = this.showProgramWithDebounce(program);
-    }
-
-    private hide() {
-        if (this.debouncedShow) this.debouncedShow.cancel();
-        this.displayToggler.hide();
-    }
-
-    render() {
-        return (
-            <div className={`program-info ${DISPLAY_NONE}`} ref={this.div}>
-                <AsyncImage src="" className="cover-image" ref={this.coverImage}>
-                    <div className="gradient" />
-                </AsyncImage>
-                <div className="info-wrapper">
-                    <div className="title" ref={this.title} />
-                    <div dir="ltr" className="broadcast-time" ref={this.broadcastTime} />
-                    <div className="subtitle" ref={this.subtitle} />
-                    <div className="description" ref={this.description} />
-                </div>
-            </div>
-        );
-    }
-}
+import { createRef, Component, setText, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { AsyncImage } from '@24i/bigscreen-sdk/async-image';
+import {
+    getDisplayToggler,
+    DISPLAY_NONE,
+    IDisplayToggler,
+} from '@24i/bigscreen-sdk/utils/displayToggler';
+import { scaledImage } from '@24i/bigscreen-sdk/utils/scaledImage';
+import { debounce, DebounceResult } from '@24i/bigscreen-sdk/utils/debounce';
+import { Asset, UIElementType, Image } from '@24i/smartapps-datalayer/models';
+import { i18n } from '@24i/bigscreen-sdk/i18n';
+import { find } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Epg, Plugin } from '../interface';
+import { cutString, getTitle, getSubtitle, getBroadcastTime } from './utils';
+import { COVER_IMAGE_SIZES } from './sizes';
+
+const DEFAULT_DEBOUNCE_TIME_MS = 700;
+const DEFAULT_DESCRIPTION_MAX_LENGTH = 150;
+
+type Props = {
+    epg: Epg<any, any, any, any>,
+    descriptionMaxLength?: number,
+    debounceMs?: number,
+};
+
+export class ProgramInfo extends Component<Props> implements Plugin {
+    private readonly div = createRef<HTMLDivElement>();
+
+    private readonly coverImage = createRef<AsyncImage>();
+
+    private readonly title = createRef<HTMLDivElement>();
+
+    private readonly subtitle = createRef<HTMLDivElement>();
+
+    private readonly broadcastTime = createRef<HTMLDivElement>();
+
+    private readonly description = createRef<HTMLDivElement>();
+
+    private currentChannel: Asset | null = null;
+
+    private isLoading = false;
+
+    private readonly displayToggler = getDisplayToggler(this.div, true);
+
+    private coverImageDisplayToggler: IDisplayToggler | null = null;
+
+    private readonly subtitleDisplayToggler = getDisplayToggler(this.subtitle, false);
+
+    private readonly broadcastTimeDisplayToggler = getDisplayToggler(this.broadcastTime, false);
+
+    private readonly descriptionDisplayToggler = getDisplayToggler(this.description, false);
+
+    private readonly showProgramWithDebounce = debounce((model: Asset) => {
+        this.showProgram(model);
+    // eslint-disable-next-line react/destructuring-assignment
+    }, this.props.debounceMs);
+
+    private debouncedShow: DebounceResult | null = null;
+
+    static defaultProps = {
+        descriptionMaxLength: DEFAULT_DESCRIPTION_MAX_LENGTH,
+        debounceMs: DEFAULT_DEBOUNCE_TIME_MS,
+    };
+
+    declare props: DeclareProps<Props, typeof ProgramInfo.defaultProps>;
+
+    componentDidMount() {
+        this.coverImageDisplayToggler = getDisplayToggler(this.coverImage.current!.domRef, false);
+    }
+
+    onFocusChange(data: Asset | undefined, channel: Asset) {
+        if (data) this.show(data, channel);
+        else this.hide();
+    }
+
+    onFastVerticalScrollingStart() {
+        this.hide();
+    }
+
+    private setCoverImage(program: Asset) {
+        if (!program.uiElements) return;
+        const image = find(program.uiElements, ({ type }) => (
+            type === UIElementType.IMAGE
+        )) as Image | null;
+        if (image && image.url) {
+            this.coverImage.current!.updateImage(scaledImage(image.url, COVER_IMAGE_SIZES));
+        }
+    }
+
+    private showProgram(program: Asset) {
+        this.debouncedShow = null;
+        const { descriptionMaxLength, epg } = this.props;
+        if (epg.isVerticallyFastScrolling()) return;
+        this.isLoading = false;
+        this.setCoverImage(program);
+        this.coverImageDisplayToggler!.show();
+        setText(this.title, getTitle(program));
+        setText(this.subtitle, getSubtitle(program));
+        this.subtitleDisplayToggler.show();
+        setText(this.broadcastTime, getBroadcastTime(program));
+        this.broadcastTimeDisplayToggler.show();
+        setText(this.description, cutString(
+            (program as any).description ?? '', descriptionMaxLength,
+        ));
+        this.descriptionDisplayToggler.show();
+        this.displayToggler.show();
+    }
+
+    private showLoading() {
+        if (this.isLoading) return;
+        this.isLoading = true;
+        this.coverImageDisplayToggler!.hide();
+        this.subtitleDisplayToggler.hide();
+        this.broadcastTimeDisplayToggler.hide();
+        this.descriptionDisplayToggler.hide();
+        setText(this.title, i18n.t('common.status.loading'));
+    }
+
+    private show(program: Asset, channel: Asset) {
+        const { epg } = this.props;
+        if (this.currentChannel !== channel && epg.isVerticallyFastScrolling()) {
+            this.hide();
+            this.currentChannel = channel;
+        }
+        this.showLoading();
+        this.debouncedShow = this.showProgramWithDebounce(program);
+    }
+
+    private hide() {
+        if (this.debouncedShow) this.debouncedShow.cancel();
+        this.displayToggler.hide();
+    }
+
+    render() {
+        return (
+            <div className={`program-info ${DISPLAY_NONE}`} ref={this.div}>
+                <AsyncImage src="" className="cover-image" ref={this.coverImage}>
+                    <div className="gradient" />
+                </AsyncImage>
+                <div className="info-wrapper">
+                    <div className="title" ref={this.title} />
+                    <div dir="ltr" className="broadcast-time" ref={this.broadcastTime} />
+                    <div className="subtitle" ref={this.subtitle} />
+                    <div className="description" ref={this.description} />
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -1,8 +1,8 @@
-.program-info {
-    .cover-image {
-        &.loaded {
-            transition: opacity 300ms;
-            opacity: 1;
-        }
-    }
-}
+.program-info {
+    .cover-image {
+        &.loaded {
+            transition: opacity 300ms;
+            opacity: 1;
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
-@mixin truncate-with-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+@mixin truncate-with-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

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

@@ -1,21 +1,21 @@
-$program-info-width: 1920px;
-$program-info-height: 343px;
-$cover-image-width: 610px;
-$cover-image-height: 343px;
-
-$info-wrapper-padding-left: 34px;
-$info-wrapper-padding-right: 34px;
-$info-wrapper-padding-top: 32px;
-
-$info-wrapper-title-font-size: 48px;
-$info-wrapper-title-height: 63px;
-
-$info-wrapper-broadcast-font-size: 24px;
-$info-wrapper-broadcast-margin-top: 8px;
-
-$info-wrapper-subtitle-font-size: 24px;
-$info-wrapper-subtitle-margin-top: 12px;
-
-$info-wrapper-description-font-size: 27px;
-$info-wrapper-description-width: 709px;
-$info-wrapper-description-margin-top: 12px;
+$program-info-width: 1920px;
+$program-info-height: 343px;
+$cover-image-width: 610px;
+$cover-image-height: 343px;
+
+$info-wrapper-padding-left: 34px;
+$info-wrapper-padding-right: 34px;
+$info-wrapper-padding-top: 32px;
+
+$info-wrapper-title-font-size: 48px;
+$info-wrapper-title-height: 63px;
+
+$info-wrapper-broadcast-font-size: 24px;
+$info-wrapper-broadcast-margin-top: 8px;
+
+$info-wrapper-subtitle-font-size: 24px;
+$info-wrapper-subtitle-margin-top: 12px;
+
+$info-wrapper-description-font-size: 27px;
+$info-wrapper-description-width: 709px;
+$info-wrapper-description-margin-top: 12px;

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

@@ -1,21 +1,21 @@
-$program-info-width: 1280px;
-$program-info-height: 228px;
-$cover-image-width: 406px;
-$cover-image-height: 228px;
-
-$info-wrapper-padding-left: 22px;
-$info-wrapper-padding-right: 22px;
-$info-wrapper-padding-top: 21px;
-
-$info-wrapper-title-font-size: 32px;
-$info-wrapper-title-height: 42px;
-
-$info-wrapper-broadcast-font-size: 16px;
-$info-wrapper-broadcast-margin-top: 5px;
-
-$info-wrapper-subtitle-font-size: 16px;
-$info-wrapper-subtitle-margin-top: 8px;
-
-$info-wrapper-description-font-size: 18px;
-$info-wrapper-description-width: 473px;
-$info-wrapper-description-margin-top: 8px;
+$program-info-width: 1280px;
+$program-info-height: 228px;
+$cover-image-width: 406px;
+$cover-image-height: 228px;
+
+$info-wrapper-padding-left: 22px;
+$info-wrapper-padding-right: 22px;
+$info-wrapper-padding-top: 21px;
+
+$info-wrapper-title-font-size: 32px;
+$info-wrapper-title-height: 42px;
+
+$info-wrapper-broadcast-font-size: 16px;
+$info-wrapper-broadcast-margin-top: 5px;
+
+$info-wrapper-subtitle-font-size: 16px;
+$info-wrapper-subtitle-margin-top: 8px;
+
+$info-wrapper-description-font-size: 18px;
+$info-wrapper-description-width: 473px;
+$info-wrapper-description-margin-top: 8px;

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

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

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

@@ -1,7 +1,7 @@
-[dir=rtl] .program-info {
-    .info-wrapper {
-        .broadcast-time {
-            text-align: right;
-        }
-    }
-}
+[dir=rtl] .program-info {
+    .info-wrapper {
+        .broadcast-time {
+            text-align: right;
+        }
+    }
+}

package/packages/epg/src/v2/ProgramInfo/sizes.1080.ts

@@ -1,3 +1,3 @@
-export const COVER_IMAGE_SIZES = {
-    width: 610, height: 343,
-};
+export const COVER_IMAGE_SIZES = {
+    width: 610, height: 343,
+};

package/packages/epg/src/v2/ProgramInfo/sizes.ts

@@ -1,3 +1,3 @@
-export const COVER_IMAGE_SIZES = {
-    width: 406, height: 228,
-};
+export const COVER_IMAGE_SIZES = {
+    width: 406, height: 228,
+};

package/packages/epg/src/v2/ProgramInfo/styles.ts

@@ -1 +1 @@
-import './ProgramInfo.styles';
+import './ProgramInfo.styles';

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

@@ -1,28 +1,28 @@
-import { l10n } from '@24i/bigscreen-sdk/l10n';
-import { time } from '@24i/bigscreen-sdk/time';
-import { Asset } from '@24i/smartapps-datalayer/models';
-
-export const cutString = (string: string, length: number) => {
-    if (Number.isNaN(length) || length <= 0 || string.length <= length) return string;
-    const shortened = string.substring(0, length);
-    return `${shortened}...`;
-};
-
-export const getTitle = (asset: Asset) => asset.name; // TODO: might need something for series name?
-
-export const getSubtitle = (asset: Asset) => (
-    asset.number
-        // TODO: SxEy - might need series data?
-        ? `Episode #${asset.number} — ${asset.name}`
-        : ''
-);
-
-const toLocaleTimeString = (timestamp: number) => l10n
-    .date(timestamp + time.getTimezoneOffsetMs())
-    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
-
-export const getBroadcastTime = (asset: Asset) => {
-    const start = toLocaleTimeString(asset.program!.startTime);
-    const end = toLocaleTimeString(asset.program!.endTime);
-    return `${start} — ${end}`;
-};
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+import { time } from '@24i/bigscreen-sdk/time';
+import { Asset } from '@24i/smartapps-datalayer/models';
+
+export const cutString = (string: string, length: number) => {
+    if (Number.isNaN(length) || length <= 0 || string.length <= length) return string;
+    const shortened = string.substring(0, length);
+    return `${shortened}...`;
+};
+
+export const getTitle = (asset: Asset) => asset.name; // TODO: might need something for series name?
+
+export const getSubtitle = (asset: Asset) => (
+    asset.number
+        // TODO: SxEy - might need series data?
+        ? `Episode #${asset.number} — ${asset.name}`
+        : ''
+);
+
+const toLocaleTimeString = (timestamp: number) => l10n
+    .date(timestamp + time.getTimezoneOffsetMs())
+    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
+
+export const getBroadcastTime = (asset: Asset) => {
+    const start = toLocaleTimeString(asset.program!.startTime);
+    const end = toLocaleTimeString(asset.program!.endTime);
+    return `${start} — ${end}`;
+};