@hortonstudio/main 1.2.5 → 1.2.6

package/attributes-master/packages/utils/src/types/core.ts

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type * as ATTRIBUTES from '../constants/attributes';
+
+export type FinsweetAttributeKey = (typeof ATTRIBUTES)[keyof typeof ATTRIBUTES];
+
+export type AttributeElements = readonly string[];
+
+export type AttributeSettings = {
+  [name: string]: {
+    key: string;
+    values?: string[];
+    defaultValue?: string;
+    isNumeric?: boolean;
+  };
+};
+
+export type FinsweetAttributes = {
+  /**
+   * Run a callback (or multiple callbacks) after an Attribute has loaded.
+   * @param args A {@link FinsweetAttributesCallback} array.
+   */
+  push: (...args: FinsweetAttributesCallback[]) => void;
+
+  /**
+   * Dynamically imports an Attribute solution.
+   * @param attribute
+   * @returns A Promise that resolves once the Attribute has loaded.
+   */
+  load: (attribute: FinsweetAttributeKey) => Promise<any> | undefined;
+
+  /**
+   * Destroys all Attributes instances.
+   */
+  destroy?: () => void;
+
+  /**
+   * Contains access to each Attribute solution.
+   */
+  modules: {
+    [key in FinsweetAttributeKey]?: FinsweetAttributeControls;
+  };
+
+  /**
+   * Contains the Attributes that are currently running.
+   */
+  process: Set<FinsweetAttributeKey>;
+
+  /**
+   * Contains the script tags that define the Attributes library.
+   * Can be multiple as the user might import the library multiple times.
+   */
+  scripts: HTMLScriptElement[];
+};
+
+export type FinsweetAttributesCallback = [FinsweetAttributeKey, (value: any) => void];
+
+export type FinsweetAttributeControls<T = any> = {
+  /**
+   * Defines the Attribute version.
+   */
+  version?: string;
+
+  /**
+   * Resolves the Attribute loading Promise.
+   */
+  resolve?: (value: T) => void;
+
+  /**
+   * A promise that resolves once the Attribute has fully loaded and initted.
+   */
+  loading?: Promise<T>;
+
+  /**
+   * Restarts the Attribute.
+   */
+  restart?: FinsweetAttributeInit;
+
+  /**
+   * Destroys the Attribute instance.
+   */
+  destroy?: () => void;
+};
+
+type AttributeInitResult =
+  | {
+      result?: any;
+      destroy?: () => void;
+    }
+  | undefined;
+
+export type FinsweetAttributeInit = () => AttributeInitResult | Promise<AttributeInitResult>;
+
+/**
+ * Window object.
+ */
+declare global {
+  interface Window {
+    FinsweetAttributes: FinsweetAttributes;
+  }
+}

package/attributes-master/packages/utils/src/types/dom.ts

@@ -0,0 +1,31 @@
+export type FormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+export type FormFieldType =
+  // Input element types
+  | 'text'
+  | 'password'
+  | 'email'
+  | 'number'
+  | 'tel'
+  | 'url'
+  | 'search'
+  | 'date'
+  | 'time'
+  | 'datetime-local'
+  | 'month'
+  | 'week'
+  | 'color'
+  | 'file'
+  | 'range'
+  | 'checkbox'
+  | 'radio'
+  | 'hidden'
+  | 'submit'
+  | 'reset'
+  | 'button'
+  | 'image'
+  // Select element types
+  | 'select-one'
+  | 'select-multiple'
+  // Textarea element type
+  | 'textarea';

package/attributes-master/packages/utils/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from './core';
+export * from './dom';
+export * from './utils';
+export * from './webflow';

package/attributes-master/packages/utils/src/types/utils.ts

@@ -0,0 +1,20 @@
+/**
+ * Defines a typed object entry
+ */
+export type Entry<T> = { [K in keyof T]: [K, T[K]] }[keyof T];
+
+/**
+ * Converts a `Map<K, V>` type to its equivalent when performing `[...map.entries()]`.
+ * @example ```typescript
+ * const map: MapType = new Map(['key', 'value']);
+ * const entries = [...map.entries()]; // Same type as MapEntries<MapType>
+ *
+ * typeof entries === MapEntries<MapType>
+ * ```
+ */
+export type MapEntries<MapToConvert> = MapToConvert extends Map<infer Key, infer Value> ? [Key, Value][] : never;
+
+/**
+ * Makes a loose autocomplete string type.
+ */
+export type LooseString<T extends string> = T | Omit<string, T>;

package/attributes-master/packages/utils/src/types/webflow.ts

@@ -0,0 +1,147 @@
+/**
+ * Library declaration
+ */
+declare global {
+  interface Window {
+    Webflow?: Webflow | Callback[];
+  }
+}
+
+/**
+ * Callback type for the Webflow.push() method.
+ */
+type Callback = (value?: unknown) => unknown;
+
+export type WebflowModule = 'ix2' | 'commerce' | 'lottie' | 'lightbox' | 'slider' | 'tabs';
+
+interface WebflowCommerce {
+  destroy: () => void;
+  init: (params: { siteId: string; apiUrl: string }) => void;
+}
+
+interface WebflowLightbox {
+  preview: () => void;
+  design: () => void;
+  ready: () => void;
+}
+
+interface WebflowSlider {
+  preview: () => void;
+  design: () => void;
+  ready: () => void;
+  destroy: () => void;
+  redraw: () => void;
+}
+
+type WebflowTabs = WebflowSlider;
+
+interface WebflowIx2 {
+  destroy: () => void;
+  init: () => void;
+  actions: {
+    [key: string]: (...params: unknown[]) => unknown;
+  };
+  store: {
+    dispatch: (param: unknown) => void;
+    getState: () => {
+      ixData: {
+        actionLists: unknown;
+        eventTypeMap: unknown;
+        events: unknown;
+        mediaQueries: unknown;
+        mediaQueryKeys: unknown;
+      };
+      ixElements: {
+        [key: string]: unknown;
+      };
+      ixInstances: {
+        [key: string]: unknown;
+      };
+      ixRequest: {
+        [key: string]: unknown;
+      };
+      ixSession: {
+        eventState: {
+          [key: string]: unknown;
+        };
+        [key: string]: unknown;
+      };
+    };
+  };
+}
+
+/**
+ * Includes methods of the Webflow.js object
+ */
+export interface Webflow extends Pick<Callback[], 'push'> {
+  destroy: () => void;
+  ready: () => void;
+  env: () => boolean;
+  require: <Key extends WebflowModule>(
+    key: Key
+  ) =>
+    | (Key extends 'commerce'
+        ? WebflowCommerce
+        : Key extends 'lightbox'
+          ? WebflowLightbox
+          : Key extends 'slider'
+            ? WebflowSlider
+            : Key extends 'tabs'
+              ? WebflowTabs
+              : WebflowIx2)
+    | undefined;
+}
+
+/**
+ * CMS
+ */
+export type CollectionListWrapperElement = HTMLElement;
+export type CollectionListElement = HTMLElement;
+export type CollectionItemElement = HTMLElement;
+export type CollectionEmptyElement = HTMLElement;
+export type PaginationWrapperElement = HTMLElement;
+export type PaginationButtonElement = HTMLAnchorElement;
+export type PageCountElement = HTMLElement;
+
+/**
+ * Forms
+ */
+export type FormBlockElement = HTMLDivElement;
+export type FormSuccessElement = HTMLDivElement;
+export type FormErrorElement = HTMLDivElement;
+
+/**
+ * Sliders
+ */
+export type SliderElement = HTMLDivElement;
+export type SliderMaskElement = HTMLDivElement;
+export type SlideElement = HTMLDivElement;
+export type SliderArrowElement = HTMLDivElement;
+export type SliderNavElement = HTMLDivElement;
+export type SliderDotElement = HTMLDivElement;
+
+/**
+ * Tabs
+ */
+export type TabsElement = HTMLDivElement;
+export type TabsMenuElement = HTMLDivElement;
+export type TabLinkElement = HTMLLinkElement;
+export type TabsContentElement = HTMLDivElement;
+export type TabPaneElement = HTMLDivElement;
+
+/**
+ * Rich Text Block
+ */
+export type RichTextBlockElement = HTMLDivElement;
+
+/**
+ * Dropdowns
+ */
+export type DropdownElement = HTMLDivElement;
+export type DropdownToggle = HTMLDivElement;
+export type DropdownList = HTMLElement;
+
+/**
+ * The default Webflow Breakpoint names.
+ */
+export type WebflowBreakpoint = 'main' | 'medium' | 'small' | 'tiny';

package/attributes-master/packages/utils/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package/attributes-master/packages/videohls/CHANGELOG.md

@@ -0,0 +1,76 @@
+# @finsweet/attributes-videohls
+
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.0.5
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.0.4
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.0.3
+
+### Patch Changes
+
+- 0b49f9f1: chore: updated `hls.js` dependency
+
+## 1.0.2
+
+### Patch Changes
+
+- 9fec63c2: Better support for CMS Load
+
+## 1.0.1
+
+### Patch Changes
+
+- bfff411c: Improved async loading
+
+## 1.0.0
+
+### Major Changes
+
+- 95fba640: Created `fs-videohls` Attribute.

package/attributes-master/packages/videohls/README.md

@@ -0,0 +1,27 @@
+# `videohls` Attribute
+
+Implement [hls.js](https://github.com/video-dev/hls.js/) to a Webflow project.
+
+## Getting Started
+
+Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
+
+## Accessing the API
+
+To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
+
+```javascript
+window.FinsweetAttributes ||= [];
+window.FinsweetAttributes.push([
+  'videohls',
+  (hlsInstancesStore) => {
+    // Your code goes here.
+  },
+]);
+```
+
+The `result` object contains a map with all the [Hls](https://github.com/video-dev/hls.js/blob/master/docs/API.md) instances: `Map<HTMLVideoElement, Hls>`.
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/videohls/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@finsweet/attributes-videohls",
+  "version": "1.0.10",
+  "description": "Implement hls.js to a Webflow project.",
+  "private": true,
+  "type": "module",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@finsweet/attributes-utils": "workspace:*",
+    "hls.js": "^1.6.2"
+  },
+  "devDependencies": {
+    "@finsweet/attributes-list": "workspace:*"
+  }
+}

package/attributes-master/packages/videohls/src/actions/list.ts

@@ -0,0 +1,23 @@
+import type { List } from '@finsweet/attributes-list';
+import { waitAttributeLoaded } from '@finsweet/attributes-utils';
+
+import { initVideoHLS } from './video';
+
+/**
+ * Listens for newly added videos via CMS Load and inits an hls.js instance for them.
+ *
+ * **Important:** Mutates the passed {@link hlsInstances} array by pushing the new instances to it.
+ *
+ */
+export const listenListLoad = async () => {
+  const listInstances: List[] = (await waitAttributeLoaded('list')) || [];
+
+  listInstances.map((listInstance) => {
+    listInstance.addHook('afterRender', (items) => {
+      for (const { element } of items) {
+        const videos = element.querySelectorAll('video');
+        videos.forEach(initVideoHLS);
+      }
+    });
+  });
+};

package/attributes-master/packages/videohls/src/actions/video.ts

@@ -0,0 +1,44 @@
+import Hls from 'hls.js';
+
+import { getAttribute } from '../utils/selectors';
+import { hlsInstancesStore } from '../utils/stores';
+
+/**
+ * Inits hls.js on a video that supports it.
+ * @param video
+ *
+ * @returns The HLS instance.
+ */
+export const initVideoHLS = (video: HTMLVideoElement) => {
+  if (hlsInstancesStore.get(video)) return;
+  if (video.canPlayType('application/vnd.apple.mpegurl') || !Hls.isSupported()) return;
+
+  const hlsManifestURL = getHLSManifestURL(video);
+  if (!hlsManifestURL) return;
+
+  const hlsInstance = new Hls();
+
+  hlsInstance.loadSource(hlsManifestURL);
+  hlsInstance.attachMedia(video);
+
+  hlsInstancesStore.set(video, hlsInstance);
+
+  return hlsInstance;
+};
+
+const HLS_FILE_EXTENSION_REGEX = /.*\.m3u8$/;
+
+/**
+ * @returns A URL of a `.m3u8` source file from a video, if existing.
+ * @param video
+ */
+const getHLSManifestURL = (video: HTMLVideoElement): string | undefined => {
+  let hlsManifestURL: string | null | undefined = getAttribute(video, 'manifest');
+  if (hlsManifestURL) return hlsManifestURL;
+
+  const sources = video.querySelectorAll('source');
+
+  hlsManifestURL = [video, ...sources].find(({ src }) => HLS_FILE_EXTENSION_REGEX.test(src))?.src;
+
+  return hlsManifestURL;
+};

package/attributes-master/packages/videohls/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/videohls/src/init.ts

@@ -0,0 +1,28 @@
+import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { listenListLoad } from './actions/list';
+import { initVideoHLS } from './actions/video';
+import { hlsInstancesStore } from './utils/stores';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const videos = document.querySelectorAll('video');
+  videos.forEach(initVideoHLS);
+
+  await listenListLoad();
+
+  return {
+    result: hlsInstancesStore,
+    destroy() {
+      for (const [, hlsInstance] of hlsInstancesStore) {
+        hlsInstance.destroy();
+      }
+
+      hlsInstancesStore.clear();
+    },
+  };
+};

package/attributes-master/packages/videohls/src/utils/constants.ts

@@ -0,0 +1,12 @@
+import { type AttributeElements, type AttributeSettings, LIST_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines an HLS manifest URL.
+   */
+  manifest: { key: 'manifest' },
+} as const satisfies AttributeSettings;
+
+export const LIST_ELEMENT_SELECTOR = `[fs-${LIST_ATTRIBUTE}-element="list"]`;

package/attributes-master/packages/videohls/src/utils/selectors.ts

@@ -0,0 +1,5 @@
+import { generateSelectors, VIDEO_HLS_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { getAttribute } = generateSelectors(VIDEO_HLS_ATTRIBUTE, ELEMENTS, SETTINGS);

package/attributes-master/packages/videohls/src/utils/stores.ts

@@ -0,0 +1,3 @@
+import type Hls from 'hls.js';
+
+export const hlsInstancesStore: Map<HTMLVideoElement, Hls> = new Map();

package/attributes-master/packages/videohls/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}