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

package/packages/focus/src/candidate.ts

@@ -0,0 +1,106 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+import { isElementFullyVisible } from '@24i/bigscreen-sdk/utils/elementUtils';
+import { IFocusable } from './IFocusable';
+
+type ICandidate = {
+    isMounted?: boolean;
+} & IFocusable;
+
+type FocusCandidate = ICandidate | Reference<ICandidate>;
+
+const candidateStack: FocusCandidate[] = [];
+
+let candidateFallback: FocusCandidate | undefined;
+
+let nextCandidate: FocusCandidate | undefined;
+
+const isCandidateAvailable = (candidate: ICandidate) => {
+    if (candidate instanceof HTMLElement) {
+        return isElementFullyVisible(candidate);
+    }
+    return Boolean(candidate.isMounted);
+};
+
+const unwrapFocusCandidate = (
+    candidate: FocusCandidate | undefined,
+): ICandidate | undefined => {
+    if (candidate) return unwrapReference(candidate);
+    return undefined;
+};
+
+export const getCandidateStack = () => candidateStack;
+
+export const clearCandidateStack = () => {
+    nextCandidate = undefined;
+    candidateStack.splice(0, candidateStack.length);
+};
+
+export const getLastCandidate = () => {
+    if (candidateStack.length) {
+        return candidateStack[candidateStack.length - 1];
+    }
+    return null;
+};
+
+export const setCandidateFallback = (fallback: FocusCandidate) => {
+    candidateFallback = fallback;
+};
+
+export const getCandidateFallback = () => candidateFallback;
+
+const canPushNewCandidate = (candidate: FocusCandidate) => (
+    candidate !== document.body && getLastCandidate() !== candidate
+);
+
+export const setNextFocusCandidate = (candidate: FocusCandidate) => {
+    if (!canPushNewCandidate(candidate)) return;
+    nextCandidate = candidate;
+    candidateStack.push(candidate);
+};
+
+export const setFocusCandidate = (candidate: FocusCandidate) => {
+    if (!canPushNewCandidate(candidate)) return;
+    nextCandidate = undefined;
+    candidateStack.push(candidate);
+};
+
+export const setActiveElementAsFocusCandidate = () => {
+    setFocusCandidate(document.activeElement as HTMLElement);
+};
+
+export const focusCandidate = (options?: FocusOptions) => {
+    const lastFocused = document.activeElement as HTMLElement;
+    while (candidateStack.length) {
+        const lastCandidate = candidateStack.pop();
+        // statement #1
+        // currently popped candidate can't be nextCandidate
+        // because it would try to focus the current candidate
+        // this test is rather for candidates as whole components or References
+        if (lastCandidate !== nextCandidate) {
+            const candidate = unwrapFocusCandidate(lastCandidate);
+            // statement #2
+            // candidate needs to exist and be available
+            // and it can't be the last focused element
+            if (
+                candidate
+                && isCandidateAvailable(candidate)
+                && candidate !== lastFocused
+            ) {
+                candidate.focus(options);
+                nextCandidate = undefined;
+                const newFocused = document.activeElement as HTMLElement;
+                // statement #3
+                // newly focused element needs to be fully visible
+                // and it can't be the same as the previously focused one
+                // if not, we need to focus another candidate from the stack
+                if (!isElementFullyVisible(newFocused)
+                    || newFocused === lastFocused) {
+                    focusCandidate(options);
+                }
+                return;
+            }
+        }
+        nextCandidate = undefined;
+    }
+    unwrapFocusCandidate(candidateFallback)?.focus(options);
+};

package/packages/focus/src/focusFirstExisting.ts

@@ -0,0 +1,13 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from './IFocusable';
+
+export const focusFirstExisting = (...toFocus: Reference<IFocusable>[]) => (
+    () => {
+        for (let i = 0; i < toFocus.length; i++) {
+            if (toFocus[i].current) {
+                toFocus[i].current!.focus();
+                return;
+            }
+        }
+    }
+);

package/packages/focus/src/index.ts

