thePR0M3TH3AN/bitvid
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2025-09-08 06:58:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Keep Creating Online
2025-01-08 14:54:13 -05:00
parent e307f2ed16
commit 4bd663253f
4 changed files with 71 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
README.md
View File

@@ -1,5 +1,7 @@
# **bitvid: Building a Nostr + WebTorrent Video Streaming Client** # **bitvid: Building a Nostr + WebTorrent Video Streaming Client**
##### _IPNS: k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1_
This project plan outlines the steps to build a decentralized video streaming client using **Nostr** for metadata and **WebTorrent** for video distribution. It includes technical specifications, a framework outline, and a phased approach for development. This project plan outlines the steps to build a decentralized video streaming client using **Nostr** for metadata and **WebTorrent** for video distribution. It includes technical specifications, a framework outline, and a phased approach for development.
--- ---
@@ -7,6 +9,7 @@ This project plan outlines the steps to build a decentralized video streaming cl
## **1. Overview** ## **1. Overview**
### **1.1 Objectives** ### **1.1 Objectives**
1. Enable users to upload videos by posting a magnet link along with metadata (title, description, tags, thumbnail). 1. Enable users to upload videos by posting a magnet link along with metadata (title, description, tags, thumbnail).
2. Allow users to edit video metadata (e.g., description, thumbnail URL) without duplicating content. 2. Allow users to edit video metadata (e.g., description, thumbnail URL) without duplicating content.
3. Fetch video content via WebTorrent and display published videos on a decentralized platform. 3. Fetch video content via WebTorrent and display published videos on a decentralized platform.
@@ -18,9 +21,11 @@ This project plan outlines the steps to build a decentralized video streaming cl
## **2. Specifications** ## **2. Specifications**
### **2.1 Nostr Note Specification** ### **2.1 Nostr Note Specification**
We will use **Kind `30078`** for arbitrary custom app data. The note will store all video metadata, enabling discovery and categorization. Editing is supported using the `d` tag in **Replaceable Events**. We will use **Kind `30078`** for arbitrary custom app data. The note will store all video metadata, enabling discovery and categorization. Editing is supported using the `d` tag in **Replaceable Events**.
#### **Nostr Event Schema** #### **Nostr Event Schema**
```json ```json
{ {
"kind": 30078, "kind": 30078,
@@ -47,6 +52,7 @@ We will use **Kind `30078`** for arbitrary custom app data. The note will store
``` ```
#### **Fields Description** #### **Fields Description**
- **kind**: `30078` (custom app data for video metadata). - **kind**: `30078` (custom app data for video metadata).
- **tags**: - **tags**:
- `"d"`: Unique identifier (e.g., hash of the magnet link or custom ID) for replaceable events. - `"d"`: Unique identifier (e.g., hash of the magnet link or custom ID) for replaceable events.
@@ -66,6 +72,7 @@ We will use **Kind `30078`** for arbitrary custom app data. The note will store
## **3. Framework Outline** ## **3. Framework Outline**
### **3.1 Technologies** ### **3.1 Technologies**
- **Frontend**: React (or Vanilla JavaScript for smaller scale). - **Frontend**: React (or Vanilla JavaScript for smaller scale).
- **Decentralized Protocols**: - **Decentralized Protocols**:
- **Nostr** for metadata storage, retrieval, and updates. - **Nostr** for metadata storage, retrieval, and updates.
@@ -75,9 +82,11 @@ We will use **Kind `30078`** for arbitrary custom app data. The note will store
--- ---
### **3.2 Application Structure** ### **3.2 Application Structure**
Organize the project into reusable components and modules to manage complexity and scalability. Organize the project into reusable components and modules to manage complexity and scalability.
#### **3.2.1 Directory Structure** #### **3.2.1 Directory Structure**
``` ```
src/ src/
├── components/ # Reusable UI components ├── components/ # Reusable UI components
@@ -105,6 +114,7 @@ src/
### **3.3 Phases** ### **3.3 Phases**
#### **Phase 1: Core Functionality** #### **Phase 1: Core Functionality**
1. **Input and Parse Magnet Links**: 1. **Input and Parse Magnet Links**:
- Create `MagnetInput` to accept user input for a magnet link. - Create `MagnetInput` to accept user input for a magnet link.
- Validate the link format. - Validate the link format.
@@ -119,6 +129,7 @@ src/
--- ---
#### **Phase 2: Editing and Replaceable Events** #### **Phase 2: Editing and Replaceable Events**
1. **Enable Editing**: 1. **Enable Editing**:
- Fetch the latest metadata using the unique `d` tag. - Fetch the latest metadata using the unique `d` tag.
- Prepopulate an editable form (`EditVideoForm`) with current metadata. - Prepopulate an editable form (`EditVideoForm`) with current metadata.
@@ -130,6 +141,7 @@ src/
--- ---
#### **Phase 3: UI Enhancements** #### **Phase 3: UI Enhancements**
1. **Reusable Layouts**: 1. **Reusable Layouts**:
- Add `Header` and `Footer` for navigation and consistent structure. - Add `Header` and `Footer` for navigation and consistent structure.
- Use `Layout` to wrap all pages. - Use `Layout` to wrap all pages.
@@ -141,6 +153,7 @@ src/
--- ---
#### **Phase 4: Performance Optimization** #### **Phase 4: Performance Optimization**
1. **Caching**: 1. **Caching**:
- Use `IndexedDB` or `LocalStorage` to cache fetched metadata for offline usage. - Use `IndexedDB` or `LocalStorage` to cache fetched metadata for offline usage.
2. **Pagination or Lazy Loading**: 2. **Pagination or Lazy Loading**:
@@ -151,6 +164,7 @@ src/
--- ---
#### **Phase 5: Advanced Features** #### **Phase 5: Advanced Features**
1. **Video Previews**: 1. **Video Previews**:
- Stream videos directly in the browser using WebTorrent and HTML5 `<video>`. - Stream videos directly in the browser using WebTorrent and HTML5 `<video>`.
2. **Search and Filters**: 2. **Search and Filters**:
@@ -163,6 +177,7 @@ src/
## **4. Development Milestones** ## **4. Development Milestones**
### **Milestone 1: Basic Upload and Display** ### **Milestone 1: Basic Upload and Display**
- Implement `MagnetInput` and `VideoForm`. - Implement `MagnetInput` and `VideoForm`.
- Fetch and publish metadata to Nostr. - Fetch and publish metadata to Nostr.
- Build `VideoList` to display published videos. - Build `VideoList` to display published videos.
@@ -172,6 +187,7 @@ src/
--- ---
### **Milestone 2: Editing Support** ### **Milestone 2: Editing Support**
- Implement `EditVideoForm` for editing metadata. - Implement `EditVideoForm` for editing metadata.
- Add `d` tags to video events for replaceable updates. - Add `d` tags to video events for replaceable updates.
- Fetch and update metadata seamlessly. - Fetch and update metadata seamlessly.
@@ -181,6 +197,7 @@ src/
--- ---
### **Milestone 3: Complete UI** ### **Milestone 3: Complete UI**
- Add `Header`, `Footer`, and `Layout` for consistent design. - Add `Header`, `Footer`, and `Layout` for consistent design.
- Implement routing for `Home`, `Upload`, and `About`. - Implement routing for `Home`, `Upload`, and `About`.
@@ -189,6 +206,7 @@ src/
--- ---
### **Milestone 4: Optimized Performance** ### **Milestone 4: Optimized Performance**
- Implement caching and pagination for `VideoList`. - Implement caching and pagination for `VideoList`.
- Optimize network calls for fetching Nostr events. - Optimize network calls for fetching Nostr events.
@@ -197,6 +215,7 @@ src/
--- ---
### **Milestone 5: Advanced Features** ### **Milestone 5: Advanced Features**
- Add direct video streaming using WebTorrent. - Add direct video streaming using WebTorrent.
- Implement search and filtering for videos. - Implement search and filtering for videos.
- Enable user reactions and comments. - Enable user reactions and comments.
@@ -208,6 +227,7 @@ src/
## **5. Hosting and Deployment** ## **5. Hosting and Deployment**
1. **Static Hosting Options**: 1. **Static Hosting Options**:
- **GitHub Pages**: Free and integrates with Git repositories. - **GitHub Pages**: Free and integrates with Git repositories.
- **Netlify**: Free plan with continuous deployment and custom domains. - **Netlify**: Free plan with continuous deployment and custom domains.
- **Vercel**: Optimized for React and other frontend frameworks. - **Vercel**: Optimized for React and other frontend frameworks.
@@ -230,35 +250,36 @@ src/
## **6. Tools and Libraries** ## **6. Tools and Libraries**
| **Category** | **Tool/Library** | **Description** | | **Category** | **Tool/Library** | **Description** |
|-----------------------|--------------------------|----------------------------------------------| | ---------------------- | ----------------------------- | ------------------------------------------ |
| Frontend Framework | React | Component-based UI development. | | Frontend Framework | React | Component-based UI development. |
| Decentralized Metadata| Nostr + nostr-tools | Protocol and tools for metadata storage. | | Decentralized Metadata | Nostr + nostr-tools | Protocol and tools for metadata storage. |
| Video Distribution | WebTorrent | Decentralized video streaming. | | Video Distribution | WebTorrent | Decentralized video streaming. |
| State Management | React Hooks | Local state for managing application data. | | State Management | React Hooks | Local state for managing application data. |
| Styling | Tailwind CSS (optional) | Utility-first styling framework. | | Styling | Tailwind CSS (optional) | Utility-first styling framework. |
| Hosting | Netlify, Vercel, GitHub Pages | Static hosting options. | | Hosting | Netlify, Vercel, GitHub Pages | Static hosting options. |
--- ---
## **7. Timeline** ## **7. Timeline**
| **Week** | **Task** | | **Week** | **Task** |
|----------|-------------------------------------------| | -------- | -------------------------------------------- |
| Week 1 | Setup project, create `MagnetInput`. | | Week 1 | Setup project, create `MagnetInput`. |
| Week 2 | Implement WebTorrent integration. | | Week 2 | Implement WebTorrent integration. |
| Week 3 | Build `VideoForm` and Nostr publishing. | | Week 3 | Build `VideoForm` and Nostr publishing. |
| Week 4 | Create `VideoList` to display videos. | | Week 4 | Create `VideoList` to display videos. |
| Week 5 | Implement `EditVideoForm` with updates. | | Week 5 | Implement `EditVideoForm` with updates. |
| Week 6 | Add `Header`, `Footer`, and `Layout`. | | Week 6 | Add `Header`, `Footer`, and `Layout`. |
| Week 7 | Optimize performance (caching, lazy load). | | Week 7 | Optimize performance (caching, lazy load). |
| Week 8 | Add advanced features (streaming, comments).| | Week 8 | Add advanced features (streaming, comments). |
--- ---
## **8. Risks and Mitigation** ## **8. Risks and Mitigation**
### **8.1 Key Risks** ### **8.1 Key Risks**
1. **Relay Downtime**: 1. **Relay Downtime**:
- **Mitigation**: Use multiple relays and implement fallback mechanisms. - **Mitigation**: Use multiple relays and implement fallback mechanisms.
2. **Private Key Management**: 2. **Private Key Management**:
@@ -267,6 +288,7 @@ src/
- **Mitigation**: Optimize performance early (pagination, caching). - **Mitigation**: Optimize performance early (pagination, caching).
### **8.2 Potential Challenges** ### **8.2 Potential Challenges**
- **Decentralized Thumbnails**: - **Decentralized Thumbnails**:
- Since we rely on user-provided URLs, broken links might occur. - Since we rely on user-provided URLs, broken links might occur.
- Educate users to host thumbnails on reliable services. - Educate users to host thumbnails on reliable services.

BIN
bitvid_logo/bitvid_favicon.afdesign~lock~
View File

Binary file not shown.

14
src/css/style.css
View File

@@ -216,4 +216,18 @@ button:focus {
padding: 0.75rem; padding: 0.75rem;
} }
} }
footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 4rem;
padding-top: 2rem;
}
footer a {
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
``` ```

18
src/index.html
View File

@@ -19,7 +19,10 @@
<link href="css/style.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
<div id="app" class="container mx-auto px-4 py-8"> <div
id="app"
class="container mx-auto px-4 py-8 min-h-screen flex flex-col"
>
<!-- Header --> <!-- Header -->
<header class="mb-8"> <header class="mb-8">
<div class="flex items-start"> <div class="flex items-start">
@@ -272,6 +275,19 @@
</div> </div>
</div> </div>
</div> </div>
<footer class="mt-auto pb-8 text-center">
<a
href="https://bitvid.btc.us"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
bitvid.btc.us
</a>
<p class="mt-2 text-xs text-gray-600 font-mono">
IPNS: k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1
</p>
</footer>
<!-- Scripts --> <!-- Scripts -->
<!-- Load WebTorrent via CDN --> <!-- Load WebTorrent via CDN -->