@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.scss

@@ -0,0 +1,107 @@
+@mixin mask-svg-icon($icon-url) {
+    -webkit-mask-image: url($icon-url);
+    -webkit-mask-size: $checkmark-size;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: url($icon-url);
+    mask-size: $checkmark-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.environment-selection {
+    font-family: sans-serif;
+    text-align: center;
+
+    .development-stripe {
+        background-image: url('../assets/development-stripe.png');
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: $height;
+        width: $development-stripe-width;
+        z-index: 9100;
+
+        .environment-config-name {
+            position: relative;
+            top: $environment-config-name-top;
+            box-sizing: border-box;
+            display: inline-block;
+            background-color: #ef9e00;
+            border-top-right-radius: $environment-config-name-border-radius;
+            border-bottom-right-radius: $environment-config-name-border-radius;
+            text-transform: uppercase;
+            color: #000;
+            text-align: right;
+            font-size: $environment-config-name-font-size;
+            font-weight: 400;
+            padding-left: $environment-config-name-padding-left;
+            padding-right: $environment-config-name-padding-right;
+            line-height: $environment-config-name-height;
+            height: $environment-config-name-height;
+        }
+    }
+
+    .environment-list-overlay {
+        position: absolute;
+        background-color: #1f1f1f;
+        top: 0;
+        left: 0;
+        height: $height;
+        width: $width;
+        z-index: 9000;
+    } 
+    
+    .environment-list {
+        display: inline-block;
+        outline: none;
+        text-align: left;
+        width: $environment-list-width;
+
+        .scroll-content {
+            position: relative;
+        }
+
+        .environment-list-item {
+            position: relative;
+            display: inline-block;
+            outline: none;
+            box-sizing: border-box;
+            border-radius: $environment-list-item-border-radius;
+            padding: $environment-list-item-padding;
+            margin: $environment-list-item-margin;
+            line-height: $environment-list-item-line-height;
+            height: $environment-list-item-height;
+
+            .checkmark {
+                @include mask-svg-icon('../assets/checkmark.svg');
+                position: absolute;
+                top: $checkmark-top;
+                left: $checkmark-left;
+                background-color: #fff;
+                height: $checkmark-size;
+                width: $checkmark-size;
+            }
+
+            .label {
+                font-size: $label-font-size;
+                font-weight: 400;
+                color: #8f8f8f;
+
+                &.active {
+                    color: #fff;
+                }
+            }
+    
+            &:focus {
+                background-color: #727272;
+
+                .label {
+                    color: #fff;
+                }
+            }
+        }
+    }
+}

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './EnvironmentSelection';

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.styles.animated.1080.scss

@@ -0,0 +1,3 @@
+@import './sizes.1080';
+@import './EnvironmentSelection';
+@import './animated';

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.styles.animated.scss

@@ -0,0 +1,3 @@
+@import './sizes';
+@import './EnvironmentSelection';
+@import './animated';

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './EnvironmentSelection';

package/packages/developer-tools/src/EnvironmentSelection/styles/_animated.scss

@@ -0,0 +1,9 @@
+@import '@24i/bigscreen-sdk/sass-utils/transition';
+
+.environment-list .environment-list-item {
+    @include transition(background-color, 300ms);
+
+    .label {
+        @include transition(color, 300ms);
+    }
+}

package/packages/developer-tools/src/EnvironmentSelection/styles/_sizes.1080.scss

@@ -0,0 +1,25 @@
+$height: 1080px;
+$width: 1920px;
+
+$development-stripe-width: 10px;
+
+$environment-config-name-top: 14px;
+$environment-config-name-border-radius: 4px;
+$environment-config-name-font-size: 22px;
+$environment-config-name-padding-left: 12px;
+$environment-config-name-padding-right: 7px;
+$environment-config-name-height: 33px;
+
+$environment-list-width: 479px;
+
+$environment-list-item-border-radius: 40px;
+$environment-list-item-padding: 16px 34px;
+$environment-list-item-margin: 16px 71px;
+$environment-list-item-line-height: 48px;
+$environment-list-item-height: 80px;
+
+$checkmark-top: 20px;
+$checkmark-left: -72px;
+$checkmark-size: 40px;
+
+$label-font-size: 38px;

package/packages/developer-tools/src/EnvironmentSelection/styles/_sizes.scss

@@ -0,0 +1,25 @@
+$height: 720px;
+$width: 1280px;
+
+$development-stripe-width: 7px;
+
+$environment-config-name-top: 9px;
+$environment-config-name-border-radius: 3px;
+$environment-config-name-font-size: 15px;
+$environment-config-name-padding-left: 8px;
+$environment-config-name-padding-right: 5px;
+$environment-config-name-height: 22px;
+
+$environment-list-width: 319px;
+
+$environment-list-item-border-radius: 27px;
+$environment-list-item-padding: 11px 23px;
+$environment-list-item-margin: 11px 47px;
+$environment-list-item-line-height: 32px;
+$environment-list-item-height: 53px;
+
+$checkmark-top: 13px;
+$checkmark-left: -48px;
+$checkmark-size: 27px;
+
+$label-font-size: 25px;

package/packages/developer-tools/src/EnvironmentSelection/styles.ts

@@ -0,0 +1 @@
+import './styles/EnvironmentSelection.styles';

package/packages/developer-tools/src/EnvironmentSelection/types.ts

@@ -0,0 +1,10 @@
+export type ItemData = {
+    active: boolean,
+    label: string,
+    value: string,
+};
+
+export interface Config<T extends Record<string, any> = Record<string, any>> {
+    name: string,
+    configuration: T
+}

package/packages/developer-tools/src/IDeveloperTool.ts

@@ -0,0 +1,14 @@
+export type DeveloperToolProps = {
+    onClose?: () => void;
+};
+
+export interface IDeveloperTool<Props extends DeveloperToolProps> {
+    readonly name: string;
+    show: () => void;
+    hide: () => void;
+    render: RenderOrNever<Props>;
+}
+
+type RenderOrNever<Props> = Required<Props> extends Required<DeveloperToolProps>
+    ? () => JSX.Element
+    : 'Component must implement optional onClose prop';

package/packages/developer-tools/src/PlayerDebugWindow/PlayerDebugWindow.tsx

@@ -0,0 +1,115 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { DISPLAY_NONE, getDisplayToggler } from '@24i/bigscreen-sdk/utils';
+import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
+import { IMediaInfo, PlayerBase } from '@24i/player-base';
+import { IDeveloperTool } from '../IDeveloperTool';
+import { MEDIA_INFO_DESCRIPTION, MediaInfo } from './constants';
+
+export type Props = {
+    playerInstance?: PlayerBase<any>;
+    updateInterval?: number;
+    onClose?: () => void;
+};
+
+export class PlayerDebugWindow extends Component<Props> implements IDeveloperTool<Props> {
+    name = 'Player debug window';
+
+    div = createRef<HTMLDivElement>();
+
+    playerInstance: PlayerBase<any> | null = null;
+
+    interval = createInterval();
+
+    displayToggler = getDisplayToggler(this.div, true);
+
+    static defaultProps = {
+        updateInterval: 1000,
+    };
+
+    declare props: DeclareProps<Props, typeof PlayerDebugWindow.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        const { playerInstance } = this.props;
+        if (playerInstance) this.setPlayerInstance(playerInstance);
+    }
+
+    setPlayerInstance(playerInstance: PlayerBase<any>) {
+        this.playerInstance = playerInstance;
+    }
+
+    getMediaInfo() {
+        return this.playerInstance?.getMediaInfo() || {};
+    }
+
+    getFormattedValue(item: MediaInfo, value: any) {
+        const { unit, formatter } = item;
+        let formattedOutput = formatter ? formatter(value) : value;
+        if (unit) formattedOutput += ` ${unit}`;
+        return formattedOutput;
+    }
+
+    update = () => {
+        const mediaInfo = this.getMediaInfo();
+        this.renderPlayerDebugWindow(mediaInfo);
+    };
+
+    show() {
+        this.openPlayerDebugWindow();
+    }
+
+    hide() {
+        this.closePlayerDebugWindow();
+    }
+
+    openPlayerDebugWindow() {
+        const { updateInterval } = this.props;
+        const mediaInfo = this.getMediaInfo();
+        this.displayToggler.show();
+        this.renderPlayerDebugWindow(mediaInfo);
+        this.interval.set(this.update, updateInterval);
+    }
+
+    closePlayerDebugWindow() {
+        const { onClose } = this.props;
+        this.interval.clear();
+        this.displayToggler.hide();
+        this.clearMount('', this.div);
+        onClose?.();
+    }
+
+    formatDebugInfo(playerValues: Record<string, any>) {
+        return Object.entries(playerValues).map(([key, value]) => {
+            const debugItem = MEDIA_INFO_DESCRIPTION[key];
+            const { title } = debugItem;
+            const formattedValue = this.getFormattedValue(debugItem, value);
+            return (
+                <div className="player-debug-line">
+                    <span className="name">
+                        {title}
+                        :
+                    </span>
+                    <span className="value">
+                        {formattedValue && formattedValue.toString()}
+                    </span>
+                </div>
+            );
+        });
+    }
+
+    renderPlayerDebugWindow = (mediaInfo: IMediaInfo | {}) => {
+        this.clearMount(
+            this.formatDebugInfo(mediaInfo),
+            this.div,
+        );
+    };
+
+    render() {
+        return (
+            <div
+                ref={this.div}
+                className={`player-debug-window ${DISPLAY_NONE}`}
+            />
+        );
+    }
+}

