From bd7b6fd63c0e7e2391ac45fd4f47d22750195953 Mon Sep 17 00:00:00 2001 From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Wed, 8 Jan 2025 16:28:05 -0500 Subject: [PATCH] update --- README.md | 360 ++++++++++++------------------------------------- src/index.html | 6 +- 2 files changed, 91 insertions(+), 275 deletions(-) diff --git a/README.md b/README.md index 878bc74..b713e01 100644 --- a/README.md +++ b/README.md @@ -1,309 +1,125 @@ -# **bitvid: Building a Nostr + WebTorrent Video Streaming Client** +![](https://bitvid.netlify.app/assets/jpg/bitvid.jpg) + +# bitvid - Decentralized Video Sharing ##### _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. +**bitvid** is a decentralized platform where users can share videos and follow creators with privacy and freedom. Built with a static site architecture, it’s lightweight, efficient, and fully decentralized, making it ideal for hosting or local deployment. --- -## **1. Overview** +## Features -### **1.1 Objectives** - -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. -3. Fetch video content via WebTorrent and display published videos on a decentralized platform. -4. Operate entirely client-side with static hosting. -5. Use Nostr to store and retrieve metadata. +- **Decentralized Sharing**: Video sharing without central servers. +- **Private Video Listings**: Share encrypted videos for added privacy. +- **Nostr Integration**: Use Nostr keys for login and interaction. +- **WebTorrent Streaming**: Stream videos directly through torrent technology. +- **Developer-Friendly**: Open source and customizable for your needs. +- **Responsive Design**: Seamless experience across devices. --- -## **2. Specifications** +## For Users -### **2.1 Nostr Note Specification** +### Getting Started -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** - -```json -{ - "kind": 30078, - "pubkey": "npub1exampleauthorhash", - "created_at": 1700000000, - "tags": [ - ["d", "example-video-identifier"], - ["t", "video"], - ["t", "tutorial"] - ], - "content": { - "type": "video", - "magnet_link": "magnet:?xt=urn:btih:examplehash&dn=nostr-video.mp4", - "title": "Nostr Video Example", - "description": "A tutorial on Nostr and WebTorrent integration.", - "tags": ["video", "tutorial", "nostr"], - "author": "npub1exampleauthorhash", - "upload_time": 1700000000, - "file_size": "20MB", - "thumbnail": "https://example.com/thumbnail.jpg", - "duration": "15m20s" - } -} -``` - -#### **Fields Description** - -- **kind**: `30078` (custom app data for video metadata). -- **tags**: - - `"d"`: Unique identifier (e.g., hash of the magnet link or custom ID) for replaceable events. - - `"t"`: Categorization tags for searching. -- **content**: - - `type`: Defines the content type (`video`). - - `magnet_link`: WebTorrent magnet link for the video. - - `title`, `description`, `tags`: Metadata for the video. - - `author`: Uploader’s Nostr public key (`npub`). - - `upload_time`: Unix timestamp of the upload. - - `file_size`: Size of the video file. - - `thumbnail`: URL of the video thumbnail. - - `duration`: Optional video duration (retrieved from metadata if available). +1. **Visit the Site**: Navigate to the live instance of **bitvid** (e.g., `https://bitvid.btc.us`). +2. **Login with Nostr**: + - Use a compatible Nostr browser extension or manually input your public key. +3. **Upload Videos**: + - Provide a title, magnet link, and optional thumbnail or description. + - Toggle "Private" for encrypted listings. +4. **Stream Videos**: + - Play videos directly in the browser using WebTorrent technology. --- -## **3. Framework Outline** +## For Developers -### **3.1 Technologies** +### Local Setup -- **Frontend**: React (or Vanilla JavaScript for smaller scale). -- **Decentralized Protocols**: - - **Nostr** for metadata storage, retrieval, and updates. - - **WebTorrent** for video content distribution. -- **Hosting**: Static hosting (e.g., GitHub Pages, Netlify, or Vercel). +To run **bitvid** locally: ---- +1. Clone the repository: -### **3.2 Application Structure** + ```bash + git clone https://github.com/PR0M3TH3AN/bitvid.git + cd bitvid + ``` -Organize the project into reusable components and modules to manage complexity and scalability. +2. Start a local server: -#### **3.2.1 Directory Structure** - -``` -src/ -├── components/ # Reusable UI components -│ ├── Header.js # Navigation header -│ ├── Footer.js # Footer with links and copyright -│ ├── Layout.js # Wrapper for consistent page structure -│ ├── MagnetInput.js # Input for magnet links -│ ├── VideoForm.js # Form for uploading video metadata -│ ├── EditVideoForm.js # Form for editing video metadata -│ ├── VideoList.js # Displays list of videos -│ ├── VideoCard.js # Individual video item card -├── pages/ # Page-level components -│ ├── Home.js # Home page with video list -│ ├── Upload.js # Upload page for video publishing -│ ├── About.js # About page -├── utils/ # Utility functions and services -│ ├── torrent.js # WebTorrent integration -│ ├── nostr.js # Nostr event handling -├── App.js # Main application component -└── index.js # Entry point -``` - ---- - -### **3.3 Phases** - -#### **Phase 1: Core Functionality** - -1. **Input and Parse Magnet Links**: - - Create `MagnetInput` to accept user input for a magnet link. - - Validate the link format. -2. **Fetch Torrent Metadata**: - - Use `WebTorrent` to fetch file size, name, and optional metadata (e.g., duration, thumbnail). -3. **Publish Metadata to Nostr**: - - Build `VideoForm` to collect metadata (title, description, tags, thumbnail URL). - - Use `nostr-tools` to create and sign events, then publish them to relays. -4. **Display Videos**: - - Create `VideoList` to fetch and display videos published on Nostr relays. - ---- - -#### **Phase 2: Editing and Replaceable Events** - -1. **Enable Editing**: - - Fetch the latest metadata using the unique `d` tag. - - Prepopulate an editable form (`EditVideoForm`) with current metadata. - - Publish updates using replaceable events to overwrite the existing entry. -2. **UI for Editing**: - - Add an "Edit" button to each video card. - - Redirect users to the editing page or show a modal with the editing form. - ---- - -#### **Phase 3: UI Enhancements** - -1. **Reusable Layouts**: - - Add `Header` and `Footer` for navigation and consistent structure. - - Use `Layout` to wrap all pages. -2. **Dynamic Pages**: - - Implement routing (e.g., React Router) for `Home`, `Upload`, and `About` pages. -3. **Video Cards**: - - Create `VideoCard` to display individual video metadata in `VideoList`. - ---- - -#### **Phase 4: Performance Optimization** - -1. **Caching**: - - Use `IndexedDB` or `LocalStorage` to cache fetched metadata for offline usage. -2. **Pagination or Lazy Loading**: - - Improve `VideoList` for better handling of large datasets. -3. **Reduce Network Calls**: - - Debounce or throttle relay queries for efficiency. - ---- - -#### **Phase 5: Advanced Features** - -1. **Video Previews**: - - Stream videos directly in the browser using WebTorrent and HTML5 `