@twilio/player - npm Package Compare versions

Comparing version 1.0.0-beta.11 to 1.0.0-beta.12

dist/index.d.ts

 /// <reference types="react" />
-/// <reference path="./declarations.d.ts" />
 import * as React from "react";
@@ -151,3 +150,3 @@ import WaveSurfer from "wavesurfer.js";
     isReady: () => boolean;
-    seekToSecond: (seconds: number) => void;
+    seekToSecond: (seconds: number, offsetFromSegment?: boolean) => void;
     setCurrentSegment: (duration?: number | undefined, offset?: number | undefined) => void;
@@ -185,3 +184,3 @@ setPlaybackRate: (rate?: PlaybackRate) => void;
     pause: () => Promise<void>;
-    seekToSecond: (seconds: number) => void;
+    seekToSecond: (seconds: number, offsetFromSegment?: boolean) => void;
     componentDidMount(): void;
@@ -202,2 +201,3 @@ componentWillUnmount(): void;
     color: string;
+    offsetFromSegment: boolean;
 }
@@ -208,2 +208,3 @@ declare class Mark extends React.PureComponent<MarkProps & React.HTMLAttributes<HTMLDivElement>> {
         color: string;
+        offsetFromSegment: boolean;
     };
@@ -210,0 +211,0 @@ render(): JSX.Element;

dist/index.js

@@ -442,7 +442,7 @@ 'use strict';
         };
-        this.seekToSecond = (seconds) => {
+        this.seekToSecond = (seconds, offsetFromSegment = true) => {
             if (!this.ws || !this.isReady() || this.isHotLoading) {
                 throw new Error("Unable to seek, because player is either loading or not initialized");
             }
-            const offset = (this.currentSegmentOffset || 0) + seconds;
+            const offset = ((offsetFromSegment && this.currentSegmentOffset) || 0) + seconds;
             return this.ws.seekTo(offset / this.ws.getDuration());
@@ -536,2 +536,3 @@ };
 const MarkContext = React.createContext({
+    segmentOffset: 0,
     pxPerSec: 0,
@@ -543,6 +544,6 @@ containerWidth: 0,
     render() {
-        const { children, offset, color } = this.props;
-        return (React.createElement(MarkContext.Consumer, null, ({ pxPerSec, containerWidth, regionsContainer }) => offset * pxPerSec <= containerWidth ? (React.createElement(React.Fragment, null,
+        const { children, offset, color, title } = this.props;
+        return (React.createElement(MarkContext.Consumer, null, ({ pxPerSec, containerWidth, regionsContainer, segmentOffset }) => offset * pxPerSec <= containerWidth ? (React.createElement(React.Fragment, null,
             children && (React.createElement("div", { style: {
-                    ...this.positionElementStyles(pxPerSec, containerWidth),
+                    ...this.positionElementStyles(pxPerSec, containerWidth, this.props.offsetFromSegment ? segmentOffset : 0),
                     pointerEvents: "none",
@@ -552,13 +553,13 @@ zIndex: 6,
             regionsContainer && (React.createElement(Portal, { node: regionsContainer },
-                React.createElement("div", { style: {
-                        ...this.positionElementStyles(pxPerSec, containerWidth),
+                React.createElement("div", { title: title, style: {
+                        ...this.positionElementStyles(pxPerSec, containerWidth, this.props.offsetFromSegment ? segmentOffset : 0),
                         backgroundColor: color,
                     } }))))) : null));
     }
-    positionElementStyles(pxPerSec, containerWidth) {
+    positionElementStyles(pxPerSec, containerWidth, segmentOffset) {
         return {
             position: "absolute",
             top: "0",
-            left: this.props.offset * pxPerSec + "px",
-            width: Math.min(this.props.duration * pxPerSec, containerWidth - this.props.offset * pxPerSec) + "px",
+            left: (this.props.offset + segmentOffset) * pxPerSec + "px",
+            width: Math.min(this.props.duration * pxPerSec, containerWidth - (this.props.offset + segmentOffset) * pxPerSec) + "px",
             height: "100%",
@@ -571,2 +572,3 @@ };
     color: "transparent",
+    offsetFromSegment: false,
 };
@@ -624,7 +626,7 @@
         };
-        this.seekToSecond = (seconds) => {
+        this.seekToSecond = (seconds, offsetFromSegment = true) => {
             if (!this.core) {
                 throw new Error("Player.seekToSecond() cannot be called before the component is mounted");
             }
-            return this.core.seekToSecond(seconds);
+            return this.core.seekToSecond(seconds, offsetFromSegment);
         };
@@ -641,3 +643,3 @@ this.getCurrentSegment = () => {
             }
-            return [];
+            return [0, 0];
         };
@@ -699,2 +701,3 @@ this.onReady = () => {
             React.createElement("div", { className: "twilio-player-markings" }, this.state.isReady && this.container.current && this.core.ws && (React.createElement(MarkContext.Provider, { value: {
+                    segmentOffset: this.getCurrentSegment()[1],
                     containerWidth: this.container.current.clientWidth,
@@ -701,0 +704,0 @@ pxPerSec: this.container.current.clientWidth /

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

421551

increased by0.21%

Lines of code

1942

increased by0.21%

No dependency changes