chore(player): remove styled-components & update style

The major version of styled-components has been lagging behind and to avoid further issues with React compatibility, it's no longer required to have this as a peer dependency. Examples are fine using inline style, and in other cases the React `style` tag is used instead. Additionally, the stats section is restyled to be much more simple.
AxisCommunications · Jan 15, 2025 · e6c2716 · e6c2716
1 parent d9d9253
commit e6c2716
Show file tree

Hide file tree

Showing 47 changed files with 722 additions and 1,253 deletions.
diff --git a/README.md b/README.md
@@ -178,7 +178,7 @@ If you want to import the player as a React component into your own code, or use
 parts of the player, you'll need to install the package as a dependency.
 You will also need to install a number of peer dependencies
 such as [luxon](https://github.com/moment/luxon), which we use for date and time purposes,
-`react`/`react-dom`, `styled-components`.
+`react`/`react-dom`.
 You can find an example of this under `example-player-react`, e.g.:
 
 ```js

diff --git a/example-overlay-react/App.jsx b/example-overlay-react/App.jsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 
-import styled from 'styled-components'
-
 import {
   Foundation,
   Liner,
@@ -25,13 +23,6 @@ const MIDDLE_AREA = [
   [0.5, -0.5], // bottom right coordinate
 ]
 
-const Layers = styled.div`
-  position: relative;
-  width: 80vw;
-  height: 80vh;
-  border: 1px solid deepskyblue;
-`
-
 const App = () => {
   const [textPos1, setTextPos1] = useState([-1, 0.8])
   const [textPos2, setTextPos2] = useState([-0.4, -0.5])
@@ -54,7 +45,12 @@ const App = () => {
       <p>
         To get started, edit <code>src/App.tsx</code> and save to reload.
       </p>
-      <Layers>
+      <div style={{
+        position: 'relative',
+        width: '80vw',
+        height: '80vh',
+        border: '1px solid deepskyblue',
+      }}>
         <Foundation
           userBasis={USER_BASIS}
           style={{
@@ -111,7 +107,7 @@ const App = () => {
             interact with the SVGs below me
           </Text>
         </Foundation>
-      </Layers>
+      </div>
     </div>
   )
 }

diff --git a/example-overlay-react/Circle.jsx b/example-overlay-react/Circle.jsx
@@ -6,19 +6,12 @@ import React, {
   useState,
 } from 'react'
 
-import styled from 'styled-components'
-
 import {
   FoundationContext,
   LinerContext,
   useDraggable,
 } from 'media-stream-library/overlay'
 
-const SvgCircle = styled.circle`
-  fill: rgb(0.5, 0.5, 0.5, 0.2);
-  stroke: grey;
-`
-
 /*
  * Circle
  *
@@ -36,7 +29,7 @@ export const Circle = forwardRef(
 
     const [cx, cy] = toSvgBasis(pos)
 
-    return <SvgCircle cx={cx} cy={cy} ref={ref} {...circleProps} />
+    return <circle style={{ fill: 'rgb(0.5,0.5,0.5,0.2)', stroke: 'grey' }} cx={cx} cy={cy} ref={ref} {...circleProps} />
   }
 )
 
@@ -99,7 +92,8 @@ export const DraggableCircle = forwardRef(({ pos, onChangePos, ...circleProps },
   const [cx, cy] = svgPos
 
   return (
-    <SvgCircle
+    <circle
+      style={{ fill: 'rgb(0.5,0.5,0.5,0.2)', stroke: 'grey' }}
       name="circle"
       cx={cx}
       cy={cy}
@@ -165,7 +159,8 @@ export const FastDraggableCircle = ({
   const [cx, cy] = toSvgBasis(pos)
 
   return (
-    <SvgCircle
+    <circle
+      style={{ fill: 'rgb(0.5,0.5,0.5,0.2)', stroke: 'grey' }}
       ref={circleRef}
       name="circle"
       cx={cx}

diff --git a/example-overlay-react/Polygon.jsx b/example-overlay-react/Polygon.jsx
@@ -1,31 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react'
 
-import styled from 'styled-components'
-
 import {
   FoundationContext,
   LinerContext,
   useDraggable,
 } from 'media-stream-library/overlay'
 
-const SvgCircleCorner = styled.circle`
-  fill: rgb(0.5, 0.5, 0.5);
-  stroke: grey;
-`
-
-const SvgCircleHandle = styled.circle`
-  fill: rgb(0.5, 0.5, 0.5, 0);
-
-  &:hover {
-    fill: rgb(0.5, 0.5, 0.5, 0.6);
-  }
-`
-
-const SvgPolygon = styled.polygon`
-  fill: rgb(0.5, 0.5, 0.5, 0.2);
-  stroke: grey;
-`
-
 export const Polygon = ({ pos, onChangePos }) => {
   const { toSvgBasis, toUserBasis } = useContext(FoundationContext)
   const { clampCoord, clampCoordArray } = useContext(LinerContext)
@@ -86,15 +66,16 @@ export const Polygon = ({ pos, onChangePos }) => {
 
   return (
     <g name="g" onPointerDown={startDrag}>
-      <SvgPolygon points={svgPos.map(([x, y]) => `${x},${y}`).join(' ')} />
+      <polygon style={{ fill: 'rgb(0.5, 0.5, 0.5, 0.2)', stroke: 'grey' }} points={svgPos.map(([x, y]) => `${x},${y}`).join(' ')} />
       {svgPos.map(([x, y], index) => {
         // The visible corners
-        return <SvgCircleCorner key={index} r={3} cx={x} cy={y} />
+        return <circle style={{ fill: 'rgb(0.5, 0.5, 0.5)', stroke: 'grey' }} key={index} r={3} cx={x} cy={y} />
       })}
       {svgPos.map(([x, y], index) => {
         // The invisible handles
         return (
-          <SvgCircleHandle
+          <circle
+            style={{ fill: 'rgb(0.5, 0.5, 0.5, 0)' }}
             key={index}
             name={`p${index}`}
             r={5}

diff --git a/example-overlay-react/Text.jsx b/example-overlay-react/Text.jsx
@@ -1,17 +1,12 @@
 import React, { useContext, useEffect, useRef } from 'react'
 
-import styled from 'styled-components'
 
 import {
   FoundationContext,
   LinerContext,
   useDraggable,
 } from 'media-stream-library/overlay'
 
-const SvgText = styled.text`
-  user-select: none;
-`
-
 export const Text = ({
   x: userX,
   y: userY,
@@ -62,7 +57,7 @@ export const Text = ({
   const [x, y] = toSvgBasis([userX, userY])
 
   return (
-    <SvgText
+    <text style={{ userSelect: 'none' }}
       name="text"
       ref={textRef}
       x={x}
@@ -71,6 +66,6 @@ export const Text = ({
       onPointerDown={startDragging}
     >
       {children}
-    </SvgText>
+    </text>
   )
 }
diff --git a/example-overlay-react/package.json b/example-overlay-react/package.json
@@ -2,16 +2,12 @@
   "private": true,
   "dependencies": {
     "media-stream-library": "workspace:^",
-    "pepjs": "0.5.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "styled-components": "5.3.11"
+    "pepjs": "^0.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
-    "@types/styled-components": "5.1.34",
-    "@vitejs/plugin-react": "4.3.4",
-    "vite": "6.0.7"
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7"
   }
 }
diff --git a/example-player-react/App.jsx b/example-player-react/App.jsx
@@ -1,38 +1,34 @@
 import React, { useCallback, useState } from 'react'
 
-import styled, { createGlobalStyle } from 'styled-components'
-
 import { BasicStream } from './BasicStream'
 import { MultiStream } from './MultiStream'
 import { SingleStream } from './SingleStream'
 
-const GlobalStyle = createGlobalStyle`
-  body {
-    margin: 0;
-    font-family: sans-serif;
-  }
-`
-
-const AppContainer = styled.div`
+const style = `
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+.appContainer {
   width: 100vw;
   height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-`
-
-const ButtonContainer = styled.div`
+}
+.buttonContainer {
   margin: 8px;
   text-align: center;
+  & button {
+    padding: 8px 12px;
+    margin: 4px;
+    background-color: lightpink;
+    &.selected {
+      background-color: lightgreen;
+    }
+  }
+}
 `
-
-const Button = styled.button`
-  padding: 8px 12px;
-  margin: 4px;
-  background-color: ${({ selected }) =>
-    selected ? 'lightgreen' : 'lightpink'};
-`
-
 const LOCALSTORAGE_KEY = 'media-stream-player-example'
 
 export const App = () => {
@@ -55,23 +51,25 @@ export const App = () => {
   }, [setState])
 
   return (
-    <AppContainer>
-      <GlobalStyle />
-      <h1>Media Stream Player</h1>
-      <ButtonContainer>
-        <Button onClick={single} selected={state === 'single'}>
-          Single stream (with controls)
-        </Button>
-        <Button onClick={basic} selected={state === 'basic'}>
-          Single stream (basic)
-        </Button>
-        <Button onClick={multi} selected={state === 'multi'}>
-          Multi stream
-        </Button>
-      </ButtonContainer>
-      {state === 'single' ? <SingleStream /> : null}
-      {state === 'basic' ? <BasicStream /> : null}
-      {state === 'multi' ? <MultiStream /> : null}
-    </AppContainer>
+    <>
+      <style>{style}</style>
+      <div className='appContainer'>
+        <h1>Media Stream Player</h1>
+        <div className='buttonContainer'>
+          <button onClick={single} className={state === 'single' && 'selected'}>
+            Single stream (with controls)
+          </button>
+          <button onClick={basic} className={state === 'basic' && 'selected'}>
+            Single stream (basic)
+          </button>
+          <button onClick={multi} className={state === 'multi' && 'selected'}>
+            Multi stream
+          </button>
+        </div>
+        {state === 'single' ? <SingleStream /> : null}
+        {state === 'basic' ? <BasicStream /> : null}
+        {state === 'multi' ? <MultiStream /> : null}
+      </div>
+    </>
   )
 }
