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 19:20:57 -05:00
parent bd7b6fd63c
commit 037b184304
8 changed files with 591 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/about.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bitvid | About</title>
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="BitVid - Markdown Viewer" />
<meta
property="og:description"
content="View and render markdown content dynamically."
/>
<meta
property="og:image"
content="https://bitvid.netlify.app/assets/jpg/bitvid.jpg"
/>
<meta property="og:url" content="https://bitvid.btc.us" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<!-- App Icons -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#0f172a" />
<!-- Tailwind CSS -->
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<!-- Main Layout Styles -->
<link href="css/style.css" rel="stylesheet" />
<!-- Markdown-Specific Styles -->
<link href="css/markdown.css" rel="stylesheet" />
</head>
<body class="bg-gray-100">
<div
id="app"
class="container mx-auto px-4 py-8 min-h-screen flex flex-col"
>
<!-- Header -->
<header class="mb-8">
<div class="flex items-start">
<!-- Logo links back to index.html (or "/") -->
<a href="index.html">
<img
src="assets/svg/bitvid-logo-light-mode.svg"
alt="BitVid Logo"
class="h-16"
/>
</a>
</div>
</header>
<!-- Markdown Content Section -->
<main>
<!--
We give this section a white background and a shadow
just like you originally had for other cards.
-->
<div id="markdown-container" class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4">Loading Content...</h2>
</div>
</main>
<!-- Footer -->
<footer class="mt-auto pb-8 text-center px-4">
<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>
<div class="mt-2 space-x-4">
<a
href="https://github.com/PR0M3TH3AN/bitvid"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
<a
href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
Nostr
</a>
<a
href="https://habla.news/p/nprofile1qyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qgdwaehxw309ahx7uewd3hkcqgswaehxw309ahx7um5wgh8w6twv5q3yamnwvaz7tm0venxx6rpd9hzuur4vgqzpzf6x8a95eyp99dmwm4zmkx4a3cxgrnwdtfe3ej504m3aqjk4ugldyww3a"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
Blog
</a>
<a
href="getting-started.html"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_self"
rel="noopener noreferrer"
>
Getting Started
</a>
<a
href="about.html"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_self"
rel="noopener noreferrer"
>
About
</a>
</div>
<p
class="mt-2 text-xs text-gray-600 font-mono break-all max-w-full overflow-hidden"
>
IPNS: k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1
</p>
</footer>
</div>
<!-- Marked.js (for converting markdown to HTML) -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Highlight.js (optional for code block highlighting) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
async function loadMarkdown() {
const response = await fetch("content/about.md");
if (response.ok) {
const markdown = await response.text();
const container = document.getElementById("markdown-container");
// Convert markdown to HTML
const html = marked.parse(markdown);
// Insert the HTML into the container
container.innerHTML = html;
// (Optional) Highlight code blocks
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightBlock(block);
});
} else {
document.getElementById("markdown-container").innerHTML =
'<p class="text-red-500">Error loading content. Please try again later.</p>';
}
}
loadMarkdown();
</script>
</body>
</html>

50
src/content/about.md Normal file
View File

@@ -0,0 +1,50 @@
![](https://bitvid.netlify.app/assets/jpg/bitvid.jpg)
# About bitvid: Decentralized Video Sharing
Welcome to **bitvid**, a platform where video sharing meets the power of decentralization. **bitvid** is more than just a video-sharing site—it's a groundbreaking way to share, discover, and enjoy content, leveraging the latest in blockchain, peer-to-peer, and privacy-centric technologies.
---
## **How Does It Work?**
At its core, **bitvid** combines two powerful technologies:
1. **WebTorrent**: This enables seamless streaming directly from peers using magnet links. Videos aren't hosted on centralized servers but are distributed across a network of peers. This ensures scalability, faster downloads, and freedom from server outages.
2. **Nostr Integration**: **bitvid** uses the Nostr protocol to manage video metadata, user authentication, and secure publishing. This means your account and content are not tied to a single platform or server. Your public key is your identity.
Together, these technologies create a decentralized and censorship-resistant platform.
---
## **Why is bitvid Different?**
1. **No Centralized Servers**: Traditional platforms store videos on centralized servers, giving them control over content availability. **bitvid** flips the script by allowing users to host and share videos directly with one another.
2. **Ownership and Privacy**:
- With Nostr, you retain full control of your identity and data. No email addresses or passwords are required—your cryptographic key is your gateway.
- Share public videos with the world or private ones encrypted for specific viewers.
3. **Open and Transparent**: **bitvid** runs on open-source code, ensuring transparency and inviting collaboration from the global community.
4. **Freedom of Speech**: Decentralization makes censorship nearly impossible. Your content belongs to you and can't be removed by external forces.
5. **Efficient and Scalable**: **bitvid**'s peer-to-peer streaming ensures that popular content becomes faster to access, not slower. The more people watch, the more efficient the network becomes.
---
## **What Can You Do on **bitvid**?**
- **Share Videos**: Upload your video using a magnet link and provide additional details like title, thumbnail, and description.
- **Stream Effortlessly**: Play videos directly in your browser without the need for bulky downloads or external players.
- **Support Creators**: Use zaps or donations to directly support your favorite creators, without intermediaries taking a cut.
- **Own Your Experience**: Customize your privacy settings, edit or delete content anytime, and maintain control over your videos.
---
## **Why Choose **bitvid**?**
**bitvid** represents a shift from traditional, centralized platforms to a decentralized, user-first model. By using blockchain principles and peer-to-peer technology, it offers a free, open, and secure environment for sharing and consuming videos. Whether you're a creator looking for a censorship-resistant platform or a viewer who values privacy and speed, **bitvid** is here for you.
**Join the revolution. Decentralize your videos.**

72
src/content/getting-started.md Normal file
View File

@@ -0,0 +1,72 @@
![](https://bitvid.netlify.app/assets/jpg/bitvid.jpg)
# **Getting Started with bitvid**
BTC DNS: [bitvid.btc.us](https://bitvid.btc.us)
ETH DNS: [bitvid.eth.limo](https://bitvid.eth.limo)
**_IPNS: k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1_**
Welcome to **bitvid**, a decentralized platform for video sharing that puts you in control. Using cutting-edge technologies like **Nostr** and **WebTorrent**, bitvid allows creators to share, stream, and manage video content directly through peer-to-peer connections, ensuring privacy, freedom, and ownership.
## What is bitvid?
bitvid is a video-sharing platform that decentralizes content delivery:
1. **Nostr Integration**: User authentication and video metadata are managed using Nostr, a decentralized messaging protocol. Log in with a Nostr-compatible browser extension to add, edit, or remove video posts.
2. **WebTorrent Streaming**: Videos are streamed using magnet links and WebTorrent technology. This allows viewers to fetch and play video content directly from peers in their browser without central servers.
## How Does It Work?
#### For Viewers
- Simply browse the bitvid site to discover available videos.
- Click on a video to stream it directly from other peers using WebTorrent. No additional downloads are required for playback.
#### For Creators
1. **Login with Nostr**: Use a Nostr extension like Alby or Nos2x to log in. This step connects your Nostr public key to your bitvid account.
2. **Share Videos**:
- Use the “Share a Video” form to submit a magnet link for your content.
- Add a title, optional thumbnail, and description to make your post more engaging.
3. **Seed Your Content**:
- Download [WebTorrent Desktop](https://webtorrent.io/desktop/).
- Open your video file in WebTorrent Desktop to generate a magnet link and seed it. Seeding ensures your video stays available for others to download and stream.
## Key Features
1. **Complete Control Over Content**:
- You can **edit** or **delete** your posts directly through the bitvid interface.
- Mark videos as private, encrypting their magnet links, so only you can access them.
2. **Peer-to-Peer Streaming**:
- Videos are streamed directly between viewers and seeders, avoiding censorship or central points of failure.
3. **Decentralized Authentication**:
- Nostr ensures secure, decentralized login without traditional user accounts.
### Requirements for Creators
- **Nostr Extension**: Install a Nostr extension to log in and manage your content.
- **WebTorrent Desktop**: Use it to seed your video files and generate magnet links. Without seeding, your videos won’t be accessible to others.
## Why Use bitvid?
bitvid eliminates the reliance on central servers, giving creators and viewers full control over their content. Whether you’re a content creator, privacy advocate, or decentralization enthusiast, bitvid provides a secure, resilient platform for sharing videos.
Start today by logging in with your Nostr extension and sharing your first video! For help or feedback, visit our [GitHub](https://github.com/PR0M3TH3AN/bitvid) or connect with us on Nostr.
---
**Disclaimer**
bitvid is a decentralized platform, and as such, we do not moderate or control the content shared by users. All videos and materials are the sole responsibility of their respective creators. We cannot be held liable for any issues arising from the use or sharing of content on this platform. Please use the service responsibly and adhere to applicable laws in your jurisdiction.
**A Work in Progress**
bitvid is still in its early stages. It currently has many bugs and lacks certain features that could make the platform more user-friendly and secure. Your feedback and contributions are vital to improving the platform.
**Join Us**
Are you a developer or someone with a technical background? We’d love to have your help! bitvid relies on community support to grow and evolve. Whether it’s improving security, adding new features, or fixing bugs, your input can make a big difference.
Check out the [GitHub repository](https://github.com/PR0M3TH3AN/bitvid) to get involved. Let’s build a better decentralized video-sharing platform together!

111
src/css/markdown.css Normal file
View File

@@ -0,0 +1,111 @@
/* markdown.css */
/*
Give the markdown container a standard text color
that is easy to read on a white background
*/
#markdown-container {
color: #333;
line-height: 1.6;
/* Padding & border radius come from your inline Tailwind classes */
}
/* Headings */
#markdown-container h1 {
font-size: 1.875rem; /* ~ text-2xl in Tailwind */
font-weight: 700;
margin-bottom: 1rem;
margin-top: 0.5rem;
color: #111;
}
#markdown-container h2 {
font-size: 1.5rem; /* ~ text-xl */
font-weight: 700;
margin-bottom: 0.75rem;
margin-top: 1.25rem;
color: #222;
}
#markdown-container h3 {
font-size: 1.25rem; /* ~ text-lg */
font-weight: 600;
margin-bottom: 0.75rem;
margin-top: 1rem;
}
#markdown-container h4,
#markdown-container h5,
#markdown-container h6 {
font-weight: 600;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
/* Paragraphs */
#markdown-container p {
margin-bottom: 1rem;
}
/* Lists */
#markdown-container ul,
#markdown-container ol {
margin-left: 1.25rem;
margin-bottom: 1rem;
}
#markdown-container li {
margin-bottom: 0.5rem;
}
/* Blockquotes */
#markdown-container blockquote {
border-left: 4px solid #ccc;
padding-left: 1rem;
margin: 1rem 0;
color: #555;
}
/* Inline code */
#markdown-container code {
background-color: #f6f8fa;
color: #d63384;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 0.875rem;
}
/* Code blocks */
#markdown-container pre {
background-color: #f6f8fa;
color: #333;
padding: 1rem;
border-radius: 0.25rem;
overflow-x: auto;
margin-bottom: 1rem;
}
/* Links */
#markdown-container a {
color: #bf5af2; /* pick a link color or use var(--color-primary) if you like */
text-decoration: none;
}
#markdown-container a:hover {
text-decoration: underline;
}
/* Horizontal Rule */
#markdown-container hr {
border: 0;
border-top: 1px solid #e5e7eb;
margin: 2rem 0;
}
/* Images */
#markdown-container img {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}

