Favicons, github link, error reporting

4 years ago · 21a4f095c4
16 changed files with 101 additions and 7 deletions
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/browserconfig.xml
+++ b/public/browserconfig.xml
@ -0,0 +1,9 @@
				@@ -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>
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -4,13 +4,19 @@
				@@ -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>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -20,6 +20,6 @@
				@@ -20,6 +20,6 @@
  ],
  "start_url": ".",
  "display": "standalone",
-  "theme_color": "#191c24",
-  "background_color": "#0c0e14"
+  "theme_color": "#E880C5",
+  "background_color": "#16171D"
 }
--- a/public/mstile-150x150.png
+++ b/public/mstile-150x150.png
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@ -0,0 +1,18 @@
				@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="528.000000pt" height="528.000000pt" viewBox="0 0 528.000000 528.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,528.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M430 5266 c-152 -33 -307 -156 -373 -297 -20 -42 -41 -105 -47 -140
+-8 -45 -10 -697 -8 -2229 3 -2105 4 -2166 22 -2215 77 -200 206 -319 400 -369
+53 -14 305 -16 2210 -16 2367 0 2211 -4 2346 62 136 66 261 231 289 383 8 42
+11 686 11 2200 0 2355 4 2200 -62 2335 -65 135 -231 261 -378 289 -85 16
+-4338 13 -4410 -3z"/>
+</g>
+</svg>
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@ -0,0 +1,19 @@
				@@ -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"
+}
--- a/src/components/VideoElement.css
+++ b/src/components/VideoElement.css
@ -1,3 +1,10 @@
				@@ -1,3 +1,10 @@
 .videoElement {
    width: 100%;
+    background-color: #111117;
+    border-radius: 5px;
+}
+
+.videoElementText {
+    color: white;
+    margin: 0;
 }
--- a/src/components/VideoElement.js
+++ b/src/components/VideoElement.js
@ -5,8 +5,10 @@ import './VideoElement.css'
				@@ -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 }) {
				@@ -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 />
    )
--- a/src/views/Search.css
+++ b/src/views/Search.css
@ -14,4 +14,29 @@
				@@ -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);
+}
--- a/src/views/Search.js
+++ b/src/views/Search.js
@ -3,6 +3,7 @@ import { InputBox } from '../components/InputBox'
				@@ -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() {
				@@ -91,6 +92,9 @@ export function SearchView() {
                    }}/>
                ))}
            </Card>
+            <div className="topRightCredits">
+                <a href="https://github.com/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow/></a>
+            </div>
        </div>
    )
 }