@twilio/player - npm Package Compare versions

Comparing version 1.0.0-beta.5 to 1.0.0-beta.6

dist/index.d.ts

@@ -111,2 +111,3 @@ /// <reference types="react" />
     mediaElement: HTMLMediaElement | null;
+    regionsContainer: HTMLDivElement;
     segmentHighlighterContainer: HTMLDivElement;
@@ -118,3 +119,3 @@ segmentHighlighterLeft: HTMLDivElement;
     waveformContainer: HTMLDivElement;
-    waveform?: HTMLElement | null | undefined;
+    waveform?: HTMLElement | null;
     ws?: WaveSurfer<Drawer>;
@@ -166,6 +167,5 @@ wsParams: PlayerParams;
     };
-    container: HTMLDivElement | null;
+    container: React.RefObject<HTMLDivElement>;
     mediaElement: HTMLMediaElement | null;
     core?: PlayerCore;
-    markContainer: HTMLDivElement | null;
     on: PlayerCore["on"];
@@ -176,3 +176,3 @@ once: PlayerCore["once"];
     isPlaying: () => boolean;
-    isReady: () => false | (() => false | (() => boolean));
+    isReady: () => false | (() => boolean);
     play: (start?: number | undefined, end?: number | undefined) => Promise<void> | undefined;
@@ -185,6 +185,6 @@ pause: () => void | undefined;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     componentDidUpdate(prevProps: PlayerProps): void;
     private load;
     private getCurrentSegment;
-    private createMarkingsContainer;
     private onReady;
@@ -191,0 +191,0 @@ render(): JSX.Element;

dist/index.js

@@ -271,2 +271,3 @@ 'use strict';
             this.waveform = this.waveformContainer.querySelector("wave");
+            this.waveform.appendChild(this.regionsContainer);
             this.emit("ready");
@@ -403,2 +404,11 @@ this.renderSegmentHighlight();
         this.waveformContainer = document.createElement("div");
+        this.regionsContainer = util.style(document.createElement("div"), {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            zIndex: 2,
+            width: "100%",
+            height: "100%",
+        });
+        this.regionsContainer.setAttribute("class", "twilio-player-regions");
         this.segmentHighlighterContainer = util.style(document.createElement("div"), {
@@ -434,4 +444,4 @@ backgroundColor: "transparent",
         });
-        this.timelineContainer.setAttribute("id", "twilio-player-timeline-container");
-        this.waveformContainer.setAttribute("id", "twilio-player-waveform-container");
+        this.timelineContainer.setAttribute("class", "twilio-player-timeline");
+        this.waveformContainer.setAttribute("class", "twilio-player-waveform");
         this.segmentHighlighterContainer.appendChild(this.segmentHighlighterLeft);
@@ -503,34 +513,13 @@ this.segmentHighlighterContainer.appendChild(this.segmentHighlighterCenter);
     containerWidth: 0,
-    markContainer: null,
-    regionContainer: null,
+    regionsContainer: null,
 });
 class Markings extends React.PureComponent {
-    componentDidMount() {
-        var _a;
-        (_a = this.props.player.ws) === null || _a === void 0 ? void 0 : _a.on("redraw", () => {
-            this.forceUpdate();
-        });
-    }
     render() {
-        if (!this.props.player.ws) {
-            return null;
-        }
-        const containerWidth = this.props.player.container.clientWidth;
-        const pxPerSec = containerWidth / this.props.player.ws.getDuration();
-        const { markContainer, regionContainer } = this.props;
-        return (regionContainer && (React.createElement(Portal, { node: regionContainer },
-            React.createElement("div", { className: "twilio-player-regions", style: {
-                    position: "absolute",
-                    top: "0",
-                    left: "0",
-                    zIndex: 2,
-                    width: "100%",
-                    height: "100%",
-                } },
-                React.createElement(MarkingsContext.Provider, { value: {
-                        pxPerSec,
-                        containerWidth,
-                        markContainer,
-                        regionContainer,
-                    } }, this.props.children)))));
+        const { regionsContainer: regionContainer, pxPerSec, containerWidth, } = this.props;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(MarkingsContext.Provider, { value: {
+                    pxPerSec,
+                    containerWidth,
+                    regionsContainer: regionContainer,
+                } }, this.props.children)));
     }
