Initial commit

Created from https://vercel.com/new
mohs27 · May 27, 2024 · 1c44cea · 1c44cea
commit 1c44cea
Show file tree

Hide file tree

Showing 22 changed files with 1,841 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+/package-lock.json
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/LICENSE b/LICENSE
diff --git a/ReadMe.md b/ReadMe.md
@@ -0,0 +1,36 @@
+<div align="center">
+ <h1> ❄️ ReacTube ❄️ </h1>
+</div>
+
+
+
+
+## Description 🦚
+**ReacTube**, is a simple, single page, privacy friendly & distraction free YouTube front-end based on [Piped APIs](https://piped-docs.kavin.rocks/docs/api-documentation/). ReacTube does not contain features like subscriptions, library, registrations etc. It is designed in order to just search and watch, i.e. to be focused and particular about what user wants to watch rather than wasting time with recommendations or handling subscriptions etc.
+Its aim is to provides a simple and smooth user experience with features including:
+
+ - **PWA** 
+ - **Trendings**  
+ - **Search Results** 
+ - **Streaming videos** 
+ - **Dark Mode** 
+
+## Screenshots 🖼
+   - **Trending Page**  <br>
+  <img src="./src/images/trendings.JPG" width="45%" alt="TrendingPage"> <br> <br>
+   - **Search Results**  <br>
+  <img src="./src/images/searchResults.JPG" width="45%" alt="SearchResults"> <br> <br>
+   - **Video Player**  <br>
+  <img src="./src/images/VideoPlayer.JPG" width="45%" alt="VideoPlayer"> <br> <br>
+
+## ToDo
+
+- [ ] in-app instance selection
+- [ ] Redirection: An easy way to redirect YouTube links to this frontend. 
+- [ ] Hide Trending (optional) : only have a search bar on the home page.
+- [ ] Media Queue: Either enqueue, or at least to play videos in a single playlist consecutively. 
+
+
+## Acknowledgements 🙏
+- [Piped](https://github.com/teampiped/piped)
+- [Vercel](https://vercel.com/)
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "reactube-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "framer-motion": "^10.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-player": "^2.12.0",
+    "react-reveal": "1.2.2",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.2.7"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://cdn-icons-png.flaticon.com/512/3820/3820291.png"
+    />
+    <title>ReacTube</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script>
+      if('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('./serviceWorker.js').then((reg) => {
+            console.log('Worker Registered')
+          }).catch((err) => {
+            console.log('Error in service worker registration.')
+          })
+        })
+      }
+    </script>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,26 @@
+{
+    "short_name": "ReacTube",
+    "name": "ReacTube App",
+    "icons": [
+      {
+        "src": "https://cdn-icons-png.flaticon.com/512/3820/3820291.png",
+        "sizes": "64x64 32x32 24x24 16x16",
+        "type": "image/x-png"
+      },
+      {
+        "src": "https://cdn-icons-png.flaticon.com/512/3820/3820291.png",
+        "type": "image/png",
+        "sizes": "192x192",
+        "purpose":"any maskable"
+      },
+      {
+        "src": "https://cdn-icons-png.flaticon.com/512/3820/3820291.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "start_url": "./index.html",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+  }
diff --git a/public/offline.html b/public/offline.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div style="height:100vh;display:flex;justify-content:center;align-items:center;">
+        <div style="background-color: cyan; padding:40px 40px;">
+            <p>You are offline please connect to internet.</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/public/serviceWorker.js b/public/serviceWorker.js
@@ -0,0 +1,39 @@
+//STORAGE OF BROWSER
+const CACHE_NAME = "version-1";
+const urlsToCache = ["index.html", "offline.html"];
+const self = this;
+
+//installation
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log("Opened cache");
+
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+// listen for request
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((res) => {
+      return fetch(event.request).catch(() => caches.match("offline.html"));
+    })
+  );
+});
+
+// actitivate the service worker
+self.addEventListener("activate", (event) => {
+    const cacheWhitelist = [];
+    cacheWhitelist.push(CACHE_NAME);
+    event.waitUntil(
+        caches.keys().then((cacheNames) => Promise.all(
+            cacheNames.map((cacheName) => {
+                if(!cacheWhitelist.includes(cacheName)){
+                    return caches.delete(cacheName);
+                }
+            })
+        ))
+    )
+});
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  width: 80%;
+  max-width: 600px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.modal-content {
+  padding: 16px;
+  text-align: center;
+}
+
+.modal button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.logo {
+  height: 49px; /* Increase the height as desired */
+}
+
+.custom-text-color {
+  font-size: 28px; /* Increase the font size as desired */
+}
+
+
+@media (max-width: 640px) {
+  .modal {
+    width: 90%;
+    max-width: 90%;
+  }
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+// import Navbar from "./Components/Navbar";
+// import TrendingSection from "./Components/TrendingSection";
+import Footer from "./Components/Footer";
+const TrendingSection = React.lazy(() =>
+  import("./Components/TrendingSection")
+);
+const Navbar = React.lazy(() => import("./Components/Navbar"));
+
+const baseUrl = "https://pipedapi.kavin.rocks";
+
+const App = () => {
+  return (
+    <>
+      <Navbar baseUrl={baseUrl}/>
+      <TrendingSection baseUrl={baseUrl}/>
+      <Footer/>
+    </>
+  );
+};
+
+export default App;
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
@@ -0,0 +1,50 @@
+
+import React from "react";
+import { FaGithub } from "react-icons/fa";
+
+const Footer = () => {
+    return (
+        <footer className="bg-custom h-12 sm:h-20 flex items-center ">
+        <div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 flex justify-between items-center w-full">
+            <div className="flex items-center text-white">
+                <a
+                    href="https://github.com/NeeRaj-2401/ReacTube"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center cursor-pointer"
+                >
+                    <FaGithub className="text-white ml-2" size={26} />
+                </a>
+            </div>
+            <span className="text-white sm:text-xl ml-2 cursor-pointer ">
+                <a
+                    href="https://github.com/NeeRaj-2401"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center"
+                >
+                    NRJ YDV &copy;
+                </a>
+            </span>
+            <div className="flex items-center justify-center">
+                <a
+                    href="https://github.com/TeamPiped"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center cursor-pointer"
+                >
+                    <img
+                        src="https://avatars.githubusercontent.com/u/74294114?s=200&v=4"
+                        alt=""
+                        className="h-6 w-6 sm:h-12 sm:w-12 object-cover mr-4"
+                    />
+                </a>
+            </div>
+        </div>
+    </footer>
+
+
+    );
+};
+
+export default Footer;
diff --git a/src/Components/LoaderModal.jsx b/src/Components/LoaderModal.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+const LoaderModal = () => {
+  return (
+    <div className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white p-5 rounded-md flex items-center">
+        <svg
+          className="animate-spin h-8 w-8 mr-4 text-blue-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zM20 12a8 8 0 01-8 8v-4a4 4 0 004.783-3.783L20 12zm-8-8a7.963 7.963 0 015.938 3h-3.875A4.002 4.002 0 0012 8V4z"
+          ></path>
+        </svg>
+        <span className="text-gray-700">Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+export default LoaderModal;