@24i/bigscreen-sdk 1.0.29 → 1.0.30-alpha.2518

package/packages/gallup/src/Gallup.ts

@@ -1,80 +1,80 @@
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
-import './__external__/SpringStreams';
-
-const SECOND_IN_MS = 1000;
-
-export class Gallup {
-    private sensors: SpringStreams;
-
-    private stream?: Stream;
-
-    /**
-     * Initializes Gallup Spring Streams tracker
-     * @param siteCode - Site code given by Gallup.
-     * @param player - 24i universal player instance.
-     * @param playerName - Player name for tracking.
-     */
-    constructor(
-        siteCode: string,
-        private readonly player: PlayerBase,
-        private readonly playerName: string,
-    ) {
-        this.sensors = new SpringStreams(siteCode);
-    }
-
-    /**
-     * Start tracking session.
-     * @param  steamId - Gallup tracking string.
-     * @param  programId - Program id.
-     */
-    start(streamId: string, programId: string) {
-        this.stop();
-        this.stream = this.sensors.track(
-            {},
-            { stream: streamId, cq: programId },
-            this.makeAdapter(),
-        );
-    }
-
-    /**
-     * Stop tracking session.
-     */
-    stop() {
-        if (this.stream) this.stream.stop();
-        this.stream = undefined;
-    }
-
-    /**
-     * Destroys the class, preventing any further tracking.
-     * Call when exiting player scene for example.
-     */
-    unload() {
-        this.sensors.unload();
-    }
-
-    /**
-     * Attaches a debugging function to the tracker
-     * @param monitorFn - Function for handling debug events
-     */
-    attachMonitor(monitorFn: (v: any) => void) {
-        this.sensors.debug = monitorFn;
-    }
-
-    private makeAdapter() {
-        const { player, playerName } = this;
-        return {
-            getDuration: () => Math.floor(player.duration / SECOND_IN_MS),
-            getPosition: () => Math.floor(player.currentTime / SECOND_IN_MS),
-            getMeta: () => {
-                const { width, height } = window.screen;
-                const { playerVersion } = player.mediaInfo;
-                return {
-                    pl: playerName,
-                    plv: playerVersion || '',
-                    sx: width,
-                    sy: height,
-                };
-            },
-        };
-    }
-}
+import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import './__external__/SpringStreams';
+
+const SECOND_IN_MS = 1000;
+
+export class Gallup {
+    private sensors: SpringStreams;
+
+    private stream?: Stream;
+
+    /**
+     * Initializes Gallup Spring Streams tracker
+     * @param siteCode - Site code given by Gallup.
+     * @param player - 24i universal player instance.
+     * @param playerName - Player name for tracking.
+     */
+    constructor(
+        siteCode: string,
+        private readonly player: PlayerBase,
+        private readonly playerName: string,
+    ) {
+        this.sensors = new SpringStreams(siteCode);
+    }
+
+    /**
+     * Start tracking session.
+     * @param  steamId - Gallup tracking string.
+     * @param  programId - Program id.
+     */
+    start(streamId: string, programId: string) {
+        this.stop();
+        this.stream = this.sensors.track(
+            {},
+            { stream: streamId, cq: programId },
+            this.makeAdapter(),
+        );
+    }
+
+    /**
+     * Stop tracking session.
+     */
+    stop() {
+        if (this.stream) this.stream.stop();
+        this.stream = undefined;
+    }
+
+    /**
+     * Destroys the class, preventing any further tracking.
+     * Call when exiting player scene for example.
+     */
+    unload() {
+        this.sensors.unload();
+    }
+
+    /**
+     * Attaches a debugging function to the tracker
+     * @param monitorFn - Function for handling debug events
+     */
+    attachMonitor(monitorFn: (v: any) => void) {
+        this.sensors.debug = monitorFn;
+    }
+
+    private makeAdapter() {
+        const { player, playerName } = this;
+        return {
+            getDuration: () => Math.floor(player.duration / SECOND_IN_MS),
+            getPosition: () => Math.floor(player.currentTime / SECOND_IN_MS),
+            getMeta: () => {
+                const { width, height } = window.screen;
+                const { playerVersion } = player.mediaInfo;
+                return {
+                    pl: playerName,
+                    plv: playerVersion || '',
+                    sx: width,
+                    sy: height,
+                };
+            },
+        };
+    }
+}

