Favicons, github link, error reporting

This commit is contained in:
James Hawkins 2021-07-14 00:17:34 +01:00
parent a4125f44a5
commit 21a4f095c4
16 changed files with 101 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

9
public/browserconfig.xml Normal file
View File

@ -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>

BIN
public/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 B

BIN
public/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 935 B

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -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>

View File

@ -20,6 +20,6 @@
],
"start_url": ".",
"display": "standalone",
"theme_color": "#191c24",
"background_color": "#0c0e14"
"theme_color": "#E880C5",
"background_color": "#16171D"
}

BIN
public/mstile-150x150.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 840 B

19
public/site.webmanifest Normal file
View File

@ -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"
}

View File

@ -1,3 +1,10 @@
.videoElement {
width: 100%;
background-color: #111117;
border-radius: 5px;
}
.videoElementText {
color: white;
margin: 0;
}

View File

@ -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 />
)

View File

@ -15,3 +15,28 @@
.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);
}

View File

@ -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>
)
}