Fix Firefox styling for slider and player alignment

Lillifee · Feb 14, 2023 · 297c2b1 · 297c2b1
1 parent d68602d
commit 297c2b1
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/src/site/components/stream/BroadwayPlayer.tsx b/src/site/components/stream/BroadwayPlayer.tsx
@@ -16,6 +16,7 @@ const Container = styled.div`
 const VideoContainer = styled.div`
   display: flex;
   margin: 0 auto;
+  justify-content: center;
 
   > canvas {
     max-width: 100%;

diff --git a/src/site/components/stream/JMuxerPlayer.tsx b/src/site/components/stream/JMuxerPlayer.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+// import { abbreviateNumber, roundToSignificant } from '../../../shared/helperFunctions.js';
 import { BlurOverlay } from './Common.js';
 import { createPlayerOptions, player, Player, PlayerOptions } from './player.js';
 import { createInitialPlayerStats, PlayerStats } from './stats.js';
@@ -16,6 +17,7 @@ const Container = styled.div`
 const VideoContainer = styled.div`
   display: flex;
   margin: 0 auto;
+  justify-content: center;
 `;
 
 const Video = styled.video`
@@ -37,7 +39,7 @@ const jMuxerPlayer = (playerOptions: PlayerOptions): Player => {
  * Player hook
  * Creates a JMuxer player instance and append it to the passed container
  *
- * @param {string} url websocket url without (e.g. 192.168.1.10:8081)
+ * @param {string} url
  */
 const usePlayer = (url: string) => {
   const [stats, setStats] = React.useState<PlayerStats>(createInitialPlayerStats());
@@ -74,9 +76,8 @@ export const JMuxerPlayer: React.FC<PlayerProps> = ({ loading }) => {
         $blur={loading || !stats.streamRunning || !stats.playerRunning || stats.droppingFrames}
       >
         {/* <div>dropped: {stats.totalDroppedFrames}</div>
-        <div>frames: {stats.framesPerCycle}</div>
-        <div>avgFps: {stats.avgFps}</div>
-        <div>avgSize: {abbreviateNumber('bit/s')(roundToSignificant(stats.avgSize, 2))}</div>
+        <div>frames per second: {stats.avgFps}</div>
+        <div>average size: {abbreviateNumber('bit/s')(roundToSignificant(stats.avgSize, 2))}</div>
         {loading && <div>loading</div>}
         {!stats.playerRunning && <div>player not running</div>}
         {!stats.streamRunning && <div>stream not running</div>}

diff --git a/src/site/components/stream/MJPEGPlayer.tsx b/src/site/components/stream/MJPEGPlayer.tsx
@@ -13,6 +13,7 @@ const Container = styled.div`
 const VideoContainer = styled.div`
   display: flex;
   margin: 0 auto;
+  justify-content: center;
 `;
 
 const Image = styled.img`

diff --git a/src/site/components/styled/Slider.tsx b/src/site/components/styled/Slider.tsx
@@ -1,10 +1,30 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export interface SliderProps {
   $unset?: boolean;
 }
 
+const trackCss = css<SliderProps>`
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: ${(props) => props.theme.Background};
+  border-radius: 3px;
+`;
+
+const thumbCss = css<SliderProps>`
+  cursor: pointer;
+  pointer-events: auto;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  background: ${({ $unset, theme }) => ($unset ? theme.Background : theme.PrimaryBackground)};
+  border: 1px solid ${(props) => props.theme.Border};
+  border-radius: 15px;
+  margin-top: -7px;
+`;
+
 const SliderStyled = styled.input<SliderProps>`
   flex: 1;
   min-height: 25px;
@@ -16,24 +36,19 @@ const SliderStyled = styled.input<SliderProps>`
   @media only screen and (max-width: 1000px) {
     pointer-events: none;
   }
+
   &::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    cursor: pointer;
-    background: ${(props) => props.theme.Background};
-    border-radius: 3px;
+    ${trackCss}
+  }
+  &::-moz-range-track {
+    ${trackCss}
   }
 
   &::-webkit-slider-thumb {
-    cursor: pointer;
-    pointer-events: auto;
-    appearance: none;
-    width: 22px;
-    height: 22px;
-    background: ${({ $unset, theme }) => ($unset ? theme.Background : theme.PrimaryBackground)};
-    border: 1px solid ${(props) => props.theme.Border};
-    border-radius: 15px;
-    margin-top: -7px;
+    ${thumbCss}
+  }
+  &::-moz-range-thumb {
+    ${thumbCss}
   }
 
   &:disabled {