@@ -540,12 +529,14 @@ }
     render() {
-        const { children, duration, offset, color, ...props } = this.props;
-        return (React.createElement(MarkingsContext.Consumer, null, ({ pxPerSec, containerWidth, markContainer }) => offset * pxPerSec <= containerWidth && (React.createElement("div", Object.assign({ style: {
-                ...this.positionElementStyles(pxPerSec, containerWidth),
-                backgroundColor: color,
-            } }, props), markContainer && (React.createElement(Portal, { node: markContainer },
-            React.createElement("div", { style: {
+        const { children, offset, color } = this.props;
+        return (React.createElement(MarkingsContext.Consumer, null, ({ pxPerSec, containerWidth, regionsContainer }) => (React.createElement(React.Fragment, null,
+            offset * pxPerSec <= containerWidth && children && (React.createElement("div", { style: {
                     ...this.positionElementStyles(pxPerSec, containerWidth),
                     pointerEvents: "none",
                     zIndex: 6,
-                } }, children)))))));
+                } }, children)),
+            regionsContainer && (React.createElement(Portal, { node: regionsContainer },
+                React.createElement("div", { style: {
+                        ...this.positionElementStyles(pxPerSec, containerWidth),
+                        backgroundColor: color,
+                    } })))))));
     }
@@ -573,5 +564,4 @@ positionElementStyles(pxPerSec, containerWidth) {
         };
-        this.container = null;
+        this.container = React.createRef();
         this.mediaElement = null;
-        this.markContainer = null;
         this.on = (event, fn) => {
@@ -605,3 +595,3 @@ if (!this.core) {
             var _a;
-            return ((_a = this.core) === null || _a === void 0 ? void 0 : _a.isReady) || false;
+            return ((_a = this.core) === null || _a === void 0 ? void 0 : _a.isReady()) || false;
         };
@@ -655,6 +645,8 @@ this.play = (start, end) => {
         this.onReady = () => {
-            var _a;
-            this.createMarkingsContainer();
+            var _a, _b, _c;
+            (_b = (_a = this.core) === null || _a === void 0 ? void 0 : _a.ws) === null || _b === void 0 ? void 0 : _b.on("redraw", () => {
+                this.forceUpdate();
+            });
             const [duration, offset] = this.getCurrentSegment();
-            (_a = this.core) === null || _a === void 0 ? void 0 : _a.setCurrentSegment(duration, offset);
+            (_c = this.core) === null || _c === void 0 ? void 0 : _c.setCurrentSegment(duration, offset);
             if (this.props.onReady) {
@@ -667,4 +659,4 @@ this.props.onReady(this);
     componentDidMount() {
-        assert(this.container);
-        this.core = new PlayerCore(this.container, removeUndefined(this.props.options || {}));
+        assert(this.container.current);
+        this.core = new PlayerCore(this.container.current, removeUndefined(this.props.options || {}));
         this.mediaElement = this.core.mediaElement;
@@ -674,2 +666,7 @@ this.core.on("ready", this.onReady);
     }
+    componentWillUnmount() {
+        var _a, _b;
+        (_a = this.core) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.core) === null || _b === void 0 ? void 0 : _b.removeAllListeners();
+    }
     componentDidUpdate(prevProps) {
@@ -704,13 +701,9 @@ var _a, _b;
     }
-    createMarkingsContainer() {
-        var _a;
-        this.markContainer = document.createElement("div");
-        this.markContainer.classList.add("twilio-player-markings");
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(this.markContainer);
-    }
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: el => (this.container = el), id: "twilio-player-container", style: { ...this.props.style, position: "relative" } }),
-            this.state.isReady && ((_a = this.core) === null || _a === void 0 ? void 0 : _a.waveform) && (React.createElement(Markings, { player: this.core, markContainer: this.markContainer, regionContainer: (_b = this.core) === null || _b === void 0 ? void 0 : _b.waveform }, this.props.children))));
+            React.createElement("div", { ref: this.container, className: "twilio-player-container", style: { ...this.props.style, position: "relative" } },
+                React.createElement("div", { className: "twilio-player-markings" }, this.state.isReady &&
+                    this.container.current && ((_a = this.core) === null || _a === void 0 ? void 0 : _a.regionsContainer) &&
+                    this.core.ws && (React.createElement(Markings, { containerWidth: this.container.current.clientWidth, pxPerSec: this.container.current.clientWidth / ((_b = this.core.ws) === null || _b === void 0 ? void 0 : _b.getDuration()), regionsContainer: (_c = this.core) === null || _c === void 0 ? void 0 : _c.regionsContainer }, this.props.children))))));
     }
@@ -717,0 +710,0 @@ }

package.json

 {
   "name": "@twilio/player",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

489514

increased by17.39%

Number of package files

31

increased by3.33%

Lines of code

1735

increased by0.12%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes