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

package/packages/zapping/src/Zapping.tsx

@@ -0,0 +1,105 @@
+import { Component } from '@24i/bigscreen-sdk/jsx';
+import {
+    NumericZapper,
+    isZapperAllowed,
+    zapperServiceRef,
+} from '@24i/bigscreen-sdk/numeric-zapper';
+import { Props as NumericZapperProps } from '@24i/bigscreen-sdk/numeric-zapper/interface';
+import { find } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { ChannelZapping, Props as ChannelUpDownZappingProps } from './ChannelZapping';
+
+/**
+ * **Zapping Props**
+ *
+ * - channels - array of all channels
+ * - currentChannel - current channel at the time of render
+ * - onZappedToChannel - callback for channel change
+ * - onZappedToInvalidChannelNumber - optional callback for trying to go to invalid channel number
+ * - numericZapper - optional NumericZapper props - pass if you want NumericZapper to get rendered
+ * - channelUpDownZapping - optional configuration for CHANNEL UP/DOWN zapping
+ */
+export type Props<T extends Asset = Asset> = {
+    channels: T[],
+    currentChannel: T,
+    onZappedToChannel: (channel: T) => void,
+    onZappedToInvalidChannelNumber?: (channelNumber: number) => void,
+    numericZapper?: NumericZapperProps,
+    channelUpDownZapping?: Omit<ChannelUpDownZappingProps<T>, 'onChannelChange'>,
+};
+
+export class Zapping<T extends Asset = Asset> extends Component<Props<T>> {
+    /**
+     * Channel UP/DOWN zapping controller.
+     */
+    channelZapping: ChannelZapping<T> | undefined = undefined;
+
+    constructor(props: Props<T>) {
+        super(props);
+        const { channels, onZappedToChannel, currentChannel, channelUpDownZapping } = props;
+        if (channelUpDownZapping) {
+            this.channelZapping = new ChannelZapping(
+                channels,
+                currentChannel,
+                {
+                    ...channelUpDownZapping,
+                    onChannelChange: onZappedToChannel,
+                },
+            );
+        }
+    }
+
+    /**
+     * Enables various zapping methods.
+     */
+    componentDidMount() {
+        if (this.channelZapping) {
+            window.addEventListener('keydown', this.onKeyDown);
+        }
+        if (zapperServiceRef.current) {
+            zapperServiceRef.current.enable(this.onZappedToChannelNumber);
+        }
+    }
+
+    /**
+     * Clean up.
+     */
+    componentWillUnmount() {
+        if (this.channelZapping) {
+            window.removeEventListener('keydown', this.onKeyDown);
+        }
+        if (zapperServiceRef.current) {
+            zapperServiceRef.current.disable();
+        }
+    }
+
+    /**
+     * Finds channel by number and either calls onZappedToChannel or onZappedToInvalidChannelNumber.
+     * @param channelNumber number of the channel to switch to
+     */
+    onZappedToChannelNumber = (channelNumber: number) => {
+        const { channels, onZappedToChannel, onZappedToInvalidChannelNumber } = this.props;
+        const newChannel = find(channels, (channel) => channel.number === channelNumber);
+        if (newChannel) {
+            onZappedToChannel(newChannel);
+        } else {
+            onZappedToInvalidChannelNumber?.(channelNumber);
+        }
+    };
+
+    /**
+     * If is zapping allowed passes keydown event to Channel UP/DOWN zapping.
+     * @param event keyboard event
+     */
+    onKeyDown = (event: KeyboardEvent) => {
+        if (!isZapperAllowed()) return;
+        this.channelZapping!.onKeyDown(event);
+    };
+
+    render() {
+        const { numericZapper } = this.props;
+        return numericZapper
+            ? <NumericZapper {...numericZapper} ref={zapperServiceRef} />
+            : <></>;
+    }
+}

package/packages/zapping/src/index.ts

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

package/packages/zapping/src/interface.ts

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