32
src/css/style.css
View File

@@ -1,4 +1,3 @@
```css
/* css/style.css */
:root {
@@ -26,19 +25,19 @@ header {
padding: 1rem 0;
display: flex;
justify-content: flex-start;
}
}
header img {
height: 6rem;
width: auto;
max-width: none;
}
.container {
max-width: 1480px;
margin: 0 auto;
padding: 1rem;
}
}
.container {
max-width: 1480px;
margin: 0 auto;
padding: 1rem;
}
/* Video Grid */
#videoList {
@@ -127,7 +126,8 @@ header img {
}
/* Forms & Inputs */
input, textarea {
input,
textarea {
width: 100%;
padding: 0.75rem;
background-color: var(--color-bg);
@@ -137,7 +137,8 @@ input, textarea {
transition: border-color 0.2s;
}
input:focus, textarea:focus {
input:focus,
textarea:focus {
outline: none;
border-color: var(--color-primary);
ring: 2px var(--color-primary);
@@ -176,7 +177,8 @@ button:focus {
}
/* Notifications */
#errorContainer, #successContainer {
#errorContainer,
#successContainer {
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
@@ -197,7 +199,8 @@ button:focus {
}
/* Modal Display */
#playerSection, #playerModal {
#playerSection,
#playerModal {
display: none;
}
@@ -211,7 +214,7 @@ button:focus {
grid-template-columns: 1fr;
gap: 1rem;
}
.container {
padding: 0.75rem;
}
@@ -230,4 +233,3 @@ footer a {
footer a:hover {
text-decoration: underline;
}
```