@@ -0,0 +1,15 @@
+export { Vertical } from './Layout/Vertical';
+export { Horizontal } from './Layout/Horizontal';
+export { Matrix, CircularDirection } from './Layout/Matrix';
+export type { Index2D, Props as MatrixProps } from './Layout/Matrix';
+export type { IFocusable } from './IFocusable';
+export type { Props as HorizontalProps, Props as VerticalProps } from './Layout/Base';
+export { safeFocus } from './safeFocus';
+export {
+    setFocusCandidate,
+    setActiveElementAsFocusCandidate,
+    setNextFocusCandidate,
+    focusCandidate,
+} from './candidate';
+export { focusFirstExisting } from './focusFirstExisting';
+export { refocusAfterHashChange } from './refocusAfterHashChange';

package/packages/focus/src/refocusAfterHashChange.ts

@@ -0,0 +1,19 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { isElementWrappedBy, runAsync } from '@24i/bigscreen-sdk/utils';
+
+/**
+ * Refocus back to previously focused active element,
+ * because hash change steals focus (the browser will focus body).
+ * Focusing element again needs to be asynchronous, because focus
+ * to the body is triggered after the event.
+ * This util should be called inside the `hashchange` event handler.
+ * @param focusWrapperOrReference wrapper element in which focused element should be
+ */
+export const refocusAfterHashChange = (
+    focusWrapperOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const activeElement = document.activeElement as HTMLElement;
+    if (isElementWrappedBy(activeElement, focusWrapperOrReference)) {
+        runAsync(() => activeElement.focus());
+    }
+};

package/packages/focus/src/safeFocus.ts

@@ -0,0 +1,15 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
+import { IFocusable } from './IFocusable';
+
+export const safeFocus = (focusWrapperElement: Reference<HTMLElement> | HTMLElement) => (
+    (component: IFocusable, options?: FocusOptions) => {
+        const focusedElement = document.activeElement as HTMLElement;
+        if (
+            focusedElement === document.body
+            || isElementWrappedBy(focusedElement, focusWrapperElement, true)
+        ) {
+            component.focus(options);
+        }
+    }
+);

package/packages/gallup/README.md

@@ -0,0 +1,27 @@
+---
+id: README
+title: Gallup tracking
+hide_title: true
+sidebar_label: Gallup tracking
+---
+
+# Gallup tracking
+Gallup class is a wrapper for [Gallup SDK](https://seer.kantargallup.dk/dpsdk).
+
+# Usage
+Gallup is initialized in constructor.
+Then to start or stop tracking a stream just call gallup.start or gallup.stop respectively, examples below.
+When exiting player call gallup.unload to make sure that all streams are stopped.
+```typescript
+    const gallup = new Gallup(siteCode, player, playerDescription);
+
+    gallup.start(streamId, programId);
+    gallup.stop();
+
+    // Gallup needs to be destroyed afterwards
+    gallup.destroy();
+```
+
+# Updating SDK
+In order to update Gallup SDK (SpringStreams) first copy new version of springstreams.js into src and replace the old one.
+Afterwards make SpringStreams global by adding `window.SpringStreams = function SpringStreams(...` to beginning of the file, when using bundlers they make global variables local to modules.

package/packages/gallup/src/Gallup.ts

@@ -0,0 +1,80 @@
+import { PlayerBase } from '@24i/player-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<any>,
+        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.getMediaInfo();
+                return {
+                    pl: playerName,
+                    plv: playerVersion || '',
+                    sx: width,
+                    sy: height,
+                };
+            },
+        };
+    }
+}

package/packages/gallup/src/GallupMock.ts

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

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1 @@
+window.SpringStreams = function SpringStreams(h){this.namespace="com.kantarmedia.sensors.javascript";this.version="2.5.6";var v="tns-gallup.dk";var ab="tns.dk";var f=200;var s=2000;var ai="default";var V=new Array();this.namespace="com.kma.springstreams";this.updateTimer=false;this.syncTimer=false;this.syncrate=20;this.pausesync=6;this.maxstates=50;this.workerRunning=false;var e=true;var F;var ae={"+":"%2B",",":"%2C",";":"%3B","=":"%3D","~":"%7E","*":"%2A","'":"%27","!":"%21","(":"%28",")":"%29"};var a=this;var af;M(t());if(h){ai=h}var T='onmessage = function (evt) {if(evt.data == "start"){postMessage("open");if(!self.updateTimer)self.updateTimer = setInterval(()=>{postMessage("update")},200);if(!self.syncTimer)self.syncTimer = setInterval(()=>postMessage("sync"),2000);}if(evt.data == "stop"){clearInterval(self.updateTimer);clearInterval(self.syncTimer);postMessage("close");self.close();}};';var ah=new Blob([T],{type:"text/javascript"});var l=URL.createObjectURL(ah);function J(){F=new Worker(l);a.workerRunning=true;F.onmessage=function(m){if(m.data=="open"){a.updateTimer=a.syncTimer=true}if(m.data=="sync"){x()}if(m.data=="update"){p()}if(m.data=="close"){a.workerRunning=false}};F.onerror=function(m){console.error(m.message)}}J();function k(m){console.debug(m)}function R(m){console.warn(m)}function t(){var m={"2cnt.net":{syncrates:[3,7,10,10,10,10,10,60]}};return m}function M(aj){var ak;if(aj){for(var m in aj){if(m===v&&ab==="barb"){ak=aj[m]}}if(ak){N(ak.syncrates)}}}function N(m){if(m){af=m}}function W(){return af}this.getSyncRates=W;function z(am,aj,al){E();var m=al;if(a.pageContext===undefined){if(!!window.cordova){if(device.platform==="browser"){a.debug("Detected cordova browser-mode falling back to HTML5 context / adapter");a.pageContext=a.defaultPageContext;m=this.HTML5Adapter}else{a.nlso=true;a.debug("Detected cordova context");a.pageContext=a.cordovaPageContext}}else{a.pageContext=a.defaultPageContext}}else{}if(a.pageContext.generateId!==undefined){a.pageContext.generateId()}if(!am){return}if(typeof(a.pageContext)!=="undefined"&&typeof(a.pageContext.initHooks)!=="undefined"){a.pageContext.initHooks()}var ak=new B(this,am,aj,m);V.push(ak);return ak}this.track=z;function E(){if(!a.workerRunning){J()}F.postMessage("start")}function b(){clearInterval(a.updateTimer);clearInterval(a.syncTimer);a.updateTimer=false;a.syncTimer=false;this.workerRunning=false;F.postMessage("stop");for(var m=0;m<V.length;++m){try{V[m].stop()}catch(aj){Q(aj)}}}this.unload=b;function p(ak){for(var m=0;m<V.length;++m){try{V[m].update(ak)}catch(aj){Q(aj)}}}this.doUpdate=p;function x(ak){for(var m=0;m<V.length;++m){try{V[m].sync()}catch(aj){Q(aj)}}}this.doSync=x;function Q(m){S("",m)}this.error=Q;function A(aj,m){return C([[aj,m]])}function U(m){if(m&&m.site!==undefined){return m.site}return ai}function G(m){console.debug(m)}this.debug=G;function r(m){console.warn(m)}this.warn=r;function q(){if(a.pageContext.getWindowLocationURL()===undefined){return"http://"}if("https"===a.pageContext.getWindowLocationURL().slice(0,5)){return"https://"}else{return"http://"}}function Y(){if(!a.nlso){try{var m="";var ak="i00";if(a.pageContext.getUniqueId!==undefined){ak=v}m=a.pageContext.getLocalStorageItem(ak);if(m){return"&c="+m}else{var aj="0000",am=aj+Math.ceil((new Date()).getTime()/1000).toString(16)+(32768|Math.random()*65535).toString(16)+aj;a.pageContext.setLocalStorageItem(ak,am)}}catch(al){a.warn("error"+al)}}return""}function S(ak,aj){if(typeof(a.pageContext.tracking)!="undefined"){e=a.pageContext.tracking}if(e){if(typeof(aj.stream)=="undefined"||aj.stream==""){a.warn("Stream is mandatory for measurement")}else{var m=q()+U(aj)+"."+v+"/j0="+A(ak,aj)+"?lt="+(new Date()).getTime().toString(36)+Y();a.pageContext.preloadImage(m);a.debug(m)}}}this.send=S;function C(al){var aj;var am;var ak;var m;var an=/[+&,;=~!*'()]/g;var ao;switch(typeof al){case"string":return an.test(al)?encodeURIComponent(al).replace(an,function(ap){var aq=ae[ap];if(aq){return aq}return ap}):encodeURIComponent(al);case"number":return isFinite(al)?al.toString():"null";case"boolean":case"null":return al.toString();case"object":if(!al){return"null"}aj=[];if(typeof al.length==="number"&&!(al.propertyIsEnumerable("length"))){m=al.length;for(am=0;am<m;am+=1){aj.push(C(al[am])||"null")}return","+aj.join("+")+";"}for(ak in al){if(typeof ak==="string"){if(ak!=="site"){ao=C(al[ak]);if(ao){aj.push(C(ak)+"="+ao)}}}}return","+aj.join("+")+";";default:}return""}function B(aH,aE,aF,aI){function aG(){var aO=Math.round((Math.random()*10000000000)).toString(36);var aP=new Date().getTime().toString(36);return aP+aO}var aB="";aB=aG();var ao=Math.round(new Date().getTime()/1000);var aw;var aM;var az;var au;var ap=[0,0,ao.toString(36)];var aq=0;var aN=0;var ar=true;var al=false;var aA;var an;var ak;var m;var aL=0;aw=aH;aM=aE;if(aI){aA=aI}else{aA=aw.HTML5Adapter}au=aC(aF);az=new Array();az.push(ap);m=0;an=aH.syncrate;ak=aH.getSyncRates();ay();function aJ(){return aB}function aC(aQ){var aO=new Object();for(var aP in aQ){aO[aP]=aQ[aP]}return aO}function aK(aO){if(az.length<aw.maxstates){az.push(aO)}}function am(aO){ap=[aO,aO,Math.round(new Date().getTime()/1000).toString(36)];aK(ap);ar=true;aq=0}function ay(){if(ak!=null){if(m<ak.length){an=ak[m++];aw.debug("switch syncrate to "+an)}}}function ax(aO){setTimeout(function(){if(aO==Math.round(aA.getPosition(aM))||aO+1==Math.round(aA.getPosition(aM))){aL++;if(aL>=5){aL=0;if(aO-ap[1]>1||ap[1]-aO>1){am(aO)}}}else{aL=0}},200)}function at(aR){if(al){return}var aO=ap[1];var aP=aO;try{aP=Math.round(aA.getPosition(aM))}catch(aS){}try{if(aO===aP){if(aq>=0){aq++;if(aq===aw.pausesync){ar=true}}return}if(aq>=aw.pausesync){am(aP)}else{if(aO<aP-1||aO>aP){ax(aP)}else{ap[1]=aP;if(ap[1]-ap[0]>=an&&aP-aN>=an){ar=true;ay()}aq=0}}}catch(aQ){Q=true;aw.error(aQ)}}this.update=at;function aD(){if(al){return}ar=true;al=true;av(null)}this.stop=aD;function av(){if(a.pageContext.getSerialNumber!==undefined){a.pageContext.getSerialNumber(aj)}else{aj()}}this.sync=av;function aj(){if(ar){try{if(aM.width){au.sx=aM.width}if(aM.videoWidth){au.sx=aM.videoWidth}if(aM.height){au.sy=aM.height}if(aM.videoHeight){au.sy=aM.videoHeight}}catch(aP){}if(a.pageContext.getUniqueId!==undefined){au.psid=a.pageContext.getUniqueId()}au.uid=aB;au.pst=az;var aO;try{if(!au.dur||au.dur===0){au.dur=aA.getDuration(aM)}}catch(aP){}try{aO=aA.getMeta(aM);if(a.pageContext.getDeviceID!==undefined&&a.pageContext.getDeviceID()!==undefined){aO[a.pageContext.getDeviceID()["id_name"]]=a.pageContext.getDeviceID()["id_value"]}}catch(aP){}if(aO.v===undefined){aO.v="js "+a.version}au.vt=(Math.round(new Date().getTime()/1000))-ao;if(typeof(a.pageContext)!=="undefined"&&typeof(a.pageContext.addElectronParameters)!=="undefined"){a.pageContext.addElectronParameters(au);aO.v="E "+a.version}if(typeof(a.pageContext)!=="undefined"&&typeof a.pageContext.isCasting!=="undefined"){a.pageContext.isCasting()}if(typeof(a.pageContext)!=="undefined"&&typeof a.pageContext.getChromecastID!=="undefined"){aO.v="C "+a.version;aO.cid=a.pageContext.getChromecastID()}aw.send(aO,au);aN=ap[1]}ar=false}}this.defaultPageContext={getLocalStorageItem:j,setLocalStorageItem:c,preloadImage:K,getWindowLocationURL:d,initHooks:g};this.cordovaPageContext={getLocalStorageItem:j,setLocalStorageItem:c,preloadImage:H,getWindowLocationURL:D,initHooks:ac};this.HTML5Adapter={getMeta:L,getPosition:w,getDuration:u};this.DefaultAdapter={getMeta:o,getPosition:aa,getDuration:ad};this.WMStreamAdapter={getMeta:y,getPosition:n,getDuration:i};this.RVStreamAdapter={getMeta:ag,getPosition:Z,getDuration:X};function L(m){return{pl:"HTML 5 Video",plv:"HTML 5",sx:screen.width,sy:screen.height}}function u(m){return Math.round(m.duration)}function w(m){return m.currentTime}this.HTML5CordovaAdapter={getMeta:P,getPosition:O,getDuration:I};function P(aj){var m="CDV "+a.version;if(a.cordovaAppName===undefined){a.cordovaAppName="";cordova.getAppVersion.getAppName().then(function(ak){a.cordovaAppName=ak})}if(a.cordovaAppVersion===undefined){a.cordovaAppVersion="";cordova.getAppVersion.getVersionNumber().then(function(ak){a.cordovaAppVersion=ak})}if(device.platform=="Android"){a.cordovaGID=md5(device.uuid).substring(0,16);if(a.cordovaAID===undefined){a.cordovaAID="";if(cordova.plugins.idfa!==undefined){cordova.plugins.idfa.getInfo().then(function(ak){a.cordovaAID=md5(ak.aaid).substring(0,16);a.cordovaLimitAdTracking=ak.limitAdTracking})}}return{pl:"HTML 5 Video",plv:"HTML 5",v:m,sx:screen.width,sy:screen.height,aid:a.cordovaAID,gid:a.cordovaGID,os:device.platform,osv:device.version,av:a.cordovaAppVersion,an:a.cordovaAppName,app:a.cordovaAppName}}else{if(device.platform=="iOS"){a.cordovaIFV=md5(device.uuid).substring(0,16);return{pl:"HTML 5 Video",plv:"HTML 5",v:m,sx:screen.width,sy:screen.height,ifv:a.cordovaIFV,os:device.platform,osv:device.version,av:a.cordovaAppVersion,an:a.cordovaAppName,app:a.cordovaAppName}}else{return{pl:"HTML 5 Video",plv:"HTML 5",v:m,sx:screen.width,sy:screen.height,os:device.platform,osv:device.version,an:a.cordovaAppName,av:a.cordovaAppVersion}}}}function I(m){return Math.round(m.duration)}function O(m){return m.currentTime}function o(m){return{pl:"DEF",plv:version,sx:screen.width,sy:screen.height}}function aa(m){return new Date().getTime()/1000}function ad(m){return 0}function y(m){return{pl:"MSWM",plv:m.versionInfo,sx:screen.width,sy:screen.height}}function n(m){if(m.CurrentPosition){return m.CurrentPosition}if(m.currentPosition){return m.currentPosition}if(m.controls&&m.controls.currentPosition){return m.controls.currentPosition}if(m.Controls&&m.Controls.currentPosition){return m.Controls.currentPosition}return 0}function i(m){if(m.currentMedia){if(m.currentMedia.Duration){return m.currentMedia.Duration}if(m.currentMedia.duration){return m.currentMedia.duration}}else{if(m.CurrentMedia){if(m.CurrentMedia.duration){return m.CurrentMedia.duration}if(m.CurrentMedia.Duration){return m.CurrentMedia.Duration}}}}function ag(m){return{pl:"RV",plv:m.GetVersionInfo(),sx:screen.width,sy:screen.height}}function Z(m){return(m.GetPosition()/1000)}function X(m){return(m.GetLength()/1000)}function c(m,aj){localStorage.setItem(m,aj)}function j(m){return localStorage.getItem(m)}function K(m){(new Image()).src=m}function g(){}function ac(){if(a.cordovaSetCloseHook==undefined){a.cordovaSetCloseHook==true;document.addEventListener("pause",m,false);function m(){b()}}}function D(){return"https://"}function H(ak){const aj={method:"get"};var m="Cordova <"+device.platform+" "+device.version+">";cordova.plugin.http.setHeader("User-Agent",m);cordova.plugin.http.sendRequest(ak,aj,function(al){a.debug("Request respopnse: "+al.status)},function(al){a.warn("Request respopnse: "+al.status+":"+al.error)})}function d(){return document.location.href}};SpringStreams.prototype.setPageContext=function(a){this.pageContext=a};function md5(D){var E;var y=function(b,a){return(b<<a)|(b>>>(32-a))};var I=function(k,b){var W,a,d,x,c;d=(k&2147483648);x=(b&2147483648);W=(k&1073741824);a=(b&1073741824);c=(k&1073741823)+(b&1073741823);if(W&a){return(c^2147483648^d^x)}if(W|a){if(c&1073741824){return(c^3221225472^d^x)}else{return(c^1073741824^d^x)}}else{return(c^d^x)}};var r=function(a,c,b){return(a&c)|((~a)&b)};var q=function(a,c,b){return(a&b)|(c&(~b))};var p=function(a,c,b){return(a^c^b)};var n=function(a,c,b){return(c^(a|(~b)))};var v=function(X,W,ab,aa,k,Y,Z){X=I(X,I(I(r(W,ab,aa),k),Z));return I(y(X,Y),W)};var f=function(X,W,ab,aa,k,Y,Z){X=I(X,I(I(q(W,ab,aa),k),Z));return I(y(X,Y),W)};var G=function(X,W,ab,aa,k,Y,Z){X=I(X,I(I(p(W,ab,aa),k),Z));return I(y(X,Y),W)};var u=function(X,W,ab,aa,k,Y,Z){X=I(X,I(I(n(W,ab,aa),k),Z));return I(y(X,Y),W)};var e=function(W){var X;var d=W.length;var c=d+8;var b=(c-(c%64))/64;var x=(b+1)*16;var Y=new Array(x-1);var a=0;var k=0;while(k<d){X=(k-(k%4))/4;a=(k%4)*8;Y[X]=(Y[X]|(W.charCodeAt(k)<<a));k++}X=(k-(k%4))/4;a=(k%4)*8;Y[X]=Y[X]|(128<<a);Y[x-2]=d<<3;Y[x-1]=d>>>29;return Y};var s=function(d){var a="",b="",k,c;for(c=0;c<=3;c++){k=(d>>>(c*8))&255;b="0"+k.toString(16);a=a+b.substr(b.length-2,2)}return a};var t=function(d){d=(d+"").replace(/\r\n/g,"\n").replace(/\r/g,"\n");var b="";var X,a;var x=0;X=a=0;x=d.length;for(var W=0;W<x;W++){var k=d.charCodeAt(W);var c=null;if(k<128){a++}else{if((k>127)&&(k<2048)){c=String.fromCharCode((k>>6)|192)+String.fromCharCode((k&63)|128)}else{c=String.fromCharCode((k>>12)|224)+String.fromCharCode(((k>>6)&63)|128)+String.fromCharCode((k&63)|128)}}if(c!=null){if(a>X){b+=d.substring(X,a)}b+=c;X=a=W+1}}if(a>X){b+=d.substring(X,d.length)}return b};var F=[],M,h,H,w,g,V,U,T,S,P=7,N=12,K=17,J=22,C=5,B=9,A=14,z=20,o=4,m=11,l=16,j=23,R=6,Q=10,O=15,L=21;D=t(D);F=e(D);V=1732584193;U=4023233417;T=2562383102;S=271733878;E=F.length;for(M=0;M<E;M+=16){h=V;H=U;w=T;g=S;V=v(V,U,T,S,F[M+0],P,3614090360);S=v(S,V,U,T,F[M+1],N,3905402710);T=v(T,S,V,U,F[M+2],K,606105819);U=v(U,T,S,V,F[M+3],J,3250441966);V=v(V,U,T,S,F[M+4],P,4118548399);S=v(S,V,U,T,F[M+5],N,1200080426);T=v(T,S,V,U,F[M+6],K,2821735955);U=v(U,T,S,V,F[M+7],J,4249261313);V=v(V,U,T,S,F[M+8],P,1770035416);S=v(S,V,U,T,F[M+9],N,2336552879);T=v(T,S,V,U,F[M+10],K,4294925233);U=v(U,T,S,V,F[M+11],J,2304563134);V=v(V,U,T,S,F[M+12],P,1804603682);S=v(S,V,U,T,F[M+13],N,4254626195);T=v(T,S,V,U,F[M+14],K,2792965006);U=v(U,T,S,V,F[M+15],J,1236535329);V=f(V,U,T,S,F[M+1],C,4129170786);S=f(S,V,U,T,F[M+6],B,3225465664);T=f(T,S,V,U,F[M+11],A,643717713);U=f(U,T,S,V,F[M+0],z,3921069994);V=f(V,U,T,S,F[M+5],C,3593408605);S=f(S,V,U,T,F[M+10],B,38016083);T=f(T,S,V,U,F[M+15],A,3634488961);U=f(U,T,S,V,F[M+4],z,3889429448);V=f(V,U,T,S,F[M+9],C,568446438);S=f(S,V,U,T,F[M+14],B,3275163606);T=f(T,S,V,U,F[M+3],A,4107603335);U=f(U,T,S,V,F[M+8],z,1163531501);V=f(V,U,T,S,F[M+13],C,2850285829);S=f(S,V,U,T,F[M+2],B,4243563512);T=f(T,S,V,U,F[M+7],A,1735328473);U=f(U,T,S,V,F[M+12],z,2368359562);V=G(V,U,T,S,F[M+5],o,4294588738);S=G(S,V,U,T,F[M+8],m,2272392833);T=G(T,S,V,U,F[M+11],l,1839030562);U=G(U,T,S,V,F[M+14],j,4259657740);V=G(V,U,T,S,F[M+1],o,2763975236);S=G(S,V,U,T,F[M+4],m,1272893353);T=G(T,S,V,U,F[M+7],l,4139469664);U=G(U,T,S,V,F[M+10],j,3200236656);V=G(V,U,T,S,F[M+13],o,681279174);S=G(S,V,U,T,F[M+0],m,3936430074);T=G(T,S,V,U,F[M+3],l,3572445317);U=G(U,T,S,V,F[M+6],j,76029189);V=G(V,U,T,S,F[M+9],o,3654602809);S=G(S,V,U,T,F[M+12],m,3873151461);T=G(T,S,V,U,F[M+15],l,530742520);U=G(U,T,S,V,F[M+2],j,3299628645);V=u(V,U,T,S,F[M+0],R,4096336452);S=u(S,V,U,T,F[M+7],Q,1126891415);T=u(T,S,V,U,F[M+14],O,2878612391);U=u(U,T,S,V,F[M+5],L,4237533241);V=u(V,U,T,S,F[M+12],R,1700485571);S=u(S,V,U,T,F[M+3],Q,2399980690);T=u(T,S,V,U,F[M+10],O,4293915773);U=u(U,T,S,V,F[M+1],L,2240044497);V=u(V,U,T,S,F[M+8],R,1873313359);S=u(S,V,U,T,F[M+15],Q,4264355552);T=u(T,S,V,U,F[M+6],O,2734768916);U=u(U,T,S,V,F[M+13],L,1309151649);V=u(V,U,T,S,F[M+4],R,4149444226);S=u(S,V,U,T,F[M+11],Q,3174756917);T=u(T,S,V,U,F[M+2],O,718787259);U=u(U,T,S,V,F[M+9],L,3951481745);V=I(V,h);U=I(U,H);T=I(T,w);S=I(S,g)}var i=s(V)+s(U)+s(T)+s(S);return i.toLowerCase()};

package/packages/gallup/src/index.ts

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

package/packages/grid/BasicGrid/README.md

@@ -0,0 +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

package/packages/grid/BasicGrid/index.ts

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

package/packages/grid/FirstOnlyGrid/README.md

@@ -0,0 +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)

package/packages/grid/FirstOnlyGrid/index.ts

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

package/packages/grid/FixedToEndGrid/README.md

@@ -0,0 +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)

package/packages/grid/FixedToEndGrid/index.ts

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

package/packages/grid/Item/index.ts

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