lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

added lots of css to style site.

Browse Source 
removed mainbody class and did switching stuff in app.js
This commit is contained in:
lukas 2020-06-02 22:52:28 +02:00
parent 5f8c491674
commit 53d393fba7
16 changed files with 421 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
api/videoload.php
View File

@ -11,7 +11,7 @@ if (isset($_POST['action'])) {
$query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date ASC, movie_name ASC"; $query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date ASC, movie_name ASC";
if (isset($_POST['tag'])) { if (isset($_POST['tag'])) {
$tag = $_POST['tag']; $tag = $_POST['tag'];
if($_POST['tag'] != "all"){ if ($_POST['tag'] != "all") {
$query = "SELECT movie_id,movie_name FROM videos $query = "SELECT movie_id,movie_name FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id INNER JOIN tags t on vt.tag_id = t.tag_id
@ -28,7 +28,7 @@ if (isset($_POST['action'])) {
echo(json_encode($rows)); echo(json_encode($rows));
break; break;
case "getRandomMovies": case "getRandomMovies":
$query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT ".$_POST['number']; $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT " . $_POST['number'];
$result = $conn->query($query); $result = $conn->query($query);
$rows = array(); $rows = array();
while ($r = mysqli_fetch_assoc($result)) { while ($r = mysqli_fetch_assoc($result)) {
@ -38,13 +38,14 @@ if (isset($_POST['action'])) {
echo(json_encode($rows)); echo(json_encode($rows));
break; break;
case "loadVideo": case "loadVideo":
$query = "SELECT movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'"; $query = "SELECT movie_name,movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
$result = $conn->query($query); $result = $conn->query($query);
$row = $result->fetch_assoc(); $row = $result->fetch_assoc();
$arr = array(); $arr = array();
$arr["thumbnail"] = $row["thumbnail"]; $arr["thumbnail"] = $row["thumbnail"];
$arr["movie_name"] = $row["movie_name"];
$arr["movie_url"] = $row["movie_url"]; $arr["movie_url"] = $row["movie_url"];
$arr["likes"] = $row["likes"]; $arr["likes"] = $row["likes"];
$arr["quality"] = $row["quality"]; $arr["quality"] = $row["quality"];
@ -75,7 +76,6 @@ if (isset($_POST['action'])) {
echo($row["thumbnail"]); echo($row["thumbnail"]);
break; break;
case "getTags": case "getTags":
$movieid = $_POST['movieid']; $movieid = $_POST['movieid'];
@ -104,6 +104,52 @@ if (isset($_POST['action'])) {
echo('{"result":"' . $conn->error . '"}'); echo('{"result":"' . $conn->error . '"}');
} }
break; break;
case "getStartData":
$query = "SELECT COUNT(*) as nr FROM videos";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr = array();
$arr['total'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['tagged'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_name='hd'";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['hd'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_name='fullhd'";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['fullhd'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_name='lowquality'";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['sd'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM tags";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['tags'] = $r['nr'];
echo(json_encode($arr));
break;
} }
} else { } else {
echo('{"data":"error"}'); echo('{"data":"error"}');

30
src/App.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import MainBody from "./MainBody";
import "./css/App.css" import "./css/App.css"
import HomePage from "./HomePage";
import RandomPage from "./RandomPage";
// include bootstraps css // include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -15,6 +16,28 @@ class App extends React.Component {
this.hideVideo = this.hideVideo.bind(this); this.hideVideo = this.hideVideo.bind(this);
} }
videoelement = null;
MainBody() {
let page;
if (this.state.page === "default") {
page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "random") {
page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "video") {
// show videoelement if neccessary
page = this.videoelement;
} else if (this.state.page === "lastpage") {
// return back to last page
page = this.mypage;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);
}
render() { render() {
return ( return (
<div className="App"> <div className="App">
@ -42,8 +65,7 @@ class App extends React.Component {
</li> </li>
</ul> </ul>
</nav> </nav>
<MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page} {this.MainBody()}
videoelement={this.element}/>
</div> </div>
); );
} }
@ -68,7 +90,7 @@ class App extends React.Component {
page: "video" page: "video"
}); });
this.element = element; this.videoelement = element;
} }
hideVideo() { hideVideo() {

79
src/HomePage.js
View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import Preview from "./Preview"; import Preview from "./Preview";
import SideBar from "./SideBar";
import "./css/HomePage.css" import "./css/HomePage.css"
import "./css/DefaultPage.css"
class HomePage extends React.Component { class HomePage extends React.Component {
// stores all available movies // stores all available movies
@ -15,9 +18,10 @@ class HomePage extends React.Component {
loadeditems: [], loadeditems: [],
sideinfo: { sideinfo: {
videonr: null, videonr: null,
fullhdvideonr: null,
hdvideonr: null, hdvideonr: null,
sdvideonr: null, sdvideonr: null,
categorynr: null tagnr: null
}, },
tag: "all" tag: "all"
}; };
@ -27,6 +31,7 @@ class HomePage extends React.Component {
document.addEventListener('scroll', this.trackScrolling); document.addEventListener('scroll', this.trackScrolling);
// initial get of all videos // initial get of all videos
this.fetchVideoData("all"); this.fetchVideoData("all");
this.fetchStartData();
} }
// this function clears all preview elements an reloads gravity with tag // this function clears all preview elements an reloads gravity with tag
@ -41,7 +46,7 @@ class HomePage extends React.Component {
.then((result) => { .then((result) => {
this.data = result; this.data = result;
this.setState({loadeditems: []}); this.setState({loadeditems: []});
this.loadindex=0; this.loadindex = 0;
this.loadPreviewBlock(12); this.loadPreviewBlock(12);
})) }))
.catch(() => { .catch(() => {
@ -49,6 +54,28 @@ class HomePage extends React.Component {
}); });
} }
fetchStartData() {
const updateRequest = new FormData();
updateRequest.append('action', 'getStartData');
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({
sideinfo: {
videonr: result['total'],
fullhdvideonr: result['fullhd'],
hdvideonr: result['hd'],
sdvideonr: result['sd'],
tagnr: result['tags']
}});
}))
.catch(() => {
console.log("no connection to backend");
});
}
componentWillUnmount() { componentWillUnmount() {
this.setState({}); this.setState({});
document.removeEventListener('scroll', this.trackScrolling); document.removeEventListener('scroll', this.trackScrolling);
@ -57,32 +84,26 @@ class HomePage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<div><h1>Home page</h1></div> <div className='pageheader'>
<div className='sideinfo'> <span className='pageheadertitle'>Home Page</span>
Infos: <span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
<div>Total Number of Videos: {this.state.sideinfo.videonr}</div> <hr/>
<div>HD Videos: {this.state.sideinfo.hdvideonr}</div>
<div>SD Videos: {this.state.sideinfo.sdvideonr}</div>
<div>Total Number of Categories: {this.state.sideinfo.categorynr}</div>
<div>default tags:</div>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("fullhd");
}}>FullHd
</button>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("all");
}}>All
</button>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("lowquality");
}}>LowQuality
</button>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("hd");
}}>HD
</button>
</div> </div>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<hr/>
<div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
<hr/>
<div className='sidebartitle'>Default Tags:</div>
<button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
</SideBar>
<div className='maincontent'> <div className='maincontent'>
{this.state.loadeditems.map(elem => ( {this.state.loadeditems.map(elem => (
<Preview <Preview
@ -122,7 +143,9 @@ class HomePage extends React.Component {
} }
trackScrolling = () => { trackScrolling = () => {
if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) { // comparison if current scroll position is on bottom
// 200 stands for bottom offset to trigger load
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
this.loadPreviewBlock(6); this.loadPreviewBlock(6);
} }
} }

32
src/MainBody.js
View File

@ -1,32 +0,0 @@
import React from "react";
import HomePage from "./HomePage";
import RandomPage from "./RandomPage";
class MainBody extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() {
let page;
if (this.props.page === "default") {
page = <HomePage viewbinding={this.props.viewbinding}/>;
this.mypage = page;
} else if (this.props.page === "random"){
page = <RandomPage viewbinding={this.props.viewbinding}/>;
this.mypage = page;
}else if (this.props.page === "video") {
// show videoelement if neccessary
page = this.props.videoelement;
}else if (this.props.page === "lastpage") {
// return back to last page
page = this.mypage;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);
}
}
export default MainBody;

76
src/Player.js
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import "./css/Player.css" import "./css/Player.css"
import {PlyrComponent} from 'plyr-react'; import {PlyrComponent} from 'plyr-react';
import SideBar from "./SideBar";
class Player extends React.Component { class Player extends React.Component {
@ -36,50 +37,38 @@ class Player extends React.Component {
render() { render() {
return ( return (
<div id='videocontainer'> <div id='videocontainer'>
<div className="row"> <div className='pageheader'>
<div className="col-sm-2"> <span className='pageheadertitle'>Watch</span>
<div className="videoleftbanner"> <span className='pageheadersubtitle'>{this.state.movie_name}</span>
<div className="likefield">Likes: {this.state.likes}</div> <hr/>
<div className="likefield">Quality: {this.state.quality}p</div> </div>
<div className="likefield">Length in Minutes: {this.state.length}</div> <SideBar>
</div> <div className='sidebartitle'>Infos:</div>
</div> <hr/>
<div className="col-sm-8"> <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
<div className="videowrapper"> <div className='sidebarinfo'><b> {this.state.quality}p</b> Quality!</div>
<div className='myvideo'> <div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
{this.state.sources ? <PlyrComponent <hr/>
sources={this.state.sources} <div className='sidebartitle'>Tags:</div>
options={this.options}/> : <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
<div>not loaded yet</div>} <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
</div> <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
</div> <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
</div> </SideBar>
<div className="col-sm-2">
<div className="closebutton" onClick={() => { <div className="videowrapper">
this.closebtn() {/* video component is added here */}
}}>Close {this.state.sources ? <PlyrComponent
</div> className='myvideo'
<div className="videorightbanner"></div> sources={this.state.sources}
</div> options={this.options}/> :
</div> <div>not loaded yet</div>}
<div className="row"> <div className='videoactions'>
<div className="col-sm-5"> <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
<button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
</div>
<div className="col-sm-2">
<button className='btn btn-primary' onClick={() => {
this.likebtn()
}}>Like it!
</button>
<button className='btn btn-info' id="tagbutton">Tag it!</button>
</div>
<div className="col-sm-5">
</div> </div>
</div> </div>
<button className="closebutton" onClick={() => this.closebtn()}>Close</button>
</div> </div>
); );
} }
@ -104,6 +93,7 @@ class Player extends React.Component {
], ],
poster: result.thumbnail poster: result.thumbnail
}, },
movie_name: result.movie_name,
likes: result.likes, likes: result.likes,
quality: result.quality, quality: result.quality,
length: result.length length: result.length
@ -131,8 +121,6 @@ class Player extends React.Component {
} }
closebtn() { closebtn() {
// todo go back to correct page here!
// have a catch to <Route>
this.props.viewbinding.hideVideo(); this.props.viewbinding.hideVideo();
} }
} }

