Skip to content

Commit

Permalink
**Implementations and Configurations:**
Browse files Browse the repository at this point in the history
- **Added `dotenv`**: Implemented environment management using `dotenv`.
- **Adjusted Ports**:
  - *Vite*: Modified server port settings.
  - *Express*: Altered server port settings.
- **Refined Vite Build Configuration**: Enhanced the build configuration settings.
- **Cleaned `package.json`**: Removed unused and deprecated dependencies.

**Formatting and Styling:**
- **Applied `Prettier` Formatting**: Ensured code formatting adheres to Prettier standards.
- **Styled 'Close' Button**: Improved the visual design of the close button on `EpisodeCard`.

**Code Refactoring and Fixes:**
- **Refactored Profile Page**: Overhauled Profile Page (Note: Still not ready for production).
- **Fixed Infinite Loop Issue**: Resolved a major issue with infinite loops caused by search parameter conflicts.

**Feature Additions:**
- **Added Upcoming Season Fetch Function**: Implemented functionality to fetch upcoming seasons.
- **Added `useSeason` Hook**: Introduced a new hook (`getSeason`) for retrieving season details.
- **Integrated Upcoming Season List on Home**: Displayed upcoming seasons on the home page.

**Player Adjustments:**
- **Modified Player Load Behavior**: Changed the player's load behavior from on `play` request to `eager` loading.
  • Loading branch information
akionii committed Apr 14, 2024
1 parent 5de59d5 commit 6a74ca0
Show file tree
Hide file tree
Showing 20 changed files with 532 additions and 484 deletions.
6 changes: 3 additions & 3 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ VITE_SKIP_TIMES="https://api.aniskip.com/"

# Proxy Server URL
# Description: URL of the proxy server used to circumvent CORS issues or when making requests to external services that do not support CORS.
# Example: VITE_PROXY_URL="https://corsproxy.io"
VITE_PROXY_URL="https://corsproxy.io"
# Example: VITE_PROXY_URL="https://corsproxy.io/"
VITE_PROXY_URL="https://corsproxy.io/"

# Server Port
# Description: The port number on which the server will listen. Important for server configuration in both development and production environments.
# Example: PORT=5173
# Example & Default: PORT=5173
PORT=5173
65 changes: 43 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,24 @@ MIRURO

## What is Miruro?

