patch the timetooltip and mousetimedisplay, style timeline tooltip

Joystream · Jul 20, 2021 · 1b2bb3f · 1b2bb3f
1 parent 2a8605d
commit 1b2bb3f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/patches/video.js+7.13.3.patch b/patches/video.js+7.13.3.patch
@@ -1,8 +1,33 @@
 diff --git a/node_modules/video.js/dist/video.es.js b/node_modules/video.js/dist/video.es.js
-index a07aa77..3f7bc30 100644
+index a07aa77..142743f 100644
 --- a/node_modules/video.js/dist/video.es.js
 +++ b/node_modules/video.js/dist/video.es.js
-@@ -13959,7 +13959,7 @@ var ProgressControl = /*#__PURE__*/function (_Component) {
+@@ -13107,12 +13107,12 @@ var TimeTooltip = /*#__PURE__*/function (_Component) {
+     // `SeekBar` before hitting the `seekBarPoint`
+
+
+-    var spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx; // This is the space right of the `seekBarPoint` available within the bounds
++    var spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx - 24; // This is the space right of the `seekBarPoint` available within the bounds
+     // of the player. We calculate the number of pixels from the `seekBarPoint`
+     // to the right edge of the `SeekBar` and add to that any gap between the
+     // right edge of the `SeekBar` and the player.
+
+-    var spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right); // This is the number of pixels by which the tooltip will need to be pulled
++    var spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right) - 24; // This is the number of pixels by which the tooltip will need to be pulled
+     // further to the right to center it over the `seekBarPoint`.
+
+     var pullTooltipBy = tooltipRect.width / 2; // Adjust the `pullTooltipBy` distance to the left or right depending on
+@@ -13349,7 +13349,8 @@ var MouseTimeDisplay = /*#__PURE__*/function (_Component) {
+
+     var time = seekBarPoint * this.player_.duration();
+     this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, function () {
+-      _this2.el_.style.left = seekBarRect.width * seekBarPoint + "px";
++      _this2.el_.style.right = seekBarRect.width * (1 -seekBarPoint) + "px";
++      _this2.el_.style.width = seekBarRect.width * seekBarPoint + "px";
+     });
+   };
+
+@@ -13959,7 +13960,7 @@ var ProgressControl = /*#__PURE__*/function (_Component) {
      }
 
      var seekBarEl = seekBar.el();

diff --git a/src/shared/components/VideoPlayer/VideoPlayer.style.tsx b/src/shared/components/VideoPlayer/VideoPlayer.style.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
 
 import { SvgPlayerSoundOff } from '@/shared/icons'
 
-import { colors, media, sizes, transitions, zIndex } from '../../theme'
+import { colors, media, sizes, transitions, typography, zIndex } from '../../theme'
 import { Text } from '../Text'
 
 type ContainerProps = {
@@ -353,6 +353,19 @@ export const Container = styled.div<ContainerProps>`
 
         .vjs-slider-bar {
           background-color: ${colors.blue[500]};
+          z-index: 1;
+        }
+
+        .vjs-mouse-display {
+          background-color: ${colors.transparentWhite[32]};
+
+          .vjs-time-tooltip {
+            background: none;
+            font-family: ${typography.fonts.base};
+            font-size: 0.875em !important;
+            top: -3em;
+            font-feature-settings: 'tnum' on, 'lnum' on;
+          }
         }
 
         /* ::before is progress timeline thumb */