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

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

@@ -0,0 +1,76 @@
+import { createRef, Component } from '@24i/bigscreen-sdk/jsx';
+import { ScrollText } from '@24i/bigscreen-sdk/scroll-text';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { ITechnicalInfoProvider, TechnicalInfoData } from './ITechnicalInfoProvider';
+import { scrollStepPx } from './sizes';
+
+type Props = {
+    title?: string,
+    loading?: string,
+    getDataProvider: () => Promise<ITechnicalInfoProvider>,
+};
+
+class TechnicalInfoDetail extends Component<Props> {
+    wrapRef = createRef<HTMLDivElement>();
+
+    scrollRef = createRef<ScrollText>();
+
+    contentRef = createRef<HTMLDivElement>();
+
+    static defaultProps = {
+        title: 'Technical info',
+        loading: 'Loading ...',
+    };
+
+    async componentDidMount() {
+        const { getDataProvider } = this.props;
+        const dataProvider = await getDataProvider();
+        const data = await dataProvider.getInfoData();
+        const shouldFocus = this.hasFocus();
+        this.renderInfoData(data);
+        if (shouldFocus) {
+            this.focus(); // to keep focus
+        }
+    }
+
+    focus() {
+        this.scrollRef.current!.focus();
+    }
+
+    hasFocus() {
+        return this.wrapRef.current!.contains(document.activeElement);
+    }
+
+    renderInfoData(data: TechnicalInfoData) {
+        const { title } = this.props;
+        this.clearMount((
+            <ScrollText className="scroller" scrollStepPx={scrollStepPx} ref={this.scrollRef}>
+                <>
+                    <div className="title">{title}</div>
+                    { map(data, ({ label, value }) => (
+                        <div className="item">
+                            <span className="label">{`${label}: `}</span>
+                            <span className="value">{value}</span>
+                        </div>
+                    ))}
+                </>
+            </ScrollText>
+        ), this.wrapRef);
+    }
+
+    render() {
+        const { title, loading } = this.props;
+        return (
+            <div className="technical-info-detail" ref={this.wrapRef}>
+                <ScrollText className="scroller" scrollStepPx={0} ref={this.scrollRef}>
+                    <div className="title">{title}</div>
+                    <div className="item loading">
+                        <div className="value">{loading}</div>
+                    </div>
+                </ScrollText>
+            </div>
+        );
+    }
+}
+
+export { TechnicalInfoDetail };

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

