├── .env
├── src
    ├── react-app-env.d.ts
    ├── assets
    │   ├── svg
    │   │   ├── play.svg
    │   │   ├── music.svg
    │   │   ├── comments.svg
    │   │   ├── heart_filled.svg
    │   │   ├── heart.svg
    │   │   ├── share.svg
    │   │   └── record.svg
    │   └── json
    │   │   └── videos.json
    ├── setupTests.ts
    ├── App.test.tsx
    ├── index.css
    ├── store
    │   ├── index.ts
    │   └── screenSlice.ts
    ├── index.tsx
    ├── components
    │   ├── Video.module.css
    │   ├── Screen.tsx
    │   ├── VideoDetails.tsx
    │   ├── VideoActions.tsx
    │   └── Video.tsx
    ├── App.tsx
    ├── App.css
    ├── logo.svg
    ├── common
    │   └── hooks
    │   │   └── screenDragHook.ts
    └── serviceWorker.ts
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── videos
    │   ├── video_evee.mp4
    │   ├── video_theo.mp4
    │   └── video_evee_theo.mp4
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
├── tsconfig.json
├── LICENSE
└── package.json


/.env:
--------------------------------------------------------------------------------
1 | HOST=0.0.0.0
2 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timjuenemann/tik-tok-clone/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timjuenemann/tik-tok-clone/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timjuenemann/tik-tok-clone/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/videos/video_evee.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timjuenemann/tik-tok-clone/HEAD/public/videos/video_evee.mp4


--------------------------------------------------------------------------------
/public/videos/video_theo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timjuenemann/tik-tok-clone/HEAD/public/videos/video_theo.mp4


--------------------------------------------------------------------------------
/public/videos/video_evee_theo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timjuenemann/tik-tok-clone/HEAD/public/videos/video_evee_theo.mp4


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # TikTok clone (WIP)
2 | 
3 | This is a clone of the TikTok app that uses react under the hood and works on desktop and on mobile.
4 | 


--------------------------------------------------------------------------------
/src/assets/svg/play.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/assets/svg/music.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/></svg>


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
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 | 


--------------------------------------------------------------------------------
/src/assets/svg/comments.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" transform="scale(-1,1)"
2 |  height="24" viewBox="0 0 24 24" width="24"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/assets/svg/heart_filled.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   height: -webkit-fill-available;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   font-family: 'Roboto', sans-serif;
 8 |   -webkit-font-smoothing: antialiased;
 9 |   -moz-osx-font-smoothing: grayscale;