163
src/getting-started.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bitvid | Getting Started</title>
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="BitVid - Markdown Viewer" />
<meta
property="og:description"
content="View and render markdown content dynamically."
/>
<meta
property="og:image"
content="https://bitvid.netlify.app/assets/jpg/bitvid.jpg"
/>
<meta property="og:url" content="https://bitvid.btc.us" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<!-- App Icons -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#0f172a" />
<!-- Tailwind CSS -->
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<!-- Main Layout Styles -->
<link href="css/style.css" rel="stylesheet" />
<!-- Markdown-Specific Styles -->
<link href="css/markdown.css" rel="stylesheet" />
</head>
<body class="bg-gray-100">
<div
id="app"
class="container mx-auto px-4 py-8 min-h-screen flex flex-col"
>
<!-- Header -->
<header class="mb-8">
<div class="flex items-start">
<!-- Logo links back to index.html (or "/") -->
<a href="index.html">
<img
src="assets/svg/bitvid-logo-light-mode.svg"
alt="BitVid Logo"
class="h-16"
/>
</a>
</div>
</header>
<!-- Markdown Content Section -->
<main>
<!--
We give this section a white background and a shadow
just like you originally had for other cards.
-->
<div id="markdown-container" class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4">Loading Content...</h2>
</div>
</main>
<!-- Footer -->
<footer class="mt-auto pb-8 text-center px-4">
<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>
<div class="mt-2 space-x-4">
<a
href="https://github.com/PR0M3TH3AN/bitvid"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
<a
href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
Nostr
</a>
<a
href="https://habla.news/p/nprofile1qyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qgdwaehxw309ahx7uewd3hkcqgswaehxw309ahx7um5wgh8w6twv5q3yamnwvaz7tm0venxx6rpd9hzuur4vgqzpzf6x8a95eyp99dmwm4zmkx4a3cxgrnwdtfe3ej504m3aqjk4ugldyww3a"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
>
Blog
</a>
<a
href="getting-started.html"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_self"
rel="noopener noreferrer"
>
Getting Started
</a>
<a
href="about.html"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_self"
rel="noopener noreferrer"
>
About
</a>
</div>
<p
class="mt-2 text-xs text-gray-600 font-mono break-all max-w-full overflow-hidden"
>
IPNS: k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1
</p>
</footer>
</div>
<!-- Marked.js (for converting markdown to HTML) -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Highlight.js (optional for code block highlighting) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
async function loadMarkdown() {
const response = await fetch("content/getting-started.md");
if (response.ok) {
const markdown = await response.text();
const container = document.getElementById("markdown-container");
// Convert markdown to HTML
const html = marked.parse(markdown);
// Insert the HTML into the container
container.innerHTML = html;
// (Optional) Highlight code blocks
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightBlock(block);
});
} else {
document.getElementById("markdown-container").innerHTML =
'<p class="text-red-500">Error loading content. Please try again later.</p>';
}
}
loadMarkdown();
</script>
</body>
</html>

8
src/index.html
View File

@@ -355,17 +355,17 @@
Blog
</a>
<a
href="https://primal.net//e/note1s8xwqqmtaakpjfcmtunnf9dt05l8ttk3a2nr3pemk8fvqj4ealnqd5j39h"
href="getting-started.html"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
target="_self"
rel="noopener noreferrer"
>
Getting Started
</a>
<a
href="https://primal.net//e/note1s8xwqqmtaakpjfcmtunnf9dt05l8ttk3a2nr3pemk8fvqj4ealnqd5j39h"
href="about.html"
class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
target="_blank"
target="_self"
rel="noopener noreferrer"
>
About

21
to-do_list.md
View File

@@ -3,14 +3,15 @@
- add "copy magnet" button
- fix issue with editing videos failing
- fix issue where after you play a video, close the video player and pick that same video again it doesn't open
- add "publish" last step to the video edits process
- Fix error after playing video "Video playback error: MEDIA_ELEMENT_ERROR: Empty src attribute"
- add ability to set custom relays setting stored as local cache
- adjust CSS for app.js modals
- fix "dev mode" publishing "live mode" notes. Make posts posted in devmode have a special devmode flag
- add a npub "whitelist" for logging in
- add ability to set custom relays setting stored as local cache
- add "publish" last step to the video edits process
- convert "logged in as" from public key to profile image, username and noun as fallback
- add comments to video modal
- add comments to video modal
- add "adult content" flag for note submission
- add #tags to the submission spec and form
- add #tags to the submission spec and form
- add block/unblock list with import and export features so users can share their lists
- add unique URL to each video
- add profile modal for each user/profile
@@ -18,10 +19,10 @@
- add side bar for more UI flexibility
- add customized home screen content via algorithms for better feeds
- make logo/brand
- improve UI/UX CSS
- bug test video edits and submissions thoroughly
- add zaps to videos and profiles and comments
- add intro tutorial info to explain how to use the site
- add custom color themes and toggle light and dark mode
- add zaps to videos and profiles and comments
- add intro tutorial info to explain how to use the site
- add custom color themes and toggle light and dark mode
- Add multi-language support for content posts and filtration
- add setting menu to store local account relay, adult content, theme/color and language settings
- improve UI/UX CSS
- bug test video edits and submissions thoroughly