package/packages/gallup/src/GallupMock.ts

@@ -1,7 +1,7 @@
-export class GallupMock {
-    start = jest.fn();
-
-    stop = jest.fn();
-
-    unload = jest.fn();
-}
+export class GallupMock {
+    start = jest.fn();
+
+    stop = jest.fn();
+
+    unload = jest.fn();
+}

package/packages/gallup/src/__external__/SpringStreams.d.ts

@@ -1,39 +1,39 @@
-// @ts-ignore - must be overridden, projects don't recognize SpringStreams from .js file
-declare class SpringStreams {
-    constructor(siteCode: string);
-    track(content: any, desc: Description, adapter: Adapter): Stream;
-    unload(): void;
-    debug(v: any): void;
-}
-
-declare interface Adapter {
-    getDuration(): number;
-    getPosition(): number;
-    getMeta(): Meta;
-}
-
-declare type Description = {
-    /** Stream name */
-    stream: string;
-    /** Stream duration, must be included if not present in adapter */
-    duration?: number;
-    /** Content type */
-    ct?: string;
-    /** Content quality */
-    cq?: string;
-    /** Size x, or width of the stream window */
-    sx?: number;
-    /** Size y, or height of the stream window */
-    sy?: number;
-};
-
-declare type Meta = {
-    pl: string;
-    plv: string;
-    sx: number;
-    sy: number;
-};
-
-declare interface Stream {
-    stop(): void;
-}
+// @ts-ignore - must be overridden, projects don't recognize SpringStreams from .js file
+declare class SpringStreams {
+    constructor(siteCode: string);
+    track(content: any, desc: Description, adapter: Adapter): Stream;
+    unload(): void;
+    debug(v: any): void;
+}
+
+declare interface Adapter {
+    getDuration(): number;
+    getPosition(): number;
+    getMeta(): Meta;
+}
+
+declare type Description = {
+    /** Stream name */
+    stream: string;
+    /** Stream duration, must be included if not present in adapter */
+    duration?: number;
+    /** Content type */
+    ct?: string;
+    /** Content quality */
+    cq?: string;
+    /** Size x, or width of the stream window */
+    sx?: number;
+    /** Size y, or height of the stream window */
+    sy?: number;
+};
+
+declare type Meta = {
+    pl: string;
+    plv: string;
+    sx: number;
+    sy: number;
+};
+
+declare interface Stream {
+    stop(): void;
+}

package/packages/gallup/src/__mocks__/SpringStreams.js

@@ -1,18 +1,18 @@
-const streamSpy = {
-    stop: jest.fn(),
-};
-
-const sensorsSpy = {
-    track: jest.fn(() => streamSpy),
-    unload: jest.fn(),
-    debug: undefined,
-};
-
-const SpringStreams = jest.fn(() => sensorsSpy);
-
-window.SpringStreams = SpringStreams;
-
-module.exports = {
-    streamSpy,
-    sensorsSpy,
-};
+const streamSpy = {
+    stop: jest.fn(),
+};
+
+const sensorsSpy = {
+    track: jest.fn(() => streamSpy),
+    unload: jest.fn(),
+    debug: undefined,
+};
+
+const SpringStreams = jest.fn(() => sensorsSpy);
+
+window.SpringStreams = SpringStreams;
+
+module.exports = {
+    streamSpy,
+    sensorsSpy,
+};

package/packages/gallup/src/index.ts

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

package/packages/grid/BasicGrid/README.md