@@ -0,0 +1,318 @@
+import { DeviceBase } from '@24i/bigscreen-sdk/driver-base';
+import { IStorage } from '@24i/bigscreen-sdk/storage/interface';
+import { getUsedJSHeapSize, getTotalJSHeapSize } from '@24i/bigscreen-sdk/utils/memoryInfo';
+import { ipify } from '@24i/bigscreen-sdk/ipify';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { PlayerBase } from '@24i/player-base';
+import { hasEMESupport, getListOfSupportedDRM } from './utils/emeSupport';
+import {
+    hasEMESupport as hasEMESupport01b,
+    getListOfSupportedDRM as getListOfSupportedDRM01b,
+} from './utils/eme01bSupport';
+import { hasMSESupport } from './utils/mseSupport';
+import { formatTimezone } from './utils/formatTimezone';
+import { TranslationKeys, Translations, defaultTranslations } from './translations';
+import { ITechnicalInfoProvider } from './ITechnicalInfoProvider';
+
+export type SourceDataLayout = Array<{ label: string, getter: () => Promise<any> }>;
+
+const B_IN_KB = 1024;
+
+function toKilobytes(bytes: number) {
+    return Math.floor(bytes / B_IN_KB);
+}
+
+type Props = {
+    /** Device instance currently used. */
+    device: DeviceBase,
+    /** Storage instance currently used. */
+    storage: IStorage,
+    /** Player engine class currently used. */
+    player: typeof PlayerBase,
+    /** User name. Displayed "ANONYMOUS" if empty string. */
+    userName: string,
+    /** Profile name. */
+    profileName: string,
+    /** Version of application. */
+    appVersion: string,
+    /** App resolution, in format like "1280x720". */
+    appResolution: string,
+    /** OVP/CMS back-end base URL. */
+    backendBaseUrl: string,
+    /** Flavor of application. E.g. "animated_720". */
+    flavour: string,
+    /**
+     * function returns the milliseconds elapsed since the UNIX epoch.
+     * (Default: Date.now)
+     */
+    timeProvider?: () => number;
+    /**
+     * Optional component translations. If translations are not defined,
+     * the default English translations will be used.
+     * */
+    translations?: Translations;
+};
+
+class TechnicalInfoProvider implements ITechnicalInfoProvider {
+    props: Props;
+
+    timeProvider: () => number;
+
+    translations: TranslationKeys;
+
+    constructor(props: Props) {
+        this.props = props;
+        this.timeProvider = props.timeProvider || Date.now;
+        this.translations = { ...defaultTranslations, ...props.translations };
+    }
+
+    async getUserName() {
+        const { anonymous } = this.translations;
+        return this.props.userName || anonymous;
+    }
+
+    async getProfileName() {
+        const { unknown } = this.translations;
+        return this.props.profileName || unknown;
+    }
+
+    async getAppVersion() {
+        const { unknown } = this.translations;
+        return this.props.appVersion || unknown;
+    }
+
+    async getFirmwareVersion() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getFirmware();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getDeviceModelName() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getModelName();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getDeviceManufacturer() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getManufacturerName();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getPlatformType() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            const platformName = await this.props.device.getPlatformName() || '';
+            const platformVersion = await this.props.device.getPlatformVersion() || '';
+            value = `${platformName} ${platformVersion}`.trim();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getPlayerType() {
+        const { unknown } = this.translations;
+        const { playerName = '', version = '' } = this.props.player;
+        return `${playerName} ${version}`.trim() || unknown;
+    }
+
+    async getDeviceSerialNumber() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getUuid();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getLocalIpAddress() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getLocalIP();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getPublicIpAddress() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await ipify();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getConnectionType() {
+        let value;
+        const { connectionCable, connectionWifi, connectionNone, unknown } = this.translations;
+        try {
+            const connectionType = await this.props.device.getConnectionType();
+            switch (connectionType) {
+                case 'cable':
+                    return connectionCable;
+                case 'wifi':
+                    return connectionWifi;
+                case 'none':
+                    return connectionNone;
+                default:
+                    return unknown;
+            }
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getMacAddress() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getMacAddress();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getMemoryHeapSize() {
+        const usedSizeKB = toKilobytes(getUsedJSHeapSize());
+        const totalSizeKB = toKilobytes(getTotalJSHeapSize());
+        return `${usedSizeKB} kB / ${totalSizeKB} kB`;
+    }
+
+    async getUsedLocalStorageSize() {
+        let usedSize;
+        const { unknown } = this.translations;
+        try {
+            usedSize = await this.props.storage.getUsedSize();
+            const usedSizeKB = toKilobytes(usedSize);
+            return `${usedSizeKB} kB`;
+        } catch (e) {}
+        return unknown;
+    }
+
+    async getTimeZone() {
+        const unixTimeMs = this.timeProvider();
+        const timezoneOffset = new Date(unixTimeMs).getTimezoneOffset();
+        return formatTimezone(timezoneOffset);
+    }
+
+    async getDateTime() {
+        const unixTimeMs = this.timeProvider();
+        return new Date(unixTimeMs).toUTCString();
+    }
+
+    async getFlavour() {
+        const { unknown } = this.translations;
+        return this.props.flavour || unknown;
+    }
+
+    async getUserAgent() {
+        const { unknown } = this.translations;
+        return navigator.userAgent || unknown;
+    }
+
+    async getEmeSupport() {
+        const { yes, no, unprefixed, prefixed } = this.translations;
+        if (hasEMESupport()) return `${yes} (${unprefixed})`;
+        if (hasEMESupport01b()) return `${yes} (${prefixed})`;
+        return no;
+    }
+
+    async getEmeSupportedDrms() {
+        let listOfDrm: { id: string, name: string }[] = [];
+        if (hasEMESupport()) {
+            listOfDrm = await getListOfSupportedDRM();
+        } else if (hasEMESupport01b()) {
+            listOfDrm = await getListOfSupportedDRM01b();
+        }
+        const names = map(listOfDrm, (drm) => drm.name);
+        return names.join(', ');
+    }
+
+    async getMseSupport() {
+        const { yes, no } = this.translations;
+        return hasMSESupport() ? yes : no;
+    }
+
+    async get4kSupport() {
+        let is4KSupported = false;
+        const { yes, no } = this.translations;
+        try {
+            is4KSupported = await this.props.device.is4KSupported();
+        } catch (e) {}
+        return is4KSupported ? yes : no;
+    }
+
+    async getAppResolution() {
+        const { unknown } = this.translations;
+        if (this.props.appResolution) {
+            return `${this.props.appResolution}px`;
+        }
+        return unknown;
+    }
+
+    async getBackendBaseUrl() {
+        const { unknown } = this.translations;
+        return this.props.backendBaseUrl || unknown;
+    }
+
+    getSourceDataLayout() {
+        const {
+            username, profile, appVersion, firmwareVersion, deviceModel,
+            deviceManufacturer, platform, player, serialNumber, localIpAddress,
+            publicIpAddress, connectionType, macAddress, memoryHeapSize,
+            usedLocalStorage, timeZone, dateAndTime, flavour, userAgent,
+            emeSupport, emeDrmSystems, mseSupport, fourKSupport, resolution, baseUrl,
+        } = this.translations;
+        const dataLayout: SourceDataLayout = [
+            { label: username, getter: this.getUserName },
+            { label: profile, getter: this.getProfileName },
+            { label: appVersion, getter: this.getAppVersion },
+            { label: firmwareVersion, getter: this.getFirmwareVersion },
+            { label: deviceModel, getter: this.getDeviceModelName },
+            { label: deviceManufacturer, getter: this.getDeviceManufacturer },
+            { label: platform, getter: this.getPlatformType },
+            { label: player, getter: this.getPlayerType },
+            { label: serialNumber, getter: this.getDeviceSerialNumber },
+            { label: localIpAddress, getter: this.getLocalIpAddress },
+            { label: publicIpAddress, getter: this.getPublicIpAddress },
+            { label: connectionType, getter: this.getConnectionType },
+            { label: macAddress, getter: this.getMacAddress },
+            { label: memoryHeapSize, getter: this.getMemoryHeapSize },
+            { label: usedLocalStorage, getter: this.getUsedLocalStorageSize },
+            { label: timeZone, getter: this.getTimeZone },
+            { label: dateAndTime, getter: this.getDateTime },
+            { label: flavour, getter: this.getFlavour },
+            { label: userAgent, getter: this.getUserAgent },
+            { label: emeSupport, getter: this.getEmeSupport },
+            { label: emeDrmSystems, getter: this.getEmeSupportedDrms },
+            { label: mseSupport, getter: this.getMseSupport },
+            { label: fourKSupport, getter: this.get4kSupport },
+            { label: resolution, getter: this.getAppResolution },
+            { label: baseUrl, getter: this.getBackendBaseUrl },
+        ];
+        return dataLayout;
+    }
+
+    async loadDataLayout(dataLayout: SourceDataLayout) {
+        const promises = map(dataLayout, async (item) => item.getter.call(this));
+        const values = await Promise.all(promises);
+        return map(dataLayout, (item, index) => ({
+            label: item.label, value: values[index],
+        }));
+    }
+
+    async getInfoData() {
+        const sourceDataLayout = this.getSourceDataLayout();
+        return this.loadDataLayout(sourceDataLayout);
+    }
+}
+
+export { TechnicalInfoProvider };

package/packages/developer-tools/src/TechnicalInfo/icons/arrow-down.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g>
+                                <path d="M40 40L0 40 0 0 40 0z" opacity=".87" transform="translate(-1044 -566) translate(1016 442) rotate(-180 34 82) rotate(-180 20 20)"/>
+                                <path fill="#FFF" d="M26.467 15.483L20 21.95l-6.467-6.467c-.65-.65-1.7-.65-2.35 0-.65.65-.65 1.7 0 2.35l7.65 7.65c.65.65 1.7.65 2.35 0l7.65-7.65c.65-.65.65-1.7 0-2.35-.65-.633-1.716-.65-2.366 0z" transform="translate(-1044 -566) translate(1016 442) rotate(-180 34 82) rotate(-180 20 20)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/packages/developer-tools/src/TechnicalInfo/icons/arrow-up.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g>
+                                <path d="M40 40L0 40 0 0 40 0z" opacity=".87" transform="translate(-1044 -474) translate(1016 442) translate(28 32) rotate(-180 20 20)"/>
+                                <path fill="#FFF" d="M26.467 15.483L20 21.95l-6.467-6.467c-.65-.65-1.7-.65-2.35 0-.65.65-.65 1.7 0 2.35l7.65 7.65c.65.65 1.7.65 2.35 0l7.65-7.65c.65-.65.65-1.7 0-2.35-.65-.633-1.716-.65-2.366 0z" transform="translate(-1044 -474) translate(1016 442) translate(28 32) rotate(-180 20 20)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,5 @@
+export type { TechnicalInfoData, ITechnicalInfoProvider } from './ITechnicalInfoProvider';
+export { TechnicalInfoProvider } from './TechnicalInfoProvider';
+export { TechnicalInfoDetail } from './TechnicalInfoDetail';
+export { TechnicalInfo } from './TechnicalInfo';
+export type { Translations, TranslationKeys } from './translations';

package/packages/developer-tools/src/TechnicalInfo/sizes.1080.ts

@@ -0,0 +1 @@
+export const scrollStepPx = 160;

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

@@ -0,0 +1 @@
+export const scrollStepPx = 107;

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

@@ -0,0 +1,186 @@
+@mixin mask-svg-icon($icon-url) {
+    -webkit-mask-image: url($icon-url);
+    -webkit-mask-size: $icon-mask-size;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: url($icon-url);
+    mask-size: $icon-mask-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.technical-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: sans-serif;
+    width: $technical-info-width;
+    height: $technical-info-height;
+    z-index: 9000;
+
+    .overlay {
+        position: absolute;
+        background-color: #1f1f1f;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+    }
+
+    .content,
+    .controls {
+        display: inline-block;
+        text-align: left;
+        vertical-align: top;
+        height: 100%;
+    }
+
+    .content {
+        width: $content-width;
+    }
+
+    .controls {
+        width: $controls-width;
+    }
+    
+    .technical-info-detail {
+        padding-left: $technical-info-padding-left;
+        padding-right: $technical-info-padding-right;
+        height: 100%;
+
+        .scroller {
+            position: relative;
+            height: 100%;
+            outline: none;
+        
+            > .scroll-wrap {
+                height: 100%;
+                width: $scroll-wrap-width;
+                outline: none;
+            }
+
+            &:focus .arrow-navigation {
+                border-color: #fff;
+                border-radius: $arrow-navigation-border-radius + $arrow-navigation-focus-size;
+                padding: $arrow-navigation-focus-size;
+                margin-left: -$arrow-navigation-focus-size;
+                margin-top: -$arrow-navigation-focus-size;
+            }
+        }
+
+        .arrow-navigation {
+            position: absolute;
+            left: $arrow-navigation-left;
+            top: $arrow-navigation-top;
+            background-color: rgba(97, 98, 100, 0.6);
+            min-height: $arrow-navigation-min-height;
+            min-width: $arrow-navigation-min-width;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: transparent;
+            border-radius: $arrow-navigation-border-radius;
+            border-width: $arrow-navigation-border-width;
+
+            &.disabled {
+                display: none;
+            }
+
+            .nav-arrow {
+                position: relative;
+            }
+
+            .icon-arrow-up,
+            .icon-arrow-down {
+                background-color: #fff;
+                height: $arrow-height;
+                width: $arrow-width;
+
+                &.disabled {
+                    visibility: visible;
+                    opacity: 0.3;
+                }
+            }
+
+            .icon-arrow-up {
+                @include mask-svg-icon('../icons/arrow-up.svg');
+                margin-top: $arrow-margin;
+                margin-bottom: $arrow-top-margin-bottom;
+            }
+    
+            .icon-arrow-down {
+                @include mask-svg-icon('../icons/arrow-down.svg');
+                margin-bottom: $arrow-margin;
+            }
+        }
+
+        .scroll-content {
+            padding-top: $scroll-content-padding-top;
+            padding-bottom: $scroll-content-padding-bottom;
+
+            .title {
+                font-size: $title-font-size;
+                font-weight: 700;
+                margin-bottom: $title-margin-bottom;
+            }
+            
+            .item {
+                color: #a5a5a5;
+                font-size: $item-font-size;
+                font-weight: 400;
+                margin-bottom: $item-margin-bottom;
+            
+                .label {
+                    display: inline-block;
+                    vertical-align: top;
+                    margin-right: $label-margin-right;
+                    width: $label-width;
+                }
+            
+                .value {
+                    display: inline-block;
+                    vertical-align: top;
+                    width: $value-width;
+                }
+            }
+        }
+    }
+
+    .controls {
+        .close-button {
+            position: relative;
+            color: #fff;
+            box-sizing: border-box;
+            text-align: center;
+            outline: none;
+            padding: $button-padding;
+            top: $button-top;
+            left: $button-left;
+            height: $button-height;
+            width: $button-width;
+        
+            .btn-background {
+                position: absolute;
+                background-color: rgba(97, 98, 100, 0.6);
+                border-radius: $button-border-radius;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 100%;
+            }        
+
+            .btn-text {
+                position: relative;
+                font-size: $button-text;
+                font-weight: 400;
+            }
+
+            &:focus .btn-background {
+                border: $button-border-width solid #fff;
+                border-radius: $button-border-radius + $button-focus-size;
+                padding: $button-focus-size;
+                left: -$button-focus-size - $button-border-width;
+                top: -$button-focus-size - $button-border-width;
+            }
+        }
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+@import '@24i/bigscreen-sdk/sass-utils/transition';
+
+.technical-info {
+    .arrow-navigation {
+        @include transition((border-color, border-radius, margin-top, margin-left, padding), 300ms);
+
+        .icon-arrow-up,
+        .icon-arrow-down {
+            @include transition(opacity, 300ms);
+        }
+    }
+
+    .close-button .btn-background {
+        @include transition((border-color, border-radius, top, left, padding), 300ms);
+    }
+}