@eluvio/elv-player-js 2.1.4 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -108,6 +108,19 @@
108
108
  opacity: 1;
109
109
  }
110
110
 
111
+ &__time {
112
+ background: rgba(0, 0, 0, 50%);
113
+ border-radius: 5px;
114
+ bottom: 5px;
115
+ color: white;
116
+ display: block;
117
+ font-size: 14px;
118
+ padding: 5px 10px;
119
+ position: absolute;
120
+ right: 5px;
121
+ z-index: 10;
122
+ }
123
+
111
124
  img {
112
125
  border-radius: 5px;
113
126
  height: auto;
@@ -2,7 +2,7 @@ import CommonStyles from "../static/stylesheets/common.module.scss";
2
2
 
3
3
  // eslint-disable-next-line no-unused-vars
4
4
  import React, {createRef, useEffect, useState} from "react";
5
- import {ACTIONS, SeekSliderKeyDown, VolumeSliderKeydown} from "./Common.js";
5
+ import {ACTIONS, SeekSliderKeyDown, Time, VolumeSliderKeydown} from "./Common.js";
6
6
  import {ObserveVideoBuffer, ObserveVideoTime, RegisterModal} from "./Observers.js";
7
7
  import * as Icons from "../static/icons/Icons.js";
8
8
  import {IconButton} from "./WebControls";
@@ -95,6 +95,7 @@ const Thumbnail = ({player, time, progress, videoState, visible}) => {
95
95
 
96
96
  const thumbnailImage = player.thumbnailHandler.ThumbnailImage(time);
97
97
 
98
+ console.log(videoState, Time(time, videoState.duration))
98
99
  return (
99
100
  <div
100
101
  ref={setRef}
@@ -104,6 +105,9 @@ const Thumbnail = ({player, time, progress, videoState, visible}) => {
104
105
  className={`${CommonStyles["thumbnail"]} ${visible ? CommonStyles["thumbnail--visible"] : ""}`}
105
106
  >
106
107
  <img src={thumbnailImage} alt="Thumbnail" className={CommonStyles["thumbnail__image"]} />
108
+ <div className={CommonStyles["thumbnail__time"]}>
109
+ { Time(time, videoState.duration) }
110
+ </div>
107
111
  </div>
108
112
  );
109
113
  };
@@ -125,7 +129,7 @@ export const SeekBar = ({player, videoState, setRecentUserAction, className=""})
125
129
  const disposeSettingsListener = player.controls.RegisterSettingsListener(() => {
126
130
  if(!player.controls) { return; }
127
131
 
128
- setDVREnabled(player.controls.IsDVREnabled())
132
+ setDVREnabled(player.controls.IsDVREnabled());
129
133
  });
130
134
 
131
135
  return () => {
@@ -150,7 +154,7 @@ export const SeekBar = ({player, videoState, setRecentUserAction, className=""})
150
154
  onBlur={() => setFocused(false)}
151
155
  onMouseMove={event => {
152
156
  const { left, width } = event.currentTarget.getBoundingClientRect();
153
- setHoverPosition(event.clientX / (width - left));
157
+ setHoverPosition((event.clientX - left) / width);
154
158
  }}
155
159
  className={`${className} ${CommonStyles["seek-container"]} ${className}`}
156
160
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eluvio/elv-player-js",
3
- "version": "2.1.4",
3
+ "version": "2.1.6",
4
4
  "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
5
5
  "main": "dist/elv-player-js.es.js",
6
6
  "license": "MIT",