@@ -1,78 +1,78 @@
----
-id: README
-title: BasicGrid
-hide_title: true
-sidebar_label: BasicGrid
----
-
-# BasicGrid
-Basic Grid is a type of grid that prefers moving the focus first and only after the focus reaches the last fully visible item or a group of items
-it starts scrolling and keeping the focus at the same position ( on the edge).
-
-## Grid Specific Props
-- `firstScrollStep` - value in pixels to move on the first scroll
-- `scrollStep` - value to move on other scrolls (should be equal to item width/height + its spacing)
-
-## Default Animation Configuration
-- normal: 700ms with easeOutQuart
-- fast: 100ms with easeOutQuart
-- normalToFast: after 2 items with 0.65 sensitivity
-
-## Usage
-
-Most of the use cases of the Basic Grid are that you have an N amount of fully visible rows/columns.
-Then you also have 2 partially visible rows/columns (1 on each side) to indicate the possibility to scroll in that direction.
-
-Therefore you usually set visible rows/columns to the number of fully visible (=== navigatable) rows/columns + 2.
-
-There can be cases when you do not indicate the possibility to scroll with a partial row/column but with some other technique (e.g. an arrow).
-For this case see Example 2
-
-## Examples
-
-### Example 1
-Probably the most common usage of the BasicList.
-- `firstScrollStep` is slighlty smaller to keep the first row partially visible.
-- `scrollStep` is equal to an row height + the space between two rows.
-- `visibleRows` is set to 4 because there can be 4 visible rows (2 fully visible and navigatable and 2 partially visible)
-- `columns` is set to 4 as the grid has 4 columns
-```tsx
-<BasicGrid
-    data={nItems(20)}
-    renderItem={(item, index, ref) => (
-        <Item title={item} ref={ref} />
-    )}
-    visibleRows={4}
-    columns={4}
-    firstScrollStep={100}
-    scrollStep={200}
-/>
-```
-![Example 1](./examples/example1.gif)
-
-### Example 2
-This example show how to use BasicGrid when you have some other way to indicate scrolling.
-- `firstScrollStep` is equal to `scrollStep`
-- `scrollStep` is equal to a column width + the space between two columns
-- `visibleColumns` is set to 6 (4 fully visible and navigatable + 2)
-- `rows` is set to 2 as the grid has 2 rows
-```tsx
-<BasicGrid
-    data={nItems(14)}
-    renderItem={(item, index, ref) => (
-        <Item title={item} ref={ref} />
-    )}
-    visibleColumns={6}
-    rows={2}
-    firstScrollStep={316}
-    scrollStep={316}
-    horizontal
-/>
-```
-![Example 2](./examples/example2.gif)
-
-## Interface
-**Controlling focus / scroll programmatically**
-You can use following method on class instance in your reference:
-- `focusToIndex(index: number, animated?: boolean): void`
-programmatically move focus / scroll to desired item index, 2nd argument is only used in animated version and determines if the focus change should be animated
+---
+id: README
+title: BasicGrid
+hide_title: true
+sidebar_label: BasicGrid
+---
+
+# BasicGrid
+Basic Grid is a type of grid that prefers moving the focus first and only after the focus reaches the last fully visible item or a group of items
+it starts scrolling and keeping the focus at the same position ( on the edge).
+
+## Grid Specific Props
+- `firstScrollStep` - value in pixels to move on the first scroll
+- `scrollStep` - value to move on other scrolls (should be equal to item width/height + its spacing)
+
+## Default Animation Configuration
+- normal: 700ms with easeOutQuart
+- fast: 100ms with easeOutQuart
+- normalToFast: after 2 items with 0.65 sensitivity
+
+## Usage
+
+Most of the use cases of the Basic Grid are that you have an N amount of fully visible rows/columns.
+Then you also have 2 partially visible rows/columns (1 on each side) to indicate the possibility to scroll in that direction.
+
+Therefore you usually set visible rows/columns to the number of fully visible (=== navigatable) rows/columns + 2.
+
+There can be cases when you do not indicate the possibility to scroll with a partial row/column but with some other technique (e.g. an arrow).
+For this case see Example 2
+
+## Examples
+
+### Example 1
+Probably the most common usage of the BasicList.
+- `firstScrollStep` is slighlty smaller to keep the first row partially visible.
+- `scrollStep` is equal to an row height + the space between two rows.
+- `visibleRows` is set to 4 because there can be 4 visible rows (2 fully visible and navigatable and 2 partially visible)
+- `columns` is set to 4 as the grid has 4 columns
+```tsx
+<BasicGrid
+    data={nItems(20)}
+    renderItem={(item, index, ref) => (
+        <Item title={item} ref={ref} />
+    )}
+    visibleRows={4}
+    columns={4}
+    firstScrollStep={100}
+    scrollStep={200}
+/>
+```
+![Example 1](./examples/example1.gif)
+
+### Example 2
+This example show how to use BasicGrid when you have some other way to indicate scrolling.
+- `firstScrollStep` is equal to `scrollStep`
+- `scrollStep` is equal to a column width + the space between two columns
+- `visibleColumns` is set to 6 (4 fully visible and navigatable + 2)
+- `rows` is set to 2 as the grid has 2 rows
+```tsx
+<BasicGrid
+    data={nItems(14)}
+    renderItem={(item, index, ref) => (
+        <Item title={item} ref={ref} />
+    )}
+    visibleColumns={6}
+    rows={2}
+    firstScrollStep={316}
+    scrollStep={316}
+    horizontal
+/>
+```
+![Example 2](./examples/example2.gif)
+
+## Interface
+**Controlling focus / scroll programmatically**
+You can use following method on class instance in your reference:
+- `focusToIndex(index: number, animated?: boolean): void`
+programmatically move focus / scroll to desired item index, 2nd argument is only used in animated version and determines if the focus change should be animated