53
src/RandomPage.js
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import Preview from "./Preview"; import Preview from "./Preview";
import "./css/RandomPage.css" import "./css/RandomPage.css"
import SideBar from "./SideBar";
class RandomPage extends React.Component { class RandomPage extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -16,31 +17,35 @@ class RandomPage extends React.Component {
} }
render() { render() {
return (<div> return (
<div><h1>Random Videos</h1></div> <div>
<div className='sideinfo'> <div className='pageheader'>
todo here. <span className='pageheadertitle'>Random Videos</span>
</div> <span className='pageheadersubtitle'>6pc</span>
<div className='maincontent'> <hr/>
{this.state.videos.map(elem => ( </div>
<Preview <SideBar>
key={elem.movie_id} <div className='sidebartitle'>Visible Tags:</div>
name={elem.movie_name} <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
movie_id={elem.movie_id} <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
viewbinding={this.props.viewbinding}/> <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
))} <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
</div> </SideBar>
<div className='rightinfo'>
right
</div>
<div className='Shufflebutton'>
<button onClick={() => {
this.shuffleclick()
}} className='btn btn-success'>Shuffle
</button>
</div>
</div>); <div className='maincontent'>
{this.state.videos.map(elem => (
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
<div className='Shufflebutton'>
<button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
</div>
</div>
</div>
);
} }
shuffleclick() { shuffleclick() {

12
src/SideBar.js Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import "./css/SideBar.css"
class SideBar extends React.Component {
render() {
return (<div className='sideinfo'>
{this.props.children}
</div>);
}
}
export default SideBar;

13
src/css/App.css
View File

@ -1,11 +1,12 @@
.nav-item{ .nav-item {
cursor: pointer; cursor: pointer;
} }
.nav-link{
color: rgba(255,255,255,.5); .nav-link {
color: rgba(255, 255, 255, .5);
font-weight: bold; font-weight: bold;
} }
.nav-link:hover{ .nav-link:hover {
color: rgba(255,255,255,1); color: rgba(255, 255, 255, 1);
} }

18
src/css/DefaultPage.css Normal file
View File

@ -0,0 +1,18 @@
.pageheader {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 22%;
padding-right: 12%;
}
.pageheadertitle {
font-size: 40pt;
font-weight: bold;
}
.pageheadersubtitle {
margin-left: 20px;
font-size: 23pt;
opacity: 0.6;
}

11
src/css/HomePage.css
View File

@ -1,14 +1,9 @@
.sideinfo{ .maincontent {
width: 20%;
float: left;
}
.maincontent{
float: left; float: left;
width: 70%; width: 70%;
} }
.rightinfo{ .rightinfo {
float: left; float: left;
width: 10%; width: 10%;
} }

37
src/css/Player.css
View File

@ -1,26 +1,14 @@
.closebutton { .closebutton {
color: white; color: white;
height: 35px; border: none;
width: 90px; border-radius: 10px;
margin-right: 80px; padding: 5px 15px 5px 15px;
float: right;
background-color: #FF0000; background-color: #FF0000;
cursor: pointer; margin-top: 25px;
margin-left: 25px;
} }
.myvideo { .likefield {
width: 100%;
float: left;
}
.videoleftbanner{
float: left;
width: 100%;
height: 100%;
background-color: #e5e5ff;
border-radius: 40px;
}
.likefield{
margin-top: 15px; margin-top: 15px;
margin-left: 15px; margin-left: 15px;
margin-right: 15px; margin-right: 15px;
@ -29,5 +17,16 @@
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
color: white; color: white;
}
.videowrapper {
margin-left: 20px;
display: block;
float: left;
width: 60%;
margin-top: 25px;
}
.videoactions{
margin-top: 15px;
} }

16
src/css/Preview.css
View File

@ -1,7 +1,8 @@
.previewtitle { .previewtitle {
height: 10%; height: 10%;
color: white; color: #3d3d3d;
text-align: center; text-align: center;
font-weight: bold;
} }
.previewpic { .previewpic {
@ -17,8 +18,10 @@
height: 300px; height: 300px;
width: 30%; width: 30%;
float: left; float: left;
margin: 1%; margin-left: 25px;
background-color: #7F7F7F; margin-top: 25px;
/*background-color: #7F7F7F;*/
background-color: #a8c3ff;
cursor: pointer; cursor: pointer;
opacity: 0.9; opacity: 0.9;
border: 10px; border: 10px;
@ -29,10 +32,3 @@
opacity: 1; opacity: 1;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
/* todo check if neccessary*/
.previewcontainer {
margin-left: 10%;
width: 80%;
margin-right: 10%;
}

21
src/css/RandomPage.css
View File

@ -1,4 +1,21 @@
.Shufflebutton{ .Shufflebutton {
width: 100%; width: 100%;
align-content: center; align-content: center;
} }
.btnshuffle{
background-color: #39a945;
color: white;
margin-top: 20px;
margin-left: 45%;
border: none;
border-radius: 10px;
padding: 15px 25px 15px 25px;
font-weight: bold;
font-size: larger;
}
.btnshuffle:focus{
outline: none;
}

43
src/css/SideBar.css Normal file
View File

@ -0,0 +1,43 @@
.sideinfo {
width: 20%;
float: left;
padding: 20px;
margin-top: 25px;
margin-left: 15px;
background-color: #b4c7fe;
border-radius: 20px;
border: 2px #3574fe solid;
}
.tagbtn {
color: white;
margin: 10px;
background-color: #3574fe;
border: none;
border-radius: 10px;
padding: 5px 15px 5px 15px;
/*font-weight: bold;*/
display: block;
}
.tagbtn:focus {
background-color: #004eff;
outline: none;
}
.tagbtn:hover {
background-color: #004eff;
}
.sidebartitle {
font-weight: bold;
font-size: larger;
}
.sidebarinfo {
margin-top: 5px;
background-color: #8ca3fc;
border-radius: 5px;
padding: 2px 10px 2px 15px;
width: 60%;
}

8
src/index.js
View File

@ -5,10 +5,10 @@ import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App/>
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change

206
src/serviceWorker.js
View File

@ -11,131 +11,131 @@
// opt-in, read https://bit.ly/CRA-PWA // opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean( const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4. // 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
) )
); );
export function register(config) { export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW. // The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) { if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin // Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to // from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374 // serve assets; see https://github.com/facebook/create-react-app/issues/2374
return; return;
} }
window.addEventListener('load', () => { window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) { if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not. // This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config); checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the // Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation. // service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
'This web app is being served cache-first by a service ' + 'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA' 'worker. To learn more, visit https://bit.ly/CRA-PWA'
); );
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
}); });
} else { }
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
} }
function registerValidSW(swUrl, config) { function registerValidSW(swUrl, config) {
navigator.serviceWorker navigator.serviceWorker
.register(swUrl) .register(swUrl)
.then(registration => { .then(registration => {
registration.onupdatefound = () => { registration.onupdatefound = () => {
const installingWorker = registration.installing; const installingWorker = registration.installing;
if (installingWorker == null) { if (installingWorker == null) {
return; return;
} }
installingWorker.onstatechange = () => { installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') { if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched, // At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older // but the previous service worker will still serve the older
// content until all client tabs are closed. // content until all client tabs are closed.
console.log( console.log(
'New content is available and will be used when all ' + 'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
); );
// Execute callback // Execute callback
if (config && config.onUpdate) { if (config && config.onUpdate) {
config.onUpdate(registration); config.onUpdate(registration);
} }
} else { } else {
// At this point, everything has been precached. // At this point, everything has been precached.
// It's the perfect time to display a // It's the perfect time to display a
// "Content is cached for offline use." message. // "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); console.log('Content is cached for offline use.');
// Execute callback // Execute callback
if (config && config.onSuccess) { if (config && config.onSuccess) {
config.onSuccess(registration); config.onSuccess(registration);
} }
} }
} }
}; };
}; };
}) })
.catch(error => { .catch(error => {
console.error('Error during service worker registration:', error); console.error('Error during service worker registration:', error);
}); });
} }
function checkValidServiceWorker(swUrl, config) { function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page. // Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, { fetch(swUrl, {
headers: { 'Service-Worker': 'script' }, headers: {'Service-Worker': 'script'},
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
}) })
.catch(() => { .then(response => {
console.log( // Ensure service worker exists, and that we really are getting a JS file.
'No internet connection found. App is running in offline mode.' const contentType = response.headers.get('content-type');
); if (
}); response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
} }
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready navigator.serviceWorker.ready
.then(registration => { .then(registration => {
registration.unregister(); registration.unregister();
}) })
.catch(error => { .catch(error => {
console.error(error.message); console.error(error.message);
}); });
} }
} }