closeModal()}
81 | />
82 |
83 | {/* HEADER NAVIGATION */}
84 |
85 |
86 |
92 |
93 |
Playlist
94 |
95 |
96 | {/* PLAYLIST INFO BOX */}
97 |
98 |
99 |
103 |
104 |
By {state.displayinfo.author}
105 |
{state.displayinfo.name}
106 |
{state.displayinfo.tracks.length} Songs
107 |
108 |
109 |
112 |
113 |
114 | {/* PLAYLIST TRACK LIST */}
115 |
116 |
117 | {state.displaylist.map((track, i) =>
118 |
125 | )}
126 |
127 |
128 |
129 | {/* MINI PLAYER */}
130 |
131 |
132 | );
133 | }
134 |
135 | export default ListMenu;
--------------------------------------------------------------------------------
/src/Views/MainScreen.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useContext } from 'react';
2 | import { usePalette } from 'react-palette';
3 |
4 | import { MusicContext } from '../Contexts/MusicContext';
5 |
6 | import Miniplayer from '../Components/Miniplayer';
7 | import { PlaylistListItem, AddPlaylistListItem } from '../Components/ListItem';
8 |
9 | import useAudio from "../Hooks/useAudio";
10 | import { useCloud } from "../Hooks/useCloud";
11 |
12 | import '../Styles/App.css';
13 |
14 | const MainScreen = () => {
15 | const [state] = useContext(MusicContext);
16 | useAudio();
17 | const { data } = usePalette(state.playlist.thumbs[0]);
18 | const [mode, setMode] = useState("playlists");
19 |
20 | return (
21 | <>
22 | {/* HEADER LABEL */}
23 |
24 | Music
25 |
26 |
27 | {/* TAB NAVIGATION & SEARCH BAR */}
28 |
29 | setMode("playlists")}
31 | style={{ color: mode === "playlists" ? 'rgb(80, 80, 80)' : 'rgb(200, 200, 200)' }}
32 | >
33 | Playlists
34 |
35 | setMode("songs")}
37 | style={{
38 | paddingLeft: '8px',
39 | color: mode === "songs" ? 'rgb(80, 80, 80)' : 'rgb(200, 200, 200)'
40 | }}
41 | >
42 | Songs
43 |
44 |
45 |
48 |
49 | {/* PLAYLIST LIST */}
50 |
53 |
54 | {Object.keys(state.playlists).map((pl, i) =>
55 |
62 | )}
63 |
64 |
65 |
66 | {/* UPLOAD FORM */}
67 |
70 |
71 |
72 |
73 | {/* MINI PLAYER */}
74 |
75 |
76 | );
77 | }
78 |
79 | const UploadForm = () => {
80 | const inputFile = useRef(null);
81 | const {
82 | handleUpload,
83 | audioFile, setAudioFile,
84 | artFile, setArtFile,
85 | title, setTitle,
86 | artist, setArtist,
87 | album, setAlbum
88 | } = useCloud();
89 |
90 | return (
91 | <>
92 |
93 |
94 | setAudioFile(e)} ref={inputFile} accept="audio/mp3, audio/wav" />
95 |
96 |
97 |
98 | setArtFile(e)} accept="image/png, image/jpeg" />
99 |
100 |
101 |
102 | setTitle(e)} />
103 |
104 |
105 |
106 | setArtist(e)} />
107 |
108 |
109 |
110 | setAlbum(e)} />
111 |
112 |
113 |
114 | );
115 | }
116 |
117 | export default MainScreen;
--------------------------------------------------------------------------------
/src/Views/MusicPlayer-Backup.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react';
2 | import './Styles/App.css';
3 | import "bootstrap/dist/css/bootstrap.min.css";
4 | import "shards-ui/dist/css/shards.min.css";
5 | import {
6 | Button,
7 | Dropdown,
8 | DropdownToggle,
9 | DropdownMenu,
10 | DropdownItem,
11 | Slider
12 | } from "shards-react";
13 | import {
14 | FiChevronLeft,
15 | FiPlus,
16 | FiPlay,
17 | FiPause,
18 | FiSkipBack,
19 | FiSkipForward,
20 | FiShuffle,
21 | FiRepeat
22 | } from "react-icons/fi";
23 | import Playlist from "../data/Playlist";
24 | import { MusicContext } from "../MusicContext"
25 |
26 | // Backup of MusicPlayer without using a custom hook.
27 |
28 | const Header = () => {
29 | const [open, setOpen] = useState(false)
30 |
31 | function toggle() {
32 | setOpen(!open);
33 | }
34 |
35 | return (
36 |
37 |
40 | Player
41 |
42 |
43 |
44 |
45 |
46 |
47 | Add to Playlist
48 | Add to Queue
49 | View Album
50 | View Artist
51 |
52 |
53 |
54 | );
55 | }
56 |
57 | const MusicPlayer = () => {
58 | const [index, setIndex] = useState(0);
59 | const [audioSrc, setAudioSrc] = useState(Playlist[index].src);
60 | const [audio] = useState(new Audio(audioSrc));
61 | const [play, setPlay] = useState(false);
62 | const [progress, setProgress] = useState(0.0);
63 | const [activeSong, setActiveSong] = useState(0);
64 | const [starttime, setStarttime] = useState('0:00');
65 |
66 | // handle skip forward button
67 | function nextSong() {
68 | console.log("next song");
69 | if (index < Playlist.length - 1) {
70 | setIndex(index + 1);
71 | setPlay(true);
72 | } else {
73 | setPlay(false);
74 | setIndex(0);
75 | }
76 | }
77 |
78 | // handle skip backward button
79 | function prevSong() {
80 | console.log("prev song");
81 | if (progress > 10 || index == 0) {
82 | audio.currentTime = 0;
83 | } else if (index > 0) {
84 | setIndex(index - 1);
85 | }
86 | setPlay(true);
87 | }
88 |
89 | // when index is updated, change the active song and
90 | // attach new event listeners
91 | useEffect(() => {
92 | setActiveSong(Playlist[index]);
93 | setAudioSrc(Playlist[index].src);
94 | audio.addEventListener('timeupdate', updateProgress);
95 | audio.addEventListener('ended', nextSong);
96 | return () => {
97 | audio.removeEventListener('timeupdate', updateProgress);
98 | audio.removeEventListener('ended', nextSong);
99 | };
100 | }, [index])
101 |
102 | // when audioSrc is updated, update the audio src and play
103 | useEffect(() => {
104 | audio.src = audioSrc;
105 | audio.currentTime = 0;
106 | if (play) audio.play();
107 | }, [audioSrc])
108 |
109 | // when play is updated, play/pause music accordingly
110 | useEffect(() => {
111 | play ? audio.play() : audio.pause();
112 | }, [play])
113 |
114 | // toggle play true/false
115 | function togglePlay() {
116 | setPlay(!play);
117 | }
118 |
119 | // update progress in accordance to audio's currentTime
120 | function updateProgress() {
121 | const duration = audio.duration;
122 | const currentTime = audio.currentTime;
123 | setProgress((currentTime / duration) * 100 || 0);
124 | setStarttime(formatTime(currentTime));
125 | }
126 |
127 | // handle progress slider input
128 | function adjustProgress(e) {
129 | const newTime = audio.duration * (parseFloat(e[0]) / 100);
130 | audio.currentTime = newTime;
131 | setProgress(parseFloat(e[0]) / 100);
132 | }
133 |
134 | function formatTime(time) {
135 | if (isNaN(time) || time === 0) {
136 | return '0:00';
137 | }
138 | const mins = Math.floor(time / 60);
139 | const secs = (time % 60).toFixed();
140 | return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
141 | }
142 |
143 | return (
144 | <>
145 |
146 |
147 |
148 |
149 |
{activeSong.artist}
150 |
{activeSong.title}
151 |
152 |
153 |
154 |
158 |
164 |
168 |
169 |
170 |
176 |
177 |
{starttime}
178 |
{formatTime(audio.duration)}
179 |
180 |
181 |
182 | );
183 | }
184 |
185 | export default MusicPlayer;
186 |
--------------------------------------------------------------------------------
/src/Views/MusicPlayer.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 | import { usePalette } from 'react-palette';
3 | import { useHistory } from 'react-router-dom';
4 |
5 | import { MusicContext } from '../Contexts/MusicContext';
6 | import { DisplayContext } from '../Contexts/DisplayContext';
7 | import { ThemeContext } from '../Contexts/ThemeContext';
8 |
9 | import ProgressSlider from "../Components/ProgressSlider"
10 | import { PlaylistPicker } from '../Components/PlaylistPicker';
11 |
12 | import useAudio from "../Hooks/useAudio";
13 | import useDisplay from "../Hooks/useDisplay";
14 |
15 | import PlayIcon from '../assets/icons/play.svg';
16 | import SkipForwardIcon from '../assets/icons/skipforward.svg';
17 | import SkipBackwardIcon from '../assets/icons/skipbackward.svg';
18 | import ShuffleIcon from '../assets/icons/shuffle.svg';
19 | import RepeatIcon from '../assets/icons/repeat.svg';
20 | import BackIcon from '../assets/icons/back.svg';
21 | import PlusIcon from '../assets/icons/plus.svg';
22 | import PauseIcon from '../assets/icons/pause.svg';
23 |
24 | import '../Styles/App.css';
25 | // import '../Styles/MusicPlayerM.css';
26 | import '../Styles/MusicPlayer.css';
27 |
28 | const MusicPlayer = () => {
29 | const [state] = useContext(MusicContext);
30 | const [display] = useContext(DisplayContext);
31 | const [theme] = useContext(ThemeContext);
32 | const {
33 | nextSong,
34 | prevSong,
35 | togglePlay,
36 | toggleShuffle,
37 | setRepeat,
38 | play,
39 | shuffle,
40 | repeat
41 | } = useAudio();
42 | const {
43 | openModal,
44 | closeModal,
45 | openPlaylistPicker
46 | } = useDisplay();
47 | const { data } = usePalette(state.activeSong.thumbs[0]);
48 | let history = useHistory();
49 |
50 | function handleRepeatButton() {
51 | switch (repeat) {
52 | case 'none':
53 | setRepeat('repeat');
54 | break;
55 | case 'repeat':
56 | setRepeat('repeatsong');
57 | break;
58 | case 'repeatsong':
59 | setRepeat('none');
60 | break;
61 | }
62 | }
63 |
64 | function handleNextButton() {
65 | if (repeat === 'repeatsong') {
66 | setRepeat('repeat');
67 | }
68 | nextSong();
69 | }
70 |
71 | return (
72 | <>
73 |
74 |
75 | {/* DROPDOWN MODAL */}
76 |
82 |
83 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | {/* MODAL TOUCH BLOCKER */}
95 |
99 |
100 | {/* HEADER NAVIGATION */}
101 |
102 |
110 |
Player
111 |
120 |
121 |
122 | {/* ALBUM ART */}
123 |
124 |
128 |
129 |
130 | {/* ALBUM INFO AND CONTROLLER */}
131 |
136 |
{state.activeSong.artist.join(', ')}
137 |
{state.activeSong.title}
138 |
139 |
140 |
150 |
159 |
172 |
181 |
190 |
191 |
192 |
196 |
197 |
198 | );
199 | }
200 |
201 | export default MusicPlayer;
202 |
--------------------------------------------------------------------------------
/src/assets/icons/PlusSquareBtn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShawnSYLee/react-music-player/4912ed9d6c3ae4b2b9c51819bf1d7e95f78118c9/src/assets/icons/PlusSquareBtn.jpg
--------------------------------------------------------------------------------
/src/assets/icons/back.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
--------------------------------------------------------------------------------
/src/assets/icons/dots.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
21 |
--------------------------------------------------------------------------------
/src/assets/icons/pause.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
--------------------------------------------------------------------------------
/src/assets/icons/play.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
--------------------------------------------------------------------------------
/src/assets/icons/plus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/src/assets/icons/repeat.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/src/assets/icons/shuffle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/assets/icons/skipbackward.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
--------------------------------------------------------------------------------
/src/assets/icons/skipforward.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
--------------------------------------------------------------------------------
/src/data/Playlist.js:
--------------------------------------------------------------------------------
1 | import { songs } from './Songs';
2 | const imagedir = '../assets/images/';
3 |
4 | export const info = {
5 | name: 'Liked Songs',
6 | cover: imagedir + 'Flow.jpg',
7 | author: 'Shawn Lee'
8 | };
9 |
10 | export const tracks = [
11 | songs["shy_martin-good_together"],
12 | songs["reik-raptame"],
13 | songs["selena_gomez-hands_to_myself"],
14 | songs["post_malone-circles"],
15 | songs["anuel_aa-keii"],
16 | songs["galantis-we_can_get_high"],
17 | songs["elephante-glass_mansion"],
18 | songs["lauv-mean_it"],
19 | songs["shawn_mendes-lost_in_japan_remix"],
20 | songs["midnight_kids-run_it"]
21 | ];
22 |
23 | export const playlists = {
24 | 'default': {
25 | id: 'default',
26 | name: 'default',
27 | cover: imagedir + 'Placeholder.jpg',
28 | thumbs: [imagedir + 'Placeholder.jpg', imagedir + 'Placeholder.jpg', imagedir + 'Placeholder.jpg'],
29 | author: 'default',
30 | tracks: [
31 | songs["default"]
32 | ]
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/src/data/Songs.js:
--------------------------------------------------------------------------------
1 | const audiodir = '../assets/audio/';
2 | const imagedir = '../assets/images/';
3 |
4 | export const songs = {
5 | 'default': {
6 | id: 'default',
7 | src: audiodir + 'SHY Martin - Good Together.mp3',
8 | cover: imagedir + 'Placeholder.jpg',
9 | thumbs: [imagedir + 'Placeholder.jpg',imagedir + 'Placeholder.jpg',imagedir + 'Placeholder.jpg'],
10 | title: 'default',
11 | artist: ['default'],
12 | album: 'default'
13 | },
14 | // 'shy_martin-good_together': {
15 | // id: 'shy_martin-good_together',
16 | // src: audiodir + 'SHY Martin - Good Together.mp3',
17 | // cover: imagedir + 'SHY Martin - Overthinking.jpg',
18 | // title: 'Good Together',
19 | // artist: ['SHY Martin'],
20 | // album: 'Overthinking'
21 | // },
22 | // 'reik-raptame': {
23 | // id: 'reik-raptame',
24 | // src: audiodir + 'Ráptame - Reik.mp3',
25 | // cover: imagedir + 'Reik - Ahora.jpg',
26 | // title: 'Ráptame',
27 | // artist: ['Reik'],
28 | // album: 'Ahora'
29 | // },
30 | // 'selena_gomez-hands_to_myself': {
31 | // id: 'selena_gomez-hands_to_myself',
32 | // src: audiodir + 'Selena Gomez - Hands To Myself.mp3',
33 | // cover: imagedir + 'Selena Gomez - Revival.jpg',
34 | // title: 'Hands to Myself',
35 | // artist: ['Selena Gomez'],
36 | // album: 'Revival'
37 | // },
38 | // 'post_malone-circles': {
39 | // id: 'post_malone-circles',
40 | // src: audiodir + 'Post Malone - Circles.mp3',
41 | // cover: imagedir + 'Post Malone - Hollywoods Bleeding.jpg',
42 | // title: 'Circles',
43 | // artist: ['Post Malone'],
44 | // album: 'Hollywood\'s Bleeding'
45 | // },
46 | // 'anuel_aa-keii': {
47 | // id: 'anuel_aa-keii',
48 | // src: audiodir + 'Anuel AA - Keii.mp3',
49 | // cover: imagedir + 'Anuel AA - Keii.jpg',
50 | // title: 'Keii',
51 | // artist: ['Anuel AA'],
52 | // album: 'Keii'
53 | // },
54 | // 'galantis-we_can_get_high': {
55 | // id: 'galantis-we_can_get_high',
56 | // src: audiodir + 'Galantis & Yellow Claw - We Can Get High.mp3',
57 | // cover: imagedir + 'Galantis - Church.jpg',
58 | // title: 'We Can Get High',
59 | // artist: ['Galantis', 'Yellow Claw'],
60 | // album: 'Church'
61 | // },
62 | // 'elephante-glass_mansion': {
63 | // id: 'elephante-glass_mansion',
64 | // src: audiodir + 'Elephante - Glass Mansion.mp3',
65 | // cover: imagedir + 'Elephante - Glass Mansion.jpeg',
66 | // title: 'Glass Mansion',
67 | // artist: ['Elephante'],
68 | // album: 'Glass Mansion'
69 | // },
70 | // 'lauv-mean_it': {
71 | // id: 'lauv-mean_it',
72 | // src: audiodir + 'Lauv & LANY - Mean It.mp3',
73 | // cover: imagedir + 'Lauv - in my feelings.jpg',
74 | // title: 'Mean It',
75 | // artist: ['Lauv', 'LANY'],
76 | // album: '~in my feelings~'
77 | // },
78 | // 'shawn_mendes-lost_in_japan_remix': {
79 | // id: 'shawn_mendes-lost_in_japan_remix',
80 | // src: audiodir + 'Shawn Mendes, Zedd - Lost In Japan (Remix).mp3',
81 | // cover: imagedir + 'Shawn Mendes - Lost in Japan.jpg',
82 | // title: 'Lost in Japan - Remix',
83 | // artist: ['Shawn Mendes', 'Zedd'],
84 | // album: 'Lost in Japan'
85 | // },
86 | // 'midnight_kids-run_it': {
87 | // id: 'midnight_kids-run_it',
88 | // src: audiodir + 'Midnight Kids - Run It.mp3',
89 | // cover: imagedir + 'Midnight Kids - Run It.jpg',
90 | // title: 'Run It',
91 | // artist: ['Midnight Kids', 'Annika Wells'],
92 | // album: 'Run It'
93 | // }
94 | };
--------------------------------------------------------------------------------
/src/fonts/Futura_PT_Book.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShawnSYLee/react-music-player/4912ed9d6c3ae4b2b9c51819bf1d7e95f78118c9/src/fonts/Futura_PT_Book.ttf
--------------------------------------------------------------------------------
/src/fonts/Futura_PT_ExtraBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShawnSYLee/react-music-player/4912ed9d6c3ae4b2b9c51819bf1d7e95f78118c9/src/fonts/Futura_PT_ExtraBold.ttf
--------------------------------------------------------------------------------
/src/fonts/Futura_PT_Heavy.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShawnSYLee/react-music-player/4912ed9d6c3ae4b2b9c51819bf1d7e95f78118c9/src/fonts/Futura_PT_Heavy.ttf
--------------------------------------------------------------------------------
/src/fonts/Futura_PT_Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShawnSYLee/react-music-player/4912ed9d6c3ae4b2b9c51819bf1d7e95f78118c9/src/fonts/Futura_PT_Light.ttf
--------------------------------------------------------------------------------
/src/fonts/Futura_PT_Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShawnSYLee/react-music-player/4912ed9d6c3ae4b2b9c51819bf1d7e95f78118c9/src/fonts/Futura_PT_Medium.ttf
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Futura PT';
3 | src: local('Futura'), url('./fonts/Futura_PT_Medium.ttf') format('truetype');
4 | }
5 |
6 | body {
7 | margin: 0;
8 | font-family: Futura PT, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
9 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
10 | sans-serif;
11 | -webkit-font-smoothing: antialiased;
12 | -moz-osx-font-smoothing: grayscale;
13 | }
14 |
15 | code {
16 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
17 | monospace;
18 | }
19 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 | import './fonts/Futura_PT_Light.ttf';
7 | import './fonts/Futura_PT_Book.ttf';
8 | import './fonts/Futura_PT_Medium.ttf';
9 | import './fonts/Futura_PT_Heavy.ttf';
10 | import './fonts/Futura_PT_ExtraBold.ttf';
11 |
12 | ReactDOM.render((
13 |
14 | ), document.getElementById('root')
15 | );
16 |
17 | // If you want your app to work offline and load faster, you can change
18 | // unregister() to register() below. Note this comes with some pitfalls.
19 | // Learn more about service workers: https://bit.ly/CRA-PWA
20 | serviceWorker.unregister();
21 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' }
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/storage.rules:
--------------------------------------------------------------------------------
1 | service firebase.storage {
2 | match /b/{bucket}/o {
3 | match /{allPaths=**} {
4 | allow read, write: if request.auth!=null;
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------