Welcome to **Miruro** - your ultimate anime destination! 😎 Explore **[miruro.com](https://www.miruro.com)** and dive into the world of anime, powered by the incredible **[Consumet API](https://github.com/consumet)**.
Welcome to **Miruro** - your ultimate anime destination! 🤯 Explore **[miruro.com](https://www.miruro.com)** and dive into the world of anime, powered by the incredible **[CONSUMET API](https://github.com/consumet)**.

Crafted with using **React** and **Vite**, our site rocks a slick and modern interface. Experience lightning-fast performance and smooth navigation as you explore a vast collection of HD anime titles.

Enjoy your favorite shows with English subs or dubs, and here's the kicker - you can download individual episodes hassle-free, no sign-up required!

## Features 🪴
<!-- ## Features 🪴 -->

<details>
<summary>View More</summary>
<summary>Features [View More]</summary>

### General

- Dub Anime support
- User-friendly interface
- Mobile responsive
- Fast page load
- White/Dark theme
- Light/Dark theme
- Continue watching section

### Watch Page
Expand All @@ -66,7 +66,7 @@ Enjoy your favorite shows with English subs or dubs, and here's the kicker - you
<div style="text-align: left;">
<img src="https://raw.githubusercontent.com/Miruro-no-kuon/.github/main/profile/home-page.webp" alt="Home Page" style="max-width: 70%;" >
<details>
<summary>View More</summary>
<summary>Screenshots [View More]</summary>
<br>
<img src="https://raw.githubusercontent.com/Miruro-no-kuon/.github/main/profile/splash-page.webp" alt="Splash Page" style="max-width: 70%;">
<img src="https://raw.githubusercontent.com/Miruro-no-kuon/.github/main/profile/watch-page.webp" alt="Watch Page" style="max-width: 70%;">
Expand All @@ -90,68 +90,89 @@ cd Miruro

### Basic Pre-Requisites

This platform is built on <a href="https://nodejs.org/">`Node.js`</a> and utilizes <a href="https://bun.sh/">`bun`</a> to ensure the quickest response times achievable. While `npm` can also be used, the commands for npm would mirror those of bun, simply substituting the specific commands accordingly.
This platform is built on [Node.js](https://nodejs.org/) and utilizes [Bun](https://bun.sh/) to ensure the quickest response times achievable. While `npm` can also be used, the commands for npm would mirror those of Bun, simply substituting the specific commands accordingly.

### Verify installations
> Bun is now available on **Windows**, **Linux**, and **macOS**. Below are the installation commands for each operating system.
### Install Bun

- Linux & macOS

```bash
node -v
bun -v
curl -fsSL https://bun.sh/install | bash
```

### Install Dependencies (npm also works)
- Windows

```powershell
powershell -c "irm bun.sh/install.ps1 | iex"
```

### Verify installations

- Check that both Node.js and Bun are correctly installed by running.

```bash
bun install && cd server && bun install
node -v
bun -v
```

#### or
### Install Dependencies

- You can use Bun to install dependencies quickly. If you prefer, `npm` can also be used with equivalent commands.

```bash
bun iu
bun install
```

### Copy the `.env.example` contents to `.env` in the root folder
### Copy `.env.example` into `.env.local` in the root folder

- `.env.local` & `.env` are both viable options, you can also set
`.env.test.local`
`.env.development.local`
`.env.production.local`

```bash
cp .env.example .env
cp .env.example .env.local
```

### 3. Run on development &/or production (npm also works)

#### Start development version
- Run on development mode

```bash
bun run dev
```

#### Start production version
- Run on production mode

```bash
bun start
```

## For Local Development 💻

Please be aware that self-hosting this application is strictly limited to personal use only. Commercial utilization is prohibited, and the inclusion of advertisements on your self-hosted website may lead to consequences, including potential site takedown measures.
**⚠️ RESTRICTED USE**

**Please be aware:** Self-hosting this application is **strictly limited to personal use only**. Commercial utilization is **prohibited**, and the inclusion of advertisements on your self-hosted website may lead to serious consequences, including **potential site takedown measures**. Ensure compliance to avoid any legal or operational issues.

#### Deploy your own Miruro Instance
> Deploy **your own Miruro** Instance
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMiruro-no-kuon%2FMiruro&env=VITE_BACKEND_URL,VITE_SKIP_TIMES,VITE_PROXY_URL,PORT&project-name=miruro&repository-name=miruro)

[![Vercel Deploy Guide](https://github.com/Miruro-no-kuon/Miruro/assets/77152696/98b95343-a15b-4302-92ee-e4910860887e)](https://github.com/Miruro-no-kuon/Miruro/assets/77152696/98b95343-a15b-4302-92ee-e4910860887e)

## License 📝

Hey there! Just so you know, this project follows a Custom BY-NC License. What does that mean? Well, you're welcome to use, share, and tinker with the code as long as it's for non-commercial purposes. Oh, and don't forget to give credit to our platform, [miruro.com](https://www.miruro.com). If you're thinking of using it for commercial stuff, sorry, that's a no-go. For all the details, check out the [LICENSE](LICENSE) file. Got questions or need special permissions? Feel free to shoot us a message!
Hey there! Just so you know, this project follows a Custom BY-NC License. What does that mean? Well, you're welcome to use, share, and tinker with the code as long as it's for non-commercial purposes. Oh, and **don't forget to give credit** to our platform, [miruro.com](https://www.miruro.com). If you're thinking of using it for commercial stuff, sorry, that's a no-go. For all the details, check out the [LICENSE](LICENSE) file. Got questions or need special permissions? Feel free to shoot us a message!

## Found a Bug? 🐞

Uh-oh, looks like you stumbled upon a bug? No worries, we're here to squash it! Just head over to our [issues](https://github.com/Miruro-no-kuon/Miruro-no-Kuon/issues) section on GitHub and let us know what's up.

## Get in Touch! 📧

Got questions, suggestions, or just wanna say hi? Drop us a line at [email protected]. You can also hang out with us on Discord.
Got questions, suggestions, or just wanna say hi? Drop us a line at <[email protected]>. You can also hang out with us on Discord.

- Visit our website at **[Miruro.com](https://www.miruro.com)**

Expand All @@ -165,7 +186,7 @@ Got questions, suggestions, or just wanna say hi? Drop us a line at miruro@proto

## Support & Contributions 🤲

#### [Star this project](https://github.com/Miruro-no-kuon/Miruro) ⭐️
- 🌟 [**THIS PROJECT**](https://github.com/Miruro-no-kuon/Miruro)

#### Want to Help Out?

Expand Down
46 changes: 5 additions & 41 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,73 +1,37 @@
{
"name": "miruro_no_kuon",
"private": true,
"version": "0.4.2",
"version": "0.4.3",
"type": "module",
"scripts": {
"dev": "vite --port 8080",
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview",
"start": "vite build && cd server && bun run server.ts",
"lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier --write ."
},
"dependencies": {
"@apollo/client": "^3.9.4",
"@cloudflare/wrangler": "^1.21.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@material-tailwind/react": "^2.1.4",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.2",
"@types/cors": "^2.8.17",
"@types/express": "^4.17.21",
"@vercel/speed-insights": "^1.0.8",
"@vidstack/player-react": "^1.6.0",
"@vidstack/react": "next",
"axios": "^1.6.0",
"carousel": "",
"chalk": "^5.3.0",
"express": "^4.19.2",
"fortawesome": "^0.0.1-security",
"graphql": "^16.8.1",
"hls.js": "^1.5.7",
"image-webpack-loader": "^8.1.0",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-pngquant": "^9.0.2",
"ldrs": "^1.0.1",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lru-cache": "latest",
"node-fetch": "^3.3.2",
"plyr": "^3.7.8",
"polished": "^4.3.1",
"prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.5.12",
"query-string": "^9.0.0",
"prettier-plugin-tailwindcss": "^0.5.13",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-id-swiper": "^4.0.0",
"react-infinite-scroll-component": "^6.1.0",
"react-lazy-load-image-component": "^1.6.0",
"react-player": "^2.14.1",
"react-router-dom": "latest",
"react-select": "^5.8.0",
"react-slick": "^0.30.2",
"scrollreveal": "^4.0.9",
"slick-carousel": "^1.8.1",
"styled-components": "^6.1.0",
"swiper": "^11.0.7",
"tailwindcss": "^3.3.5",
"typescript": "^5.0.0",
"video.js": "^8.6.1",
"vidstack": "^0.6.14",
"vite-plugin-checker": "^0.6.2",
"winston": "^3.11.0"
"typescript": "^5.0.0"
},
"devDependencies": {
"@types/bun": "latest",
Expand All @@ -77,7 +41,7 @@
"@typescript-eslint/eslint-plugin": "^7.4.0",
"@typescript-eslint/parser": "^7.4.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint": "8",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
Expand Down
10 changes: 5 additions & 5 deletions server/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Server README

This README provides an overview of the `server.js` file, which is an Express server designed to serve static files, handle error logging, and provide instructions for running it using the Bun JavaScript runtime.
This README provides an overview of the `server.ts` file, which is an Express server designed to serve static files, handle error logging, and provide instructions for running it using the Bun JavaScript runtime.

## `server.js` Overview ℹ️
## `server.ts` Overview ℹ️

The `server.js` file includes the following features:
The `server.ts` file includes the following features:

- Express server setup
- Static file serving to serve files from the `dist` directory 📂
Expand All @@ -25,7 +25,7 @@ To run the server, follow these steps:
3. Start the server:

```bash
bun run server.js
bun run server.ts
```

- The server will start running on <http://localhost:5173> by default. You can modify the `PORT` variable in `server.js` to change the port as needed.
- The server will start running on <http://localhost:${PORT}> by default. You can modify the `PORT` .env variable to change the port in `server.ts` as needed.
3 changes: 2 additions & 1 deletion server/server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import os from 'os';
const app = express();

// Configuration settings
const PORT = process.env.PORT || 5173;
// TODO const PORT = import.meta.env.VITE_PORT || 5173;
const PORT = 5173;
const DIST_DIR = path.join(__dirname, '../dist');
const INDEX_FILE = path.join(DIST_DIR, 'index.html');

Expand Down
29 changes: 23 additions & 6 deletions src/components/Home/EpisodeCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import { Episode } from '../../hooks/interface';
import { IoIosCloseCircle } from 'react-icons/io';
import { IoIosCloseCircleOutline } from 'react-icons/io';

const LOCAL_STORAGE_KEYS = {
WATCHED_EPISODES: 'watched-episodes',
Expand All @@ -33,6 +33,11 @@ const popInAnimation = keyframes`
100% { opacity: 1; transform: translateY(0%); }
`;

const slideDownAnimation = keyframes`
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0%); }
`;

const StyledSwiperContainer = styled(Swiper)`
position: relative;
max-width: 100%;
Expand Down Expand Up @@ -148,19 +153,31 @@ const ContinueWatchingTitle = styled.h2`

const CloseButton = styled.button`
position: absolute;
top: 0px; // Adjust based on design requirements
right: 0px; // Adjust based on design requirements
top: 0.25rem; // Adjust based on design requirements
right: 0.25rem; // Adjust based on design requirements
background: transparent;
border: none;
color: white;
color: #ffffff;
cursor: pointer;
display: none; // Hidden by default
animation: ${slideDownAnimation} 0.5s ease forwards;
transition: 0.2s ease-in-out;
svg {
transition: 0.2s ease-in-out;
transform: scale(0.85);
&:hover,
&:active,
&:focus {
transform: scale(1);
}
}
${AnimeEpisodeCard}:hover & {
display: block; // Show only on hover
}
`;

const FaCircle = styled(IoIosCloseCircle)`
const FaCircle = styled(IoIosCloseCircleOutline)`
font-size: 2.25rem;
`;

Expand Down Expand Up @@ -236,7 +253,7 @@ export const EpisodeCard: React.FC = () => {
// Conditional title display
const displayTitle = `${animeTitle}${episode.title ? ` - ${episode.title}` : ''}`;

const handleRemoveAllEpisodes = (animeId) => {
const handleRemoveAllEpisodes = (animeId: string) => {
const updatedEpisodes = JSON.parse(watchedEpisodesData || '{}');
delete updatedEpisodes[animeId];

Expand Down
Loading

0 comments on commit 6a74ca0

Please sign in to comment.