Favicons, github link, error reporting

TGlide · Jul 13, 2021 · 21a4f09 · 21a4f09
1 parent a4125f4
commit 21a4f09
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 7 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+ <msapplication>
+ <tile>
+ <square150x150logo src="/mstile-150x150.png"/>
+ <TileColor>#da532c</TileColor>
+ </tile>
+ </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,13 +4,19 @@
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
  <meta
  name="description"
  content="because watching movies legally is boring"
  />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+ <link rel="manifest" href="/site.webmanifest">
+ <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#E880C5">
+ <meta name="msapplication-TileColor" content="#E880C5">
+ <meta name="theme-color" content="#E880C5">
+
  <title>movie-web</title>
  </head>
  <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -20,6 +20,6 @@
  ],
  "start_url": ".",
  "display": "standalone",
- "theme_color": "#191c24",
- "background_color": "#0c0e14"
+ "theme_color": "#E880C5",
+ "background_color": "#16171D"
 }
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+ "name": "",
+ "short_name": "",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#E880C5",
+ "background_color": "#16171D",
+ "display": "standalone"
+}
diff --git a/src/components/VideoElement.css b/src/components/VideoElement.css
@@ -1,3 +1,10 @@
 .videoElement {
  width: 100%;
+ background-color: #111117;
+ border-radius: 5px;
+}
+
+.videoElementText {
+ color: white;
+ margin: 0;
 }
diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
@@ -5,8 +5,10 @@ import './VideoElement.css'
 // streamUrl: string
 export function VideoElement({ streamUrl }) {
  const videoRef = React.useRef(null);
+ const [error, setError] = React.useState(false);
 
  React.useEffect(() => {
+ setError(false)
  if (!videoRef || !videoRef.current) return;
 
  const hls = new Hls();
@@ -15,13 +17,17 @@ export function VideoElement({ streamUrl }) {
  videoRef.current.src = streamUrl;
  return;
  } else if (!Hls.isSupported()) {
- return; // TODO show error
+ setError(true)
+ return;
  }
 
  hls.attachMedia(videoRef.current);
  hls.loadSource(streamUrl);
  }, [videoRef, streamUrl])
 
+ if (error)
+ return (<p className="videoElementText">Your browser is not supported</p>)
+
  return (
  <video className="videoElement" ref={videoRef} controls autoPlay />
  )

diff --git a/src/views/Search.css b/src/views/Search.css
@@ -14,4 +14,29 @@
 
 .cardView > div:first-child {
  margin-top: 0;
-}
+}
+
+.topRightCredits {
+ position: fixed;
+ right: 1rem;
+ top: 1rem;
+ margin-top: 0 !important;
+}
+
+.topRightCredits a, .topRightCredits a:visited {
+ color: #E880C5;
+ text-decoration: none;
+ margin: 0;
+}
+.topRightCredits a:hover, .topRightCredits a:active {
+ color: #f19fd6;
+ text-decoration: none;
+}
+
+.topRightCredits a .arrow {
+ transform: translateY(.1rem);
+}
+
+.topRightCredits a:hover .arrow {
+ transform: translateY(.1rem) translateX(.2rem);
+}
diff --git a/src/views/Search.js b/src/views/Search.js
@@ -3,6 +3,7 @@ import { InputBox } from '../components/InputBox'
 import { Title } from '../components/Title'
 import { Card } from '../components/Card'
 import { MovieRow } from '../components/MovieRow'
+import { Arrow } from '../components/Arrow'
 import { Progress } from '../components/Progress'
 import { findMovie, getStreamUrl } from '../lib/lookMovie'
 import { useMovie } from '../hooks/useMovie';
@@ -91,6 +92,9 @@ export function SearchView() {
  }}/>
  ))}
  </Card>
+ <div className="topRightCredits">
+ <a href="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/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow/></a>
+ </div>
  </div>
  )
 }