10 |   background-color: #000;
11 |   color: #fff;
12 |   -webkit-text-size-adjust: 100%;
13 | }
14 | 
15 | code {
16 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
17 |     monospace;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
 2 | import screenReducer from './screenSlice';
 3 | 
 4 | export const store = configureStore({
 5 |   reducer: {
 6 |     screen: screenReducer,
 7 |   },
 8 | });
 9 | 
10 | export type RootState = ReturnType<typeof store.getState>;
11 | export type AppThunk<ReturnType = void> = ThunkAction<
12 |   ReturnType,
13 |   RootState,
14 |   unknown,
15 |   Action<string>
16 | >;
17 | 


--------------------------------------------------------------------------------
/src/assets/svg/heart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>


--------------------------------------------------------------------------------
/src/assets/svg/share.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 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 { Provider } from 'react-redux';
 7 | import { store } from './store';
 8 | 
 9 | ReactDOM.render(
10 |   <React.StrictMode>
11 |     <Provider store={store}>
12 |       <App />
13 |     </Provider>
14 |   </React.StrictMode>,
15 |   document.getElementById('root')
16 | );
17 | 
18 | // If you want your app to work offline and load faster, you can change
19 | // unregister() to register() below. Note this comes with some pitfalls.
20 | // Learn more about service workers: https://bit.ly/CRA-PWA
21 | serviceWorker.unregister();
22 | 


--------------------------------------------------------------------------------
/src/components/Video.module.css:
--------------------------------------------------------------------------------
 1 | .Video {
 2 |   height: 100%;
 3 |   width: 100%;
 4 |   background-color: #666;
 5 |   color: #fff;
 6 | }
 7 | 
 8 | .videoContainer {
 9 |   height: 100%;
10 |   width: 100%;
11 |   position: relative;
12 | }
13 | 
14 | .videoElement {
15 |   height: 100%;
16 |   width: 100%;
17 |   position: absolute;
18 |   top: 0;
19 |   left: 0;
20 |   object-fit: cover;
21 | }
22 | 
23 | .gridContainer {
24 |   display: flex;
25 |   align-items: flex-end;
26 |   height: 100%;
27 | }
28 | 
29 | .grid {
30 |   display: grid;
31 |   grid-template-columns: auto 40px;
32 |   grid-gap: 20px;
33 |   padding: 20px;
34 |   width: 100%;
35 |   z-index: 1;
36 | }
37 | 
38 | .playButtonContainer {
39 |   position: absolute;
40 |   top: 0;
41 |   left: 0;
42 |   height: 100%;
43 |   width: 100%;
44 |   display: flex;
45 |   justify-content: center;
46 |   align-items: center;
47 | }
48 | 
49 | .marquee div div span {
50 |   font-size: 0.9em;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/Screen.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import Video from './Video';
 3 | import useScreenDrag from '../common/hooks/screenDragHook';
 4 | import { useSelector, useDispatch } from 'react-redux';
 5 | import {
 6 |   setActiveView,
 7 |   selectSortedVideoIds,
 8 |   selectActiveVideoId,
 9 | } from '../store/screenSlice';
10 | 
11 | function Screen() {
12 |   const [screenRef, activeView] = useScreenDrag();
13 |   const dispatch = useDispatch();
14 | 
15 |   useEffect(() => {
16 |     dispatch(setActiveView(activeView));
17 |     // eslint-disable-next-line react-hooks/exhaustive-deps
18 |   }, [activeView]);
19 | 
20 |   const sortedVideoIds = useSelector(selectSortedVideoIds);
21 |   const activeVideoId = useSelector(selectActiveVideoId);
22 | 
23 |   return (
24 |     <div>
25 |       <div className="Screen" ref={screenRef}>
26 |         {sortedVideoIds.map((id) => (
27 |           <Video key={id} id={id} active={id === activeVideoId} />
28 |         ))}
29 |       </div>
30 |     </div>
31 |   );
32 | }
33 | 
34 | export default Screen;
35 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useLayoutEffect } from 'react';
 2 | import './App.css';
 3 | import Screen from './components/Screen';
 4 | import * as smoothscroll from 'smoothscroll-polyfill';
 5 | 
 6 | export default function App() {
 7 |   // disable safari bounce
 8 |   document.ontouchmove = function (event) {
 9 |     event.preventDefault();
10 |   };
11 | 
12 |   // mobile viewport fix
13 |   const setViewport = () => {
14 |     const vh = window.innerHeight * 0.01;
15 |     document.documentElement.style.setProperty('--vh', `${vh}px`);
16 |   };
17 |   window.onresize = function () {
18 |     setViewport();
19 |   };
20 |   useLayoutEffect(() => {
21 |     smoothscroll.polyfill();
22 |     setViewport();
23 |   });
24 | 
25 |   const [startApp, setStartApp] = useState(false);
26 | 
27 |   return (
28 |     <div className="App">
29 |       {startApp ? (
30 |         <Screen />
31 |       ) : (
32 |         <div>
33 |           <h1>TikTok Clone</h1>
34 |           <button onClick={() => setStartApp(true)}>Start app</button>
35 |         </div>
36 |       )}
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/src/assets/json/videos.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "1",
 4 |     "username": "timjuenemann",
 5 |     "description": "Theo discovers the outdoor run",
 6 |     "hashtags": ["rabbit", "bunny"],
 7 |     "soundName": "original sound - timjuenemann",
 8 |     "videoURL": "/videos/video_theo.mp4",
 9 |     "likeCount": 254,
10 |     "commentCount": 0,
11 |     "shareCount": 14,
12 |     "liked": false
13 |   },
14 |   {
15 |     "id": "2",
16 |     "username": "timjuenemann",
17 |     "description": "This is evee digging",
18 |     "hashtags": ["bunny", "digging"],
19 |     "soundName": "original sound - timjuenemann",
20 |     "videoURL": "/videos/video_evee.mp4",
21 |     "likeCount": 463,
22 |     "commentCount": 0,
23 |     "shareCount": 39,
24 |     "liked": false
25 |   },
26 |   {
27 |     "id": "3",
28 |     "username": "timjuenemann",
29 |     "description": "Theo and evee eating some",
30 |     "hashtags": ["salad"],
31 |     "soundName": "original sound - timjuenemann",
32 |     "videoURL": "/videos/video_evee_theo.mp4",
33 |     "likeCount": 42,
34 |     "commentCount": 0,
35 |     "shareCount": 3,
36 |     "liked": false
37 |   }
38 | ]
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Facebook, Inc. and its affiliates.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   align-items: center;
 5 |   height: 100vh; /* Fallback */
 6 |   height: calc(var(--vh, 1vh) * 100);
 7 | }
 8 | 
 9 | .rotatingRecord {
10 |   animation: spin 5s linear infinite;
11 | }
12 | 
13 | @keyframes spin {
14 |   100% {
15 |     transform: rotate(360deg);
16 |   }
17 | }
18 | 
19 | .dblClickHeart {
20 |   height: 80px;
21 |   width: 80px;
22 |   margin-left: -40px;
23 |   margin-top: -40px;
24 |   opacity: 0;
25 | }
26 | 
27 | .dblClickHeart.is-active {
28 |   animation: popUpHeart 400ms linear;
29 |   animation-fill-mode: forwards;
30 | }
31 | 
32 | @keyframes popUpHeart {
33 |   0% {
34 |     opacity: 1;
35 |     transform: scale(1);
36 |   }
37 |   50% {
38 |     opacity: 1;
39 |     transform: scale(1);
40 |   }
41 |   100% {
42 |     opacity: 0;
43 |     transform: scale(3);
44 |   }
45 | }
46 | 
47 | .Screen {
48 |   height: 800px;
49 |   width: 450px;
50 |   background-color: #000;
51 |   overflow: hidden;
52 |   user-select: none;
53 |   border-radius: 20px;
54 |   box-shadow: 2px 2px 120px rgba(255, 255, 255, 0.15);
55 | }
56 | 
57 | @media (max-width: 650px) {
58 |   .Screen {
59 |     border-radius: unset;
60 |     box-shadow: unset;
61 |     width: 100vw;
62 |     height: 100vh; /* Fallback */
63 |     height: calc(var(--vh, 1vh) * 100);
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tik-tok-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "http://timjuenemann.github.io/tik-tok-clone",
 6 |   "dependencies": {
 7 |     "@reduxjs/toolkit": "^1.2.5",
 8 |     "@testing-library/jest-dom": "^4.2.4",
 9 |     "@testing-library/react": "^9.3.2",
10 |     "@testing-library/user-event": "^7.1.2",
11 |     "normalizr": "^3.6.0",
12 |     "react": "^16.13.1",
13 |     "react-dom": "^16.13.1",
14 |     "react-double-marquee": "^1.0.5",
15 |     "react-feather": "^2.0.8",
16 |     "react-redux": "^7.2.0",
17 |     "react-scripts": "3.4.1",
18 |     "smoothscroll-polyfill": "^0.4.4",
19 |     "typescript": "~3.7.2"
20 |   },
21 |   "devDependencies": {
22 |     "@types/jest": "^24.0.0",
23 |     "@types/node": "^12.0.0",
24 |     "@types/react": "^16.9.0",
25 |     "@types/react-dom": "^16.9.0",
26 |     "@types/react-redux": "^7.1.7",
27 |     "@types/smoothscroll-polyfill": "^0.3.1",
28 |     "@babel/runtime": "^7.9.6",
29 |     "gh-pages": "^2.2.0"
30 |   },
31 |   "scripts": {
32 |     "start": "react-scripts start",
33 |     "build": "react-scripts build",
34 |     "test": "react-scripts test",
35 |     "eject": "react-scripts eject",
36 |     "predeploy": "npm run build",
37 |     "deploy": "gh-pages -d build"
38 |   },
39 |   "eslintConfig": {
40 |     "extends": "react-app"
41 |   },
42 |   "browserslist": {
43 |     "production": [
44 |       ">0.2%",
45 |       "not dead",
46 |       "not op_mini all"
47 |     ],
48 |     "development": [
49 |       "last 1 chrome version",
50 |       "last 1 firefox version",
51 |       "last 1 safari version"
52 |     ]
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/VideoDetails.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ReactComponent as Music } from '../assets/svg/music.svg';
 3 | // @ts-ignore
 4 | import * as Marquee from 'react-double-marquee';
 5 | import { VideoItem } from '../store/screenSlice';
 6 | import classes from './Video.module.css';
 7 | 
 8 | export default function VideoDetails({ item }: { item: VideoItem }) {
 9 |   return (
10 |     <div
11 |       style={{
12 |         display: 'flex',
13 |         alignContent: 'flex-end',
14 |         flexDirection: 'column-reverse',
15 |       }}
16 |     >
17 |       <div onClick={(e) => e.stopPropagation()}>
18 |         <div
19 |           style={{
20 |             fontSize: '1.1em',
21 |             fontWeight: 'bold',
22 |           }}
23 |         >
24 |           @{item.username}
25 |         </div>
26 |         <div style={{ marginTop: 10, fontSize: '0.9em' }}>
27 |           {item.description}{' '}
28 |           {item.hashtags.map((name) => (
29 |             <span key={name}>
30 |               <strong>#{name}</strong>{' '}
31 |             </span>
32 |           ))}
33 |         </div>
34 |         <div
35 |           style={{
36 |             marginTop: 16,
37 |             fontSize: '0.9em',
38 |             display: 'flex',
39 |           }}
40 |         >
41 |           <Music height={16} width={16} fill={'#fff'} />
42 |           <div
43 |             style={{
44 |               marginLeft: 6,
45 |               width: 180,
46 |               whiteSpace: 'nowrap',
47 |             }}
48 |             className={classes.marquee}
49 |           >
50 |             <Marquee direction="left" delay={1000}>
51 |               {item.soundName}
52 |             </Marquee>
53 |           </div>
54 |         </div>
55 |       </div>
56 |     </div>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>TikTok clone</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/store/screenSlice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction, createSelector } from '@reduxjs/toolkit';
 2 | import { RootState } from '.';
 3 | import { normalize, schema } from 'normalizr';
 4 | 
 5 | export interface VideoItem {
 6 |   id: string;
 7 |   username: string;
 8 |   description: string;
 9 |   hashtags: string[];
10 |   soundName: string;
11 |   videoURL: string;
12 |   likeCount: number;
13 |   commentCount: number;
14 |   shareCount: number;
15 |   liked: boolean;
16 | }
17 | 
18 | const videoEntity = new schema.Entity('videos');
19 | 
20 | interface ScreenState {
21 |   activeView: number;
22 |   videos: {
23 |     entities: {
24 |       videos: {
25 |         [id: string]: VideoItem;
26 |       };
27 |     };
28 |     result: string[];
29 |   };
30 | }
31 | 
32 | const initialState: ScreenState = {
33 |   activeView: 0,
34 |   videos: normalize(require('../assets/json/videos.json'), [videoEntity]),
35 | };
36 | 
37 | export const screenSlice = createSlice({
38 |   name: 'screen',
39 |   initialState,
40 |   reducers: {
41 |     likeVideo: (state, action: PayloadAction<string>) => {
42 |       const video = state.videos.entities.videos[action.payload];
43 |       if (!video.liked) {
44 |         video.liked = true;
45 |         video.likeCount += 1;
46 |       }
47 |     },
48 |     unlikeVideo: (state, action: PayloadAction<string>) => {
49 |       const video = state.videos.entities.videos[action.payload];
50 |       if (video.liked) {
51 |         video.liked = false;
52 |         video.likeCount -= 1;
53 |       }
54 |     },
55 |     setActiveView: (state, action: PayloadAction<number>) => {
56 |       state.activeView = action.payload;
57 |     },
58 |   },
59 | });
60 | 
61 | export const { likeVideo, unlikeVideo, setActiveView } = screenSlice.actions;
62 | 
63 | // Selectors
64 | export const selectVideos = (state: RootState) =>
65 |   state.screen.videos.entities.videos;
66 | export const selectSortedVideoIds = (state: RootState) =>
67 |   state.screen.videos.result;
68 | export const selectActiveView = (state: RootState) => state.screen.activeView;
69 | 
70 | export const selectActiveVideoId = createSelector(
71 |   selectSortedVideoIds,
72 |   selectActiveView,
73 |   (sortedIds, activeView) => sortedIds[activeView]
74 | );
75 | 
76 | export default screenSlice.reducer;
77 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/components/VideoActions.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactFragment } from 'react';
 2 | import { ReactComponent as Record } from '../assets/svg/record.svg';
 3 | import { ReactComponent as Share } from '../assets/svg/share.svg';
 4 | import { ReactComponent as Heart } from '../assets/svg/heart.svg';
 5 | import { ReactComponent as HeartFilled } from '../assets/svg/heart_filled.svg';
 6 | import { ReactComponent as Comments } from '../assets/svg/comments.svg';
 7 | import { useDispatch } from 'react-redux';
 8 | import { likeVideo, VideoItem, unlikeVideo } from '../store/screenSlice';
 9 | 
10 | export default function VideoActions({ item }: { item: VideoItem }) {
11 |   const dispatch = useDispatch();
12 | 
13 |   return (
14 |     <div onClick={(e) => e.stopPropagation()}>
15 |       <div
16 |         style={{
17 |           display: 'flex',
18 |           justifyContent: 'center',
19 |           flexDirection: 'column',
20 |         }}
21 |       >
22 |         <VideoAction count={item.likeCount}>
23 |           {item.liked ? (
24 |             <HeartFilled
25 |               onClick={() => dispatch(unlikeVideo(item.id))}
26 |               height={40}
27 |               width={40}
28 |               fill={'#fff'}
29 |             />
30 |           ) : (
31 |             <Heart
32 |               onClick={() => dispatch(likeVideo(item.id))}
33 |               height={40}
34 |               width={40}
35 |               fill={'#fff'}
36 |             />
37 |           )}
38 |         </VideoAction>
39 |         <VideoAction count={item.commentCount}>
40 |           <Comments height={35} width={35} fill={'#fff'} />
41 |         </VideoAction>
42 |         <VideoAction count={item.shareCount}>
43 |           <Share height={35} width={35} fill={'#fff'} />
44 |         </VideoAction>
45 | 
46 |         <Record
47 |           height={40}
48 |           width={40}
49 |           className="rotatingRecord"
50 |           style={{
51 |             marginTop: 30,
52 |           }}
53 |         />
54 |       </div>
55 |     </div>
56 |   );
57 | }
58 | 
59 | function VideoAction(props: { children: ReactFragment; count: number }) {
60 |   return (
61 |     <div
62 |       style={{
63 |         display: 'flex',
64 |         flexDirection: 'column',
65 |         alignItems: 'center',
66 |         fontWeight: 'bold',
67 |         fontSize: '.8em',
68 |         marginTop: 20,
69 |       }}
70 |     >
71 |       <div
72 |         style={{
73 |           cursor: 'pointer',
74 |         }}
75 |       >
76 |         {props.children}
77 |       </div>
78 |       <div
79 |         style={{
80 |           marginTop: 5,
81 |         }}
82 |       >
83 |         {props.count}
84 |       </div>
85 |     </div>
86 |   );
87 | }
88 | 


--------------------------------------------------------------------------------
/src/assets/svg/record.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="#fff">
 5 | <g>
 6 | 	<g>
 7 | 		<path d="M256,0C114.84,0,0,114.84,0,256s114.84,256,256,256s256-114.84,256-256S397.16,0,256,0z M435.852,248c4.416,0,8,3.584,8,8
 8 | 			c0,103.584-84.268,187.852-187.852,187.852c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8c94.756,0,171.852-77.092,171.852-171.852
 9 | 			C427.852,251.584,431.432,248,435.852,248z M404.108,248c4.416,0,8,3.584,8,8c0,86.08-70.032,156.108-156.108,156.108
10 | 			c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8c77.256,0,140.108-62.852,140.108-140.108C396.108,251.584,399.692,248,404.108,248z
11 | 			 M371.784,248c4.416,0,8,3.584,8,8c0,68.252-55.532,123.784-123.784,123.784c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8
12 | 			c59.432,0,107.784-48.352,107.784-107.784C363.784,251.584,367.368,248,371.784,248z M44.492,264c-4.416,0-8-3.584-8-8
13 | 			c0-121.036,98.472-219.508,219.508-219.508c4.416,0,8,3.584,8,8s-3.584,8-8,8C143.784,52.492,52.492,143.784,52.492,256
14 | 			C52.492,260.416,48.912,264,44.492,264z M76.148,264c-4.416,0-8-3.584-8-8c0-103.584,84.268-187.852,187.852-187.852
15 | 			c4.416,0,8,3.584,8,8c0,4.416-3.584,8-8,8C161.244,84.148,84.148,161.24,84.148,256C84.148,260.416,80.568,264,76.148,264z
16 | 			 M107.892,264c-4.416,0-8-3.584-8-8c0-86.08,70.032-156.108,156.108-156.108c4.416,0,8,3.584,8,8c0,4.416-3.584,8-8,8
17 | 			c-77.256,0-140.108,62.852-140.108,140.108C115.892,260.416,112.308,264,107.892,264z M140.216,264c-4.416,0-8-3.584-8-8
18 | 			c0-68.252,55.532-123.784,123.784-123.784c4.416,0,8,3.584,8,8s-3.584,8-8,8c-59.432,0-107.784,48.352-107.784,107.784
19 | 			C148.216,260.416,144.632,264,140.216,264z M176.288,256c0-43.952,35.756-79.712,79.712-79.712s79.712,35.76,79.712,79.712
20 | 			c0,43.952-35.76,79.712-79.712,79.712C212.048,335.712,176.288,299.952,176.288,256z M256,475.508c-4.416,0-8-3.584-8-8
21 | 			c0-4.416,3.584-8,8-8c112.216,0,203.508-91.292,203.508-203.508c0-4.416,3.584-8,8-8c4.416,0,8,3.584,8,8
22 | 			C475.508,377.036,377.036,475.508,256,475.508z"/>
23 | 	</g>
24 | </g>
25 | <g>
26 | 	<g>
27 | 		<path d="M256,236.112c-10.968,0-19.892,8.92-19.892,19.888s8.92,19.888,19.892,19.888c10.964,0,19.888-8.92,19.888-19.888
28 | 			C275.888,245.032,266.964,236.112,256,236.112z"/>
29 | 	</g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | </svg>
62 | 


--------------------------------------------------------------------------------
/src/components/Video.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { ReactComponent as HeartFilled } from '../assets/svg/heart_filled.svg';
  3 | import { useSelector, useDispatch } from 'react-redux';
  4 | import { selectVideos, likeVideo } from '../store/screenSlice';
  5 | import VideoDetails from './VideoDetails';
  6 | import classes from './Video.module.css';
  7 | import VideoActions from './VideoActions';
  8 | import { ReactComponent as Play } from '../assets/svg/play.svg';
  9 | 
 10 | enum VideoState {
 11 |   play,
 12 |   pause,
 13 | }
 14 | 
 15 | export default function Video({ id, active }: { id: string; active: boolean }) {
 16 |   // get video by id
 17 |   const videos = useSelector(selectVideos);
 18 |   const item = videos[id];
 19 | 
 20 |   const dispatch = useDispatch();
 21 | 
 22 |   // get video node
 23 |   const [videoNode, setVideoNode] = useState<HTMLVideoElement | null>(null);
 24 |   const videoRef = (node: HTMLVideoElement) => {
 25 |     if (node !== null) {
 26 |       setVideoNode(node);
 27 |     }
 28 |   };
 29 | 
 30 |   // video state logic (play/pause)
 31 |   const [videoState, setVideoState] = useState<VideoState>(VideoState.pause);
 32 |   useEffect(() => {
 33 |     if (videoNode) {
 34 |       if (videoState === VideoState.pause || !active) {
 35 |         videoNode.pause();
 36 |       } else {
 37 |         videoNode.play();
 38 |       }
 39 |     }
 40 |   }, [active, videoNode, videoState]);
 41 | 
 42 |   // play video if its currently active
 43 |   useEffect(() => {
 44 |     if (active) {
 45 |       setVideoState(VideoState.play);
 46 |     } else {
 47 |       setVideoState(VideoState.pause);
 48 |     }
 49 |   }, [active]);
 50 | 
 51 |   // pause on click
 52 |   const singleClick = () => {
 53 |     setVideoState(
 54 |       videoState === VideoState.play ? VideoState.pause : VideoState.play
 55 |     );
 56 |   };
 57 | 
 58 |   // set doubleClick position
 59 |   const [dblClickPos, setDblClickPos] = useState<{
 60 |     x: number | null;
 61 |     y: number | null;
 62 |   }>({
 63 |     x: null,
 64 |     y: null,
 65 |   });
 66 | 
 67 |   // show big heart animation on doubleCLick
 68 |   const doubleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 69 |     dispatch(likeVideo(id));
 70 |     setDblClickPos({
 71 |       x: event.nativeEvent.clientX,
 72 |       y: event.nativeEvent.clientY,
 73 |     });
 74 |     setTimeout(() => {
 75 |       setDblClickPos({
 76 |         x: null,
 77 |         y: null,
 78 |       });
 79 |     }, 400);
 80 |   };
 81 | 
 82 |   // handle single and double click
 83 |   const [clickTimer, setClickTimer] = useState<any>(0);
 84 |   const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 85 |     // normal click
 86 |     if (event.detail === 1) {
 87 |       setClickTimer(
 88 |         setTimeout(() => {
 89 |           singleClick();
 90 |         }, 200)
 91 |       );
 92 |     }
 93 |     // double click
 94 |     else if (event.detail === 2) {
 95 |       clearTimeout(clickTimer);
 96 |       doubleClick(event);
 97 |     }
 98 |   };
 99 | 
100 |   return (
101 |     <div className={classes.Video} onClick={handleClick}>
102 |       {/* heart that pops up on dblClick */}
103 |       <HeartFilled
104 |         fill={'#fff'}
105 |         className={`dblClickHeart ${
106 |           !dblClickPos.x && !dblClickPos.y ? '' : 'is-active'
107 |         }`}
108 |         style={{
109 |           position: 'absolute',
110 |           top: dblClickPos.y ?? 0,
111 |           left: dblClickPos.x ?? 0,
112 |           zIndex: 100,
113 |         }}
114 |       />
115 |       <div className={classes.videoContainer}>
116 |         {/* video element */}
117 |         <video ref={videoRef} className={classes.videoElement} loop playsInline>
118 |           <source
119 |             src={process.env.PUBLIC_URL + item.videoURL}
120 |             type="video/mp4"
121 |           />
122 |           Your browser does not support HTML video.
123 |         </video>
124 |         {/* show playButton if video is paused */}
125 |         {videoState === VideoState.pause && active ? (
126 |           <div className={classes.playButtonContainer}>
127 |             <Play height={80} width={80} fill={'#fff'} />
128 |           </div>
129 |         ) : null}
130 |         {/* Video details and actions */}
131 |         <div className={classes.gridContainer}>
132 |           <div className={classes.grid}>
133 |             <VideoDetails item={item} />
134 |             <VideoActions item={item} />
135 |           </div>
136 |         </div>
137 |       </div>
138 |     </div>
139 |   );
140 | }
141 | 