package/packages/grid/BasicGrid/index.ts

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

package/packages/grid/FirstOnlyGrid/README.md

@@ -1,43 +1,43 @@
----
-id: README
-title: FirstOnlyGrid
-hide_title: true
-sidebar_label: FirstOnlyGrid
----
-
-# FirstOnlyGrid
-First Only Grid is a type of grid that only scrolls and keeps the focus on the first line or in the
-first column.
-
-## Grid Specific Props
-- `scrollStep` - value to move on scroll
-
-## Default Animation Configuration
-- normal: 700ms with easeOutQuart
-- fast: 100ms with easeOutQuart
-- normalToFast: after 2 items with 0.65 sensitivity
-
-## Usage
-FirstOnly grid is most often used for See All scenes that similar to Netflix keep the focus on the
-first line.
-
-## Examples
-
-### Example 1
-Probably the most common usage of the FirstOnlyGrid.
-Similar to BasicGrid it also counts with two partially visible rows/columns on each end.
-Therefore `visibleRows`/`visibleColumns` is equal to fully visible/navigatable rows/columns + 2.
-`scrollStep` is equal to row/column height/width + the space between two rows/coumns.
-```tsx
-<FirstOnlyGrid
-    data={}
-    renderItem={(item, index, ref) => (
-        <Item title={item} ref={ref} />
-    )}
-    visibleColumns={8}
-    rows={2}
-    scrollStep={150}
-    horizontal
-/>
-```
-![Example 1](./examples/example1.gif)
+---
+id: README
+title: FirstOnlyGrid
+hide_title: true
+sidebar_label: FirstOnlyGrid
+---
+
+# FirstOnlyGrid
+First Only Grid is a type of grid that only scrolls and keeps the focus on the first line or in the
+first column.
+
+## Grid Specific Props
+- `scrollStep` - value to move on scroll
+
+## Default Animation Configuration
+- normal: 700ms with easeOutQuart
+- fast: 100ms with easeOutQuart
+- normalToFast: after 2 items with 0.65 sensitivity
+
+## Usage
+FirstOnly grid is most often used for See All scenes that similar to Netflix keep the focus on the
+first line.
+
+## Examples
+
+### Example 1
+Probably the most common usage of the FirstOnlyGrid.
+Similar to BasicGrid it also counts with two partially visible rows/columns on each end.
+Therefore `visibleRows`/`visibleColumns` is equal to fully visible/navigatable rows/columns + 2.
+`scrollStep` is equal to row/column height/width + the space between two rows/coumns.
+```tsx
+<FirstOnlyGrid
+    data={}
+    renderItem={(item, index, ref) => (
+        <Item title={item} ref={ref} />
+    )}
+    visibleColumns={8}
+    rows={2}
+    scrollStep={150}
+    horizontal
+/>
+```
+![Example 1](./examples/example1.gif)