package/packages/developer-tools/src/PlayerDebugWindow/constants.ts

@@ -0,0 +1,113 @@
+export type MediaInfo = {
+    title: string,
+    readonly formatter?: (value: any) => {},
+    readonly unit?: string,
+};
+
+const MILLISECONDS_IN_SECOND = 1000;
+const BITS_IN_KILOBITS = 1000;
+const BYTES_IN_KILOBYTES = 1024;
+const FIXED_DIGITS = 3;
+
+const bitsToKilobitsString = (bits: number) => (
+    (bits / BITS_IN_KILOBITS).toFixed(0)
+);
+
+const byteToKilobytesString = (bytes: number) => (
+    (bytes / BYTES_IN_KILOBYTES).toFixed(0)
+);
+
+const millisecondsToSecondsString = (milliseconds: number) => (
+    (milliseconds / MILLISECONDS_IN_SECOND).toFixed(FIXED_DIGITS)
+);
+
+export const MEDIA_INFO_DESCRIPTION: Record<string, MediaInfo> = {
+    playerVersion: {
+        title: 'Player engine',
+    },
+    currentTime: {
+        title: 'Current time',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    duration: {
+        title: 'Duration',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    bufferLevel: {
+        title: 'Buffer level',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    bufferedSegments: {
+        title: 'Buffered Segments',
+    },
+    videoCodec: {
+        title: 'Video codec',
+    },
+    audioCodec: {
+        title: 'Audio codec',
+    },
+    drmProtection: {
+        title: 'DRM protection',
+    },
+    resolution: {
+        title: 'Resolution',
+        unit: 'px',
+    },
+    bitrate: {
+        title: 'Bitrate',
+        formatter: bitsToKilobitsString,
+        unit: 'kbps',
+    },
+    framerate: {
+        title: 'Framerate',
+        unit: 'fps',
+    },
+    estimatedBandwidth: {
+        title: 'Estimated bandwidth',
+        formatter: bitsToKilobitsString,
+        unit: 'kbps',
+    },
+    totalDataLoaded: {
+        title: 'Total data loaded',
+        formatter: byteToKilobytesString,
+        unit: 'kB',
+    },
+    corruptedVideoFrames: {
+        title: 'Corrupted video frames',
+    },
+    droppedVideoFrames: {
+        title: 'Dropped video frames',
+    },
+    liveLatency: {
+        title: 'Live latency',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    totalNumberAds: {
+        title: 'Total number of ads',
+    },
+    adType: {
+        title: 'Ad type',
+    },
+    adTotalDuration: {
+        title: 'Ad total duration',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    adRemainingDuration: {
+        title: 'Ad remaining duration',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    adDuration: {
+        title: 'Current ad duration',
+        formatter: millisecondsToSecondsString,
+        unit: 's',
+    },
+    adId: {
+        title: 'Current ad ID',
+    },
+};

package/packages/developer-tools/src/PlayerDebugWindow/index.ts

@@ -0,0 +1 @@
+export { PlayerDebugWindow } from './PlayerDebugWindow';

package/packages/developer-tools/src/PlayerDebugWindow/styles/PlayerDebugWindow.scss

@@ -0,0 +1,29 @@
+.player-debug-window {
+    background-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    padding: $player-debug-window-padding;
+    top: 0;
+    left: 0;
+    font-family: sans-serif;
+    min-height: $player-debug-window-min-height;
+    min-width: $player-debug-window-min-width;
+    z-index: 9000;
+
+    .player-debug-line {
+        color: #dddede;
+        font-size: $player-debug-line-font-size;
+        font-weight: 100;
+        letter-spacing: $player-debug-line-letter-spacing;
+        line-height: $player-debug-line-height;
+
+        .name {
+            float: left;
+            margin-right: $player-debug-line-name-margin-right;
+            width: $player-debug-line-name-width;
+        }
+    
+        .value {
+            width: $player-debug-line-value-width;
+        }
+    }
+}

package/packages/developer-tools/src/PlayerDebugWindow/styles/PlayerDebugWindow.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './PlayerDebugWindow';

package/packages/developer-tools/src/PlayerDebugWindow/styles/PlayerDebugWindow.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './PlayerDebugWindow';

package/packages/developer-tools/src/PlayerDebugWindow/styles/_sizes.1080.scss

@@ -0,0 +1,11 @@
+$player-debug-window-padding: 48px;
+$player-debug-window-min-height: 480px;
+$player-debug-window-min-width: 520px;
+
+$player-debug-line-font-size: 26px;
+$player-debug-line-letter-spacing: 0.3px;
+$player-debug-line-height: 40px;
+
+$player-debug-line-name-margin-right: 24px;
+$player-debug-line-name-width: 320px;
+$player-debug-line-value-width: 300px;

package/packages/developer-tools/src/PlayerDebugWindow/styles/_sizes.scss

@@ -0,0 +1,11 @@
+$player-debug-window-padding: 32px;
+$player-debug-window-min-height: 320px;
+$player-debug-window-min-width: 347px;
+
+$player-debug-line-font-size: 17px;
+$player-debug-line-letter-spacing: 0.2px;
+$player-debug-line-height: 27px;
+
+$player-debug-line-name-margin-right: 16px;
+$player-debug-line-name-width: 213px;
+$player-debug-line-value-width: 200px;

package/packages/developer-tools/src/PlayerDebugWindow/styles.ts

@@ -0,0 +1 @@
+import './styles/PlayerDebugWindow.styles';

package/packages/developer-tools/src/TechnicalInfo/ITechnicalInfoProvider.ts

@@ -0,0 +1,5 @@
+export type TechnicalInfoData = Array<{ label: string, value: string }>;
+
+export interface ITechnicalInfoProvider {
+    getInfoData(): Promise<TechnicalInfoData>;
+}

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfo.tsx

@@ -0,0 +1,123 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { device } from '@24i/bigscreen-sdk/device';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
+import {
+    focusCandidate,
+    setActiveElementAsFocusCandidate,
+    setNextFocusCandidate,
+    Horizontal,
+} from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { IDeveloperTool } from '../IDeveloperTool';
+import { TechnicalInfoDetail } from './TechnicalInfoDetail';
+import { ITechnicalInfoProvider } from './ITechnicalInfoProvider';
+
+type Props = {
+    getDataProvider: () => Promise<ITechnicalInfoProvider>;
+    onClose?: () => void;
+};
+
+export class TechnicalInfo extends Component<Props> implements IDeveloperTool<Props> {
+    readonly name = 'Technical info';
+
+    rootRef = createRef<HTMLDivElement>();
+
+    technicalInfoRef = createRef<TechnicalInfoDetail>();
+
+    horizontalNavigation = createRef<InstanceType<typeof Horizontal>>();
+
+    closeButtonRef = createRef<HTMLDivElement>();
+
+    displayToggler = getDisplayToggler(this.rootRef, true);
+
+    onKeyDown = (event: KeyboardEvent) => {
+        if (BACK.is(event)) {
+            this.closeTechnicalInfo();
+            stopEvent(event);
+        } else if (device.isDirectionalArrow(event)) {
+            stopEvent(event);
+        }
+    };
+
+    onClosePress = () => {
+        this.closeTechnicalInfo();
+    };
+
+    openTechnicalInfo() {
+        this.displayToggler.show();
+        this.renderTechnicalInfo();
+        setActiveElementAsFocusCandidate();
+        // because of async data loading, there needs to be
+        // current technical service component as next candidate
+        setNextFocusCandidate(this.technicalInfoRef);
+        this.focus();
+    }
+
+    closeTechnicalInfo() {
+        const { onClose } = this.props;
+        this.displayToggler.hide();
+        this.clear();
+        focusCandidate();
+        onClose?.();
+    }
+
+    show() {
+        this.openTechnicalInfo();
+    }
+
+    hide() {
+        this.closeTechnicalInfo();
+    }
+
+    focus() {
+        this.technicalInfoRef.current?.focus();
+    }
+
+    clear() {
+        this.clearMount('', this.rootRef);
+        this.technicalInfoRef.current = null;
+    }
+
+    renderTechnicalInfo() {
+        const { getDataProvider } = this.props;
+        this.clearMount(
+            <>
+                <div className="overlay" />
+                <Horizontal
+                    ref={this.horizontalNavigation}
+                    domRef={this.rootRef}
+                    focusableChildren={[this.technicalInfoRef, this.closeButtonRef]}
+                >
+                    <div className="content">
+                        <TechnicalInfoDetail
+                            ref={this.technicalInfoRef}
+                            getDataProvider={getDataProvider}
+                        />
+                    </div>
+                    <div className="controls">
+                        <Interactable
+                            ref={this.closeButtonRef}
+                            className="close-button"
+                            onPress={this.onClosePress}
+                        >
+                            <div className="btn-background" />
+                            <div className="btn-text">CLOSE</div>
+                        </Interactable>
+                    </div>
+                </Horizontal>
+            </>,
+            this.rootRef,
+        );
+    }
+
+    render() {
+        return (
+            <div
+                ref={this.rootRef}
+                className={`technical-info ${DISPLAY_NONE}`}
+                onKeyDown={this.onKeyDown}
+            />
+        );
+    }
+}