--------------------------------------------------------------------------------
/src/common/hooks/screenDragHook.ts:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect, useState } from 'react';
  2 | 
  3 | export default function useScreenDrag() {
  4 |   // handle node (ref) init
  5 |   const [node, setNode] = useState<HTMLElement | null>(null);
  6 |   const ref = useCallback((refNode) => {
  7 |     if (refNode) {
  8 |       setNode(refNode);
  9 |     }
 10 |   }, []);
 11 | 
 12 |   // indicates wheather the screen is currently dragged by the user
 13 |   const [isDragging, setIsDragging] = useState(false);
 14 | 
 15 |   // defines the drag distance since the drag started
 16 |   const [dragDistance, setDragDistance] = useState(0);
 17 | 
 18 |   // handle mouse event listeners
 19 |   useEffect(() => {
 20 |     const handleMouseDown = () => setIsDragging(true);
 21 |     const handleMouseUp = () => setIsDragging(false);
 22 |     const handleMouseMove = (event: MouseEvent) => {
 23 |       if (isDragging) {
 24 |         setDragDistance((d) => d + event.movementY);
 25 |       }
 26 |     };
 27 | 
 28 |     if (node) {
 29 |       node.addEventListener('mousedown', handleMouseDown);
 30 |       window.addEventListener('mouseup', handleMouseUp);
 31 |       node.addEventListener('mousemove', handleMouseMove);
 32 |       return () => {
 33 |         node.removeEventListener('mousedown', handleMouseDown);
 34 |         window.removeEventListener('mouseup', handleMouseUp);
 35 |         node.removeEventListener('mousemove', handleMouseMove);
 36 |       };
 37 |     }
 38 |   }, [isDragging, node]);
 39 | 
 40 |   // handle touch event listeners
 41 |   const [prevTouchPos, setlPrevTouchPos] = useState(0);
 42 |   useEffect(() => {
 43 |     const handleTouchStart = (event: TouchEvent) => {
 44 |       setlPrevTouchPos(event.touches[0].clientY);
 45 |       setIsDragging(true);
 46 |     };
 47 |     const handleTouchEnd = () => setIsDragging(false);
 48 |     const handleTouchMove = (event: TouchEvent) => {
 49 |       const newTouchPos = event.changedTouches[0].clientY;
 50 |       if (isDragging) {
 51 |         setDragDistance((d) => d + newTouchPos - prevTouchPos);
 52 |       }
 53 |       setlPrevTouchPos(newTouchPos);
 54 |     };
 55 | 
 56 |     if (node) {
 57 |       node.addEventListener('touchstart', handleTouchStart);
 58 |       node.addEventListener('touchend', handleTouchEnd);
 59 |       node.addEventListener('touchmove', handleTouchMove);
 60 |       return () => {
 61 |         node.removeEventListener('touchstart', handleTouchStart);
 62 |         window.removeEventListener('touchend', handleTouchEnd);
 63 |         node.removeEventListener('touchmove', handleTouchMove);
 64 |       };
 65 |     }
 66 |   }, [isDragging, node, prevTouchPos]);
 67 | 
 68 |   // set screen height
 69 |   const [screenHeight, setScreenHeight] = useState(0);
 70 |   const getScreenHeight = useCallback(() => {
 71 |     if (node) {
 72 |       setScreenHeight(node.getBoundingClientRect().height);
 73 |     }
 74 |   }, [node]);
 75 | 
 76 |   useEffect(() => {
 77 |     getScreenHeight();
 78 | 
 79 |     const handleResize = () => getScreenHeight();
 80 |     window.addEventListener('resize', handleResize);
 81 |     return () => window.removeEventListener('resize', handleResize);
 82 |   }, [getScreenHeight, node]);
 83 | 
 84 |   // defines how hard it is to drag to the next video
 85 |   const dragResistance = screenHeight / 8;
 86 | 
 87 |   // current scroll position
 88 |   const [scrollPos, setScrollPos] = useState(0);
 89 | 
 90 |   // set currently active slide
 91 |   const [activeView, setActiveView] = useState(0);
 92 | 
 93 |   // check if scrollPos is within range
 94 |   const scrollPosCheck = (num: number) => {
 95 |     if (node) {
 96 |       if (num <= 0) {
 97 |         setActiveView(0);
 98 |         return 0;
 99 |       } else if (num >= node.scrollHeight - screenHeight) {
100 |         setActiveView(
101 |           Math.round((node.scrollHeight - screenHeight) / screenHeight)
102 |         );
103 |         return node.scrollHeight - screenHeight;
104 |       } else {
105 |         setActiveView(Math.round(num / screenHeight));
106 |         return num;
107 |       }
108 |     }
109 |     return scrollPos;
110 |   };
111 | 
112 |   // resets the drag distance when `isDragging` returns to false
113 |   useEffect(() => {
114 |     if (!isDragging) {
115 |       if (-dragDistance > dragResistance) {
116 |         setScrollPos((scrollPos) => scrollPosCheck(scrollPos + screenHeight));
117 |       } else if (dragDistance > dragResistance) {
118 |         setScrollPos((scrollPos) => scrollPosCheck(scrollPos - screenHeight));
119 |       }
120 |       setDragDistance(0);
121 |     }
122 |     // eslint-disable-next-line react-hooks/exhaustive-deps
123 |   }, [isDragging]);
124 | 
125 |   // sets the screen scrollPosition in relation to the drag distance
126 |   useEffect(() => {
127 |     if (node) {
128 |       if (isDragging) {
129 |         node.scrollTo({ top: scrollPos - dragDistance });
130 |       } else {
131 |         node.scrollTo({ top: scrollPos, behavior: 'smooth' });
132 |       }
133 |     }
134 |   }, [dragDistance, isDragging, node, scrollPos]);
135 | 
136 |   return [ref, activeView] as const;
137 | }
138 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  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 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       process.env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl, {
112 |     headers: { 'Service-Worker': 'script' }
113 |   })
114 |     .then(response => {
115 |       // Ensure service worker exists, and that we really are getting a JS file.
116 |       const contentType = response.headers.get('content-type');
117 |       if (
118 |         response.status === 404 ||
119 |         (contentType != null && contentType.indexOf('javascript') === -1)
120 |       ) {
121 |         // No service worker found. Probably a different app. Reload the page.
122 |         navigator.serviceWorker.ready.then(registration => {
123 |           registration.unregister().then(() => {
124 |             window.location.reload();
125 |           });
126 |         });
127 |       } else {
128 |         // Service worker found. Proceed as normal.
129 |         registerValidSW(swUrl, config);
130 |       }
131 |     })
132 |     .catch(() => {
133 |       console.log(
134 |         'No internet connection found. App is running in offline mode.'
135 |       );
136 |     });
137 | }
138 | 
139 | export function unregister() {
140 |   if ('serviceWorker' in navigator) {
141 |     navigator.serviceWorker.ready
142 |       .then(registration => {
143 |         registration.unregister();
144 |       })
145 |       .catch(error => {
146 |         console.error(error.message);
147 |       });
148 |   }
149 | }
150 | 


--------------------------------------------------------------------------------