package/packages/grid/FirstOnlyGrid/index.ts

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

package/packages/grid/FixedToEndGrid/README.md

@@ -1,45 +1,45 @@
----
-id: README
-title: FixedToEndGrid
-hide_title: true
-sidebar_label: FixedToEndGrid
----
-
-# FixedToEndGrid
-Fixed To End Grid is a type of grid that prefers scrolling before moving the focus.
-First, the focus remains at the same position. Only after the last row/column is fully visible it starts moving the focus to the end of the grid.
-Going back it first moves the focus to the first position and then scrolls to the start.
-
-## Grid Specific Props
-- `scrollStep` - value to move on scroll
-
-## Default Animation Configuration
-- normal: 700ms with easeOutQuart
-- fast: 100ms with easeOutQuart
-- normalToFast: after 2 items with 0.65 sensitivity
-
-## Usage
-FixedToEnd grid is most often used for portrait Packshots in apps that want to have similar behaviour as Netflix.
-
-Unlike Netflix's list, it does not scroll until the last item. Rather it starts moving the focus once it reaches the last item.
-
-## Examples
-
-### Example 1
-Probably the most common usage of the FixedToEndGrid.
-Similar to BasicGrid it also counts with two partially visible rows/columns on each end.
-Therefore `visibleRows`/`visibleColumns` is equal to fully visible/navigatable rows/columns + 2.
-`scrollStep` is equal to row/column height/width + the space between two rows/coumns.
-```tsx
-<FixedToEndGrid
-    data={}
-    renderItem={(item, index, ref) => (
-        <Item title={item} ref={ref} />
-    )}
-    visibleColumns={8}
-    rows={2}
-    scrollStep={150}
-    horizontal
-/>
-```
-![Example 1](./examples/example1.gif)
+---
+id: README
+title: FixedToEndGrid
+hide_title: true
+sidebar_label: FixedToEndGrid
+---
+
+# FixedToEndGrid
+Fixed To End Grid is a type of grid that prefers scrolling before moving the focus.
+First, the focus remains at the same position. Only after the last row/column is fully visible it starts moving the focus to the end of the grid.
+Going back it first moves the focus to the first position and then scrolls to the start.
+
+## Grid Specific Props
+- `scrollStep` - value to move on scroll
+
+## Default Animation Configuration
+- normal: 700ms with easeOutQuart
+- fast: 100ms with easeOutQuart
+- normalToFast: after 2 items with 0.65 sensitivity
+
+## Usage
+FixedToEnd grid is most often used for portrait Packshots in apps that want to have similar behaviour as Netflix.
+
+Unlike Netflix's list, it does not scroll until the last item. Rather it starts moving the focus once it reaches the last item.
+
+## Examples
+
+### Example 1
+Probably the most common usage of the FixedToEndGrid.
+Similar to BasicGrid it also counts with two partially visible rows/columns on each end.
+Therefore `visibleRows`/`visibleColumns` is equal to fully visible/navigatable rows/columns + 2.
+`scrollStep` is equal to row/column height/width + the space between two rows/coumns.
+```tsx
+<FixedToEndGrid
+    data={}
+    renderItem={(item, index, ref) => (
+        <Item title={item} ref={ref} />
+    )}
+    visibleColumns={8}
+    rows={2}
+    scrollStep={150}
+    horizontal
+/>
+```
+![Example 1](./examples/example1.gif)

package/packages/grid/FixedToEndGrid/index.ts

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

package/packages/grid/Item/index.ts

@@ -1 +1 @@
-export { Item } from '../src/types';
+export { Item } from '../src/types';