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 @@
 <?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 @@
    <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 @@
  ],
  "start_url": ".",
  "display": "standalone",
-  "theme_color": "#191c24",
+  "theme_color": "#E880C5",
-  "background_color": "#0c0e14"
+  "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 @@
 <?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 @@
 {
    "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 @@
 .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'
 // 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 />
    )
--- 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);
 }
--- 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="https://github.com/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow/></a>
            </div>
        </div>
    )
 }