diff --git a/example-player-react/MultiStream.jsx b/example-player-react/MultiStream.jsx
@@ -1,25 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
-import styled from 'styled-components'
-
 import { Player } from 'media-stream-library/player'
 
-const MediaPlayer = styled(Player)`
-  max-width: 400px;
-  max-height: 300px;
-  margin: 8px;
-`
-
-const MediaPlayerContainer = styled.div`
-  width: 400px;
-  height: 300px;
-  margin: 8px;
-`
-
-const Centered = styled.div`
-  text-align: center;
-`
-
 // force auth
 const authorize = async (host) => {
   // Force a login by fetching usergroup
@@ -73,21 +55,22 @@ export const MultiStream = () => {
       {state.length > 0 ? (
         state.map((device) => {
           return device.authorized ? (
-            <MediaPlayerContainer key={device.hostname}>
-              <Centered>{device.hostname}</Centered>
-              <MediaPlayer
+            <div style={{ width: '400px', height: '300px', margin: '8px', }} key={device.hostname}>
+              <div style={{ textAlign: 'center' }}>{device.hostname}</div>
+              <Player
+                style={{ maxWidth: '400px', maxHeight: '300px', margin: '8px', }}
                 hostname={device.hostname}
                 initialFormat="JPEG"
                 autoPlay
                 autoRetry
                 vapixParams={{ resolution: '800x600' }}
               />
-            </MediaPlayerContainer>
+            </div>
           ) : (
-            <MediaPlayerContainer key={device.hostname}>
+            <div style={{ width: '400px', height: '300px', margin: '8px', }} key={device.hostname}>
               <Centered>{device.hostname}</Centered>
               <Centered>Not authorized</Centered>
-            </MediaPlayerContainer>
+            </div>
           )
         })
       ) : (

diff --git a/example-player-react/package.json b/example-player-react/package.json
@@ -1,12 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@vitejs/plugin-react": "4.3.4",
-    "luxon": "3.5.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "luxon": "^3.5.0",
     "media-stream-library": "workspace:^",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "styled-components": "5.3.11",
-    "vite": "6.0.7"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^6.0.7"
   }
 }