@financial-times/cp-content-pipeline-ui 1.4.3 → 2.0.0

package/.babelrc.json

@@ -1,6 +1,7 @@
 {
   "sourceType": "unambiguous",
   "presets": [
+    "@babel/preset-typescript",   
     [
       "@babel/preset-env",
       {

package/CHANGELOG.md

@@ -342,6 +342,23 @@
     * @financial-times/cp-content-pipeline-client bumped from ^1.3.7 to ^1.3.8
     * @financial-times/cp-content-pipeline-schema bumped from ^1.3.4 to ^1.3.5
 
+## [2.0.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v1.4.3...cp-content-pipeline-ui-v2.0.0) (2023-09-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* add new Clip version
+
+### Features
+
+* add new Clip version ([77dfd13](https://github.com/Financial-Times/cp-content-pipeline/commit/77dfd13f1f67884abb53ec7f5585df9cbb611f8d))
+
+
+### Bug Fixes
+
+* autoplay progress ([6b58f69](https://github.com/Financial-Times/cp-content-pipeline/commit/6b58f693d263cd904a74c6181030c560c7ca68c1))
+* transcript icon not cut ([44d67c8](https://github.com/Financial-Times/cp-content-pipeline/commit/44d67c86df3734d9d8179d7751f4c528e407f169))
+
 ## [1.4.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v1.3.6...cp-content-pipeline-ui-v1.4.2) (2023-09-18)
 
 

package/jest.config.js

@@ -1,6 +1,23 @@
 const base = require('../../jest.config.base.js')
-
 module.exports = {
   ...base,
   testEnvironment: 'jsdom',
+  transformIgnorePatterns: [
+		// Need to transform all node from the FT
+		"/node_modules/(?!@financial-times)"
+	],
+	transform: {
+    ...base.transform,
+		'.(js)': '@sucrase/jest-plugin'
+	},
+	moduleNameMapper: {
+      ...base.moduleNameMapper,
+       '^@financial-times/o-expander$':
+            '<rootDir>/../../node_modules/@financial-times/o-expander/main.js',
+        '^@financial-times/o-viewport$':
+            '<rootDir>/../../node_modules/@financial-times/o-viewport/main.js',
+    }
+    ,
+    maxWorkers: '50%', // Adjust the number based on your CircleCI resources
+
 }

package/lib/client.d.ts

@@ -0,0 +1 @@
+export { default as Clip } from './components/Clip/client/index';

package/lib/client.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Clip = void 0;
+var index_1 = require("./components/Clip/client/index");
+Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
+//# sourceMappingURL=client.js.map

package/lib/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAgE;AAAvD,8GAAA,OAAO,OAAQ"}

package/lib/components/Clip/client/index.d.ts

@@ -0,0 +1,117 @@
+/// <reference types="node" />
+import ProgressBar from './progressBar';
+interface Opts {
+    autorender?: boolean;
+    autoplay?: boolean | string;
+    id?: string;
+    layout?: string;
+    fallbackImage?: boolean;
+    mute?: boolean | string;
+    noAudio?: boolean | string;
+    fadeOutDelay?: number;
+    progressBarTimeTriggerTap?: number;
+    progressBarTapDelay?: number;
+    progressTimeStepSeconds?: number;
+}
+declare class ClipInterface {
+    constructor(el: HTMLElement, opts: any);
+    init(): void;
+    unload(): void;
+    destroy(): void;
+}
+declare class Clip extends ClipInterface {
+    containerEl: HTMLElement;
+    videoEl: HTMLVideoElement;
+    amountWatched: number;
+    loop: number;
+    canAutoplay: boolean;
+    useCustomPlayer: boolean;
+    started: boolean;
+    playStart: number | undefined;
+    opts: Opts;
+    private isInViewPort;
+    private fireWatchedEvent;
+    private onResizeEvent;
+    private onClickOutsideEvent;
+    private onOfflineEvent;
+    private onOnlineEvent;
+    private onKeyFocusEvent;
+    private observer;
+    private lastQuarter;
+    dispatchedProgress: any;
+    private expander;
+    private autoplayPaused;
+    private offlineMessageEl;
+    private progressRing;
+    private lastTimeUpdate;
+    private muteIcon;
+    private controls;
+    private playText;
+    private progressBar;
+    private isMobileDevice;
+    constructor(el: HTMLElement, opts: Opts);
+    get autoplay(): boolean;
+    get muted(): boolean;
+    set muted(value: boolean);
+    unload(): void;
+    init(): Promise<void>;
+    checkLoop(progress?: null | number): void;
+    checkIfElementInDOM(): boolean;
+    fireEvent(action: string, extraDetail?: {}): void;
+    getTrackingData(eventType: string): any;
+    getProgress(rounded?: boolean): number;
+    getRelevantProgress(): number;
+    getDuration(): number;
+    getAmountWatched(decimalPoints?: number | undefined): number;
+    getAmountWatchedPercentage(decimalPoints: number | undefined): number;
+    markPlayStart(): void;
+    updateAmountWatched(): void;
+    destroy(): void;
+    hasEnoughBufferToPlay(): boolean;
+    isVideoPlaying(): boolean;
+    createCustomPlayer(): void;
+    createOfflineMessage(): void;
+    showOffLineMessage(): void;
+    hideOffLineMessage(): void;
+    createNoAudioIcon(): HTMLButtonElement;
+    visibilityListener([observed]: IntersectionObserverEntry[]): void;
+    addEvents(events: Array<string>): void;
+    eventListener(ev: Event): void;
+    fadeIn(): void;
+    fadeOut(immediate?: boolean): NodeJS.Timeout | undefined;
+    getClipPathStringFromProgress(percentage: number): string;
+    isDirectPauseEvent(): boolean;
+    shouldDispatch(): boolean;
+    videoHasAudio(): any;
+    videoHasNoAudio(hasNoAudio?: boolean): string | boolean | undefined;
+    descriptionToggle(): void;
+    showDescription(): void;
+    onClickOutside(event: MouseEvent): void;
+    onKeyFocus: (event: KeyboardEvent) => void;
+    resizeControls(): void;
+    isFocused(): boolean;
+    togglePlay(): void;
+    createProgressBar(): ProgressBar;
+    static init(rootElParam?: HTMLElement | string | null, config?: Opts): ClipInterface[];
+}
+export declare class ClipFallbackImage extends ClipInterface {
+    containerEl: HTMLElement;
+    posterUrl: string;
+    dataLayout: string;
+    opts: Opts;
+    private fallbackImage;
+    constructor(clipWithPoster: HTMLElement, opts?: {});
+    init(): void;
+    fireEvent(action: string, extraDetail?: {}): void;
+    getTrackingData(eventType: string): {
+        category: string;
+        action: string;
+        video: {
+            type: string;
+            source_url: string | undefined;
+            layout: string | undefined;
+        };
+    };
+}
+export declare function showImageInsteadOfClipInClient(): void;
+export default Clip;