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

added side bar

Browse Source
This commit is contained in:
Keep Creating Online
2025-02-04 22:17:49 -05:00
parent bcf59c58a9
commit 03c28dacab
22 changed files with 709 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
bitvid_logo/home-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M12,6.453L21,14.828L21,24L15,24L15,18L9,18L9,24L3,24L3,14.828L12,6.453ZM24,12.148L12,1L0,12.133L1.361,13.598L12,3.73L22.639,13.613L24,12.148Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 656 B

5
src/assets/svg/about-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M12,0C5.373,0 0,5.373 0,12C0,18.627 5.373,24 12,24C18.627,24 24,18.627 24,12C24,5.373 18.627,0 12,0ZM9.967,16.01C10.531,14.221 11.599,12.078 11.788,11.536C12.061,10.749 11.577,10.4 10.048,11.745L9.708,11.105C11.452,9.208 15.043,8.779 13.821,11.718C13.058,13.553 12.512,14.792 12.2,15.748C11.745,17.141 12.894,16.576 14.019,15.537C14.172,15.787 14.222,15.868 14.375,16.156C11.877,18.534 9.104,18.744 9.967,16.01ZM14.709,7.841C14.177,8.294 13.389,8.284 12.948,7.819C12.507,7.354 12.581,6.611 13.112,6.158C13.644,5.705 14.432,5.716 14.873,6.18C15.312,6.646 15.24,7.389 14.709,7.841Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
src/assets/svg/default-profile.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M12,0C5.373,0 0,5.373 0,12C0,18.627 5.373,24 12,24C18.627,24 24,18.627 24,12C24,5.373 18.627,0 12,0ZM12,22C8.877,22 6.086,20.559 4.251,18.31C4.51,17.722 5.034,17.315 6.118,17.064C8.362,16.546 10.577,16.083 9.511,14.119C6.356,8.299 8.612,5 12,5C15.322,5 17.634,8.177 14.489,14.119C13.454,16.071 15.589,16.535 17.882,17.064C18.964,17.314 19.492,17.719 19.753,18.305C17.917,20.558 15.125,22 12,22Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 909 B

5
src/assets/svg/explore-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M12,0C18.623,0 24,5.377 24,12C24,18.623 18.623,24 12,24C5.377,24 0,18.623 0,12C0,5.377 5.377,0 12,0ZM12,2C17.519,2 22,6.481 22,12C22,17.519 17.519,22 12,22C6.481,22 2,17.519 2,12C2,6.481 6.481,2 12,2ZM13.476,14.955C14.464,14.55 15.233,13.744 15.592,12.739L18,6L11.328,8.387C10.322,8.747 9.517,9.518 9.112,10.506L6.047,18L13.476,14.955ZM13.354,10.669C13.905,11.22 13.905,12.115 13.354,12.665C12.803,13.216 11.909,13.216 11.358,12.665C10.807,12.115 10.807,11.22 11.358,10.669C11.909,10.118 12.803,10.118 13.354,10.669Z" style="fill:rgb(92,111,138);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1013 B

5
src/assets/svg/getting-started-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M6.676,9.18C5.25,9.171 3.459,9.944 2.093,11.31C1.572,11.831 1.114,12.439 0.76,13.122C1.992,12.189 3.307,11.897 4.846,12.761C5.299,11.562 5.902,10.343 6.676,9.18ZM14.83,17.323C13.566,18.149 12.324,18.745 11.249,19.165C12.112,20.705 11.82,22.018 10.888,23.25C11.572,22.897 12.179,22.438 12.7,21.916C14.07,20.547 14.844,18.751 14.83,17.323ZM19.957,4.035C19.613,4.011 19.276,4 18.946,4C11.777,4 7.697,9.465 6.213,13.86L10.152,17.8C14.677,16.18 20,12.251 20,5.158C20,4.792 19.986,4.418 19.957,4.035ZM11.717,12.293C11.391,11.968 11.391,11.44 11.717,11.115C12.042,10.789 12.57,10.789 12.895,11.115C13.221,11.441 13.221,11.968 12.895,12.293C12.569,12.619 12.042,12.619 11.717,12.293ZM14.073,9.937C13.422,9.287 13.422,8.231 14.073,7.58C14.724,6.929 15.779,6.929 16.429,7.58C17.08,8.231 17.08,9.286 16.429,9.937C15.779,10.587 14.725,10.587 14.073,9.937ZM1.641,20.315L0.886,19.56L5.226,15.237L5.981,15.992L1.641,20.315ZM5.79,21.862L5.035,21.107L8.064,18.053L8.819,18.808L5.79,21.862ZM0.755,24L-0,23.245L5.373,17.881L6.129,18.636L0.755,24ZM21.838,9.709C21.65,10.327 21.165,10.811 20.547,11C21.165,11.188 21.65,11.672 21.838,12.291C22.027,11.672 22.511,11.188 23.129,11C22.511,10.812 22.027,10.328 21.838,9.709ZM7.183,3.205C6.936,4.015 6.302,4.648 5.493,4.895C6.303,5.142 6.936,5.776 7.183,6.585C7.431,5.776 8.064,5.142 8.873,4.895C8.063,4.648 7.431,4.015 7.183,3.205ZM5.356,0C5.157,0.649 4.65,1.157 4,1.355C4.65,1.554 5.157,2.062 5.356,2.71C5.554,2.061 6.062,1.553 6.71,1.355C6.062,1.157 5.555,0.649 5.356,0ZM10.743,0C10.427,1.035 9.616,1.846 8.58,2.163C9.616,2.479 10.427,3.289 10.743,4.326C11.059,3.29 11.87,2.48 12.905,2.163C11.87,1.846 11.06,1.035 10.743,0ZM21.838,13.64C21.522,14.676 20.711,15.486 19.675,15.803C20.711,16.119 21.522,16.965 21.838,18C22.154,16.964 22.965,16.119 24,15.803C22.965,15.486 22.154,14.676 21.838,13.64Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

5
src/assets/svg/github-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M12,0C5.374,0 0,5.373 0,12C0,17.302 3.438,21.8 8.207,23.387C8.806,23.498 9,23.126 9,22.81L9,20.576C5.662,21.302 4.967,19.16 4.967,19.16C4.421,17.773 3.634,17.404 3.634,17.404C2.545,16.659 3.717,16.675 3.717,16.675C4.922,16.759 5.556,17.912 5.556,17.912C6.626,19.746 8.363,19.216 9.048,18.909C9.155,18.134 9.466,17.604 9.81,17.305C7.145,17 4.343,15.971 4.343,11.374C4.343,10.063 4.812,8.993 5.579,8.153C5.455,7.85 5.044,6.629 5.696,4.977C5.696,4.977 6.704,4.655 8.997,6.207C9.954,5.941 10.98,5.808 12,5.803C13.02,5.808 14.047,5.941 15.006,6.207C17.297,4.655 18.303,4.977 18.303,4.977C18.956,6.63 18.545,7.851 18.421,8.153C19.191,8.993 19.656,10.064 19.656,11.374C19.656,15.983 16.849,16.998 14.177,17.295C14.607,17.667 15,18.397 15,19.517L15,22.81C15,23.129 15.192,23.504 15.801,23.386C20.566,21.797 24,17.3 24,12C24,5.373 18.627,0 12,0Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
src/assets/svg/home-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M12,6.453L21,14.828L21,24L15,24L15,18L9,18L9,24L3,24L3,14.828L12,6.453ZM24,12.148L12,1L0,12.133L1.361,13.598L12,3.73L22.639,13.613L24,12.148Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 656 B

5
src/assets/svg/mobile-sidebar-menu-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M22,16.75C22,16.336 21.664,16 21.25,16L2.75,16C2.336,16 2,16.336 2,16.75C2,17.164 2.336,17.5 2.75,17.5L21.25,17.5C21.664,17.5 22,17.164 22,16.75ZM22,11.75C22,11.336 21.664,11 21.25,11L2.75,11C2.336,11 2,11.336 2,11.75C2,12.164 2.336,12.5 2.75,12.5L21.25,12.5C21.664,12.5 22,12.164 22,11.75ZM22,6.75C22,6.336 21.664,6 21.25,6L2.75,6C2.336,6 2,6.336 2,6.75C2,7.164 2.336,7.5 2.75,7.5L21.25,7.5C21.664,7.5 22,7.164 22,6.75Z" style="fill:rgb(17,24,39);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 933 B

5
src/assets/svg/roadmap-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M23.961,8.429C23.13,9.411 22.347,10.347 22,12.204L22,18.887L18,21.366L18,12.205C17.653,10.348 16.87,9.412 16.039,8.43C15.131,7.355 14,6.019 14,3.801L14.019,3.456L12,2L6.455,6L0,2L0,20L6.455,24L12,20L17.545,24L24,20L24,8.382L23.961,8.429ZM11,18.255L7,21.14L7,8.073L11,5.187L11,18.255ZM20,0C17.9,0 16,1.702 16,3.801C16,6.922 19.188,7.252 20,12C20.812,7.252 24,6.922 24,3.801C24,1.702 22.1,0 20,0ZM20,5.5C19.172,5.5 18.5,4.829 18.5,4C18.5,3.171 19.172,2.5 20,2.5C20.828,2.5 21.5,3.171 21.5,4C21.5,4.829 20.828,5.5 20,5.5Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

5
src/assets/svg/subscriptions-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M21.698,10.658L24,12L11.998,19L0,12L2.301,10.658L11.998,16.316L21.698,10.658ZM11.998,21.315L2.301,15.657L0,17L11.998,24L24,17L21.698,15.658L11.998,21.315ZM24,7L11.998,-0L0,7L11.998,14L24,7Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 704 B

151
src/components/disclaimer.html Normal file
View File

@@ -0,0 +1,151 @@
<!-- Disclaimer Modal (wide, matching other modals) -->
<div
id="disclaimerModal"
class="fixed inset-0 z-50 hidden"
style="background: transparent"
>
<!-- Dark/blur overlay -->
<div
class="absolute inset-0 z-10"
style="
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
"
></div>
<!-- Outer container with wide layout, just like content-appeals-form -->
<div
class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
>
<!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
<div
class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
>
<!-- Sticky top bar, if you want a top heading or 'X' button up here -->
<div
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
>
<!-- If you want an X to close, you can add it here, for example:
<button
id="closeDisclaimerBtn"
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
-->
</div>
<!-- Main Content -->
<div class="p-6">
<!-- Scrollable disclaimers area -->
<div
class="space-y-6 text-gray-300"
style="max-height: 70vh; overflow-y: auto"
>
<!-- Example: Insert your disclaimers here -->
<div class="flex justify-center mb-8">
<img
src="assets/svg/bitvid-logo-dark-mode.svg"
alt="BitVid Logo"
class="h-16"
/>
</div>
<h2 class="text-2xl font-bold text-white mb-0">Welcome to bitvid</h2>
<!-- Warning Alert -->
<div
class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
>
<svg
class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<p class="text-yellow-200">
This platform is currently in development and only supports Chrome
and Firefox-based browsers. Other browsers are not supported at
this time. You may encounter bugs or missing features. Give it a
sec. Videos might take 10 to 60 seconds to load initially.
</p>
</div>
<p>
bitvid is a decentralized video platform where content is shared
directly between users. We want you to understand a few important
points before you continue:
</p>
<div class="space-y-4">
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">Early Access Status</h3>
<p class="text-gray-400">
Currently, video posting is invite-only as we carefully scale
our platform. While anyone can watch videos, content creation is
limited to approved creators. This helps us maintain quality
content during our early stages.
</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">
Content Responsibility & Moderation
</h3>
<p class="text-gray-400">
While we don't host videos directly, we maintain community
standards through access control. Users who violate our
guidelines may be blocked from accessing the platform. All
content must follow local laws and platform guidelines.
</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">Platform Status</h3>
<p class="text-gray-400">
bitvid is a work in progress. Features may change or break, and
security improvements are ongoing. Your feedback and patience
help us build a better platform.
</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">Get Involved</h3>
<p class="text-gray-400">
Are you a developer? We'd love your help! Visit our GitHub
repository to contribute to building the future of decentralized
video sharing.
</p>
</div>
</div>
</div>
<!-- Button at bottom -->
<div class="mt-6">
<button
id="acceptDisclaimer"
class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
>
I Understand
</button>
</div>
</div>
</div>
</div>
</div>

76
src/components/sidebar.html Normal file
View File

@@ -0,0 +1,76 @@
<aside
id="sidebar"
class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-full -translate-x-full hidden md:translate-x-0 md:block"
>
<div class="flex flex-col h-full">
<div class="flex-1 overflow-y-auto">
<nav class="mt-4">
<a
href="#view=most-recent-videos"
class="flex items-center py-2 px-4 hover:bg-gray-800"
>
<img
src="assets/svg/home-icon.svg"
alt="Home"
class="w-6 h-6 mr-3 flex-shrink-0"
/>
<span class="sidebar-text">Home</span>
</a>
<a
href="#view=explore"
class="flex items-center py-2 px-4 hover:bg-gray-800"
>
<img
src="assets/svg/explore-icon.svg"
alt="Explore"
class="w-6 h-6 mr-3 flex-shrink-0"
/>
<span class="sidebar-text">Explore</span>
</a>
<a
href="#view=subscriptions"
class="flex items-center py-2 px-4 hover:bg-gray-800"
>
<img
src="assets/svg/subscriptions-icon.svg"
alt="Subscriptions"
class="w-6 h-6 mr-3 flex-shrink-0"
/>
<span class="sidebar-text">Subscriptions</span>
</a>
</nav>
</div>
<div class="mt-auto">
<hr class="border-gray-700" />
<div class="p-4">
<nav class="space-y-2">
<a
href="about.html"
class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
>
<img
src="assets/svg/about-icon.svg"
alt="About"
class="w-5 h-5 mr-3"
/>
<span class="sidebar-text">About</span>
</a>
<a
href="https://github.com/PR0M3TH3AN/bitvid"
target="_blank"
rel="noopener noreferrer"
class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
>
<img
src="assets/svg/github-icon.svg"
alt="GitHub"
class="w-5 h-5 mr-3"
/>
<span class="sidebar-text">GitHub</span>
</a>
</nav>
</div>
</div>
</div>
</aside>

45
src/css/style.css
View File

@@ -470,3 +470,48 @@ footer a:hover {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
/* Sidebar default states */
#sidebar {
/* You can set a default width here for 'expanded' state. */
width: 14rem; /* for example */
}
/* You could define a class for collapsed states on desktop if desired: */
.sidebar-collapsed {
width: 4rem;
}
.sidebar-expanded {
width: 14rem;
}
/* Hide text when collapsed.
If you add .sidebar-collapsed to #sidebar, you can hide text like this: */
.sidebar-collapsed .sidebar-text {
display: none;
}
/* Basic scrolling for the sidebar if it's long */
#sidebar {
overflow-y: auto;
}
/* The top-level container is already "flex min-h-screen" in index.html.
The main content (#app) has "flex-1", so it fills the rest of the space. */
/* Example of customizing the border & background in the sidebar */
#sidebar hr {
border-color: rgba(255, 255, 255, 0.1);
}
/* If you want a smooth transition for showing/hiding the entire sidebar
on mobile (via the "hidden" class), you can do so with a small fade,
but you’ll need a separate approach with absolute positioning or something
if you prefer a sliding effect. */
@media (max-width: 767px) {
.sidebar-open {
transform: translateX(16rem);
transition: transform 0.3s ease;
}
}

447
src/index.html
View File

@@ -39,13 +39,36 @@
<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" SIDEBAR CONTAINER:
class="container mx-auto px-4 py-8 min-h-screen flex flex-col" The <aside id="sidebar"> inside handles visibility.
> By default, no special position or z-index on #sidebarContainer.
-->
<div id="sidebarContainer">
<!-- components/sidebar.html gets injected here -->
</div>
<!--
MAIN CONTENT:
md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
On mobile, we also toggle .sidebar-open to shift the entire content.
-->
<div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
<!-- Header --> <!-- Header -->
<header class="mb-8 flex items-center"> <header class="mb-8 flex items-center w-full">
<!-- Logo on the left --> <!-- Mobile hamburger button (hidden on md+) -->
<!-- New button -->
<button
id="mobileMenuBtn"
class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
>
<img
src="assets/svg/mobile-sidebar-menu-icon.svg"
alt="Mobile Sidebar Menu Icon"
class="w-6 h-6"
/>
</button>
<!-- Logo -->
<img <img
src="assets/svg/bitvid-logo-light-mode.svg" src="assets/svg/bitvid-logo-light-mode.svg"
alt="BitVid Logo" alt="BitVid Logo"
@@ -77,7 +100,6 @@
id="profileButton" id="profileButton"
class="hidden inline-flex items-center justify-center w-12 h-12 rounded-full bg-black text-white text-sm leading-none hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black" class="hidden inline-flex items-center justify-center w-12 h-12 rounded-full bg-black text-white text-sm leading-none hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
> >
<!-- This inner DIV is just an avatar container, if you like -->
<div class="w-10 h-10 rounded-full overflow-hidden"> <div class="w-10 h-10 rounded-full overflow-hidden">
<img <img
id="profileAvatar" id="profileAvatar"
@@ -102,10 +124,10 @@
class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4" class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
></div> ></div>
<!-- Main container for dynamic views (most-recent-videos.html, etc.) --> <!-- Dynamic views (like most-recent-videos.html, etc.) -->
<main id="viewContainer" class="flex-grow mb-8"></main> <main id="viewContainer" class="flex-grow mb-8"></main>
<!-- Modal Container (external modals will be injected here) --> <!-- Modal Container (external modals) -->
<div id="modalContainer"></div> <div id="modalContainer"></div>
<!-- Tagline / Slogan --> <!-- Tagline / Slogan -->
@@ -115,165 +137,6 @@
</h2> </h2>
</div> </div>
<!-- Disclaimer Modal (wide, matching other modals) -->
<div
id="disclaimerModal"
class="fixed inset-0 z-50 hidden"
style="background: transparent"
>
<!-- Dark/blur overlay -->
<div
class="absolute inset-0 z-10"
style="
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
"
></div>
<!-- Outer container with wide layout, just like content-appeals-form -->
<div
class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
>
<!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
<div
class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
>
<!-- Sticky top bar, if you want a top heading or 'X' button up here -->
<div
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
>
<!-- If you want an X to close, you can add it here, for example:
<button
id="closeDisclaimerBtn"
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
-->
</div>
<!-- Main Content -->
<div class="p-6">
<!-- Scrollable disclaimers area -->
<div
class="space-y-6 text-gray-300"
style="max-height: 70vh; overflow-y: auto"
>
<!-- Example: Insert your disclaimers here -->
<div class="flex justify-center mb-8">
<img
src="assets/svg/bitvid-logo-dark-mode.svg"
alt="BitVid Logo"
class="h-16"
/>
</div>
<h2 class="text-2xl font-bold text-white mb-0">
Welcome to bitvid
</h2>
<!-- Warning Alert -->
<div
class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
>
<svg
class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<p class="text-yellow-200">
This platform is currently in development and only supports
Chrome and Firefox-based browsers. Other browsers are not
supported at this time. You may encounter bugs or missing
features. Give it a sec. Videos might take 10 to 60 seconds
to load initially.
</p>
</div>
<p>
bitvid is a decentralized video platform where content is
shared directly between users. We want you to understand a few
important points before you continue:
</p>
<div class="space-y-4">
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">
Early Access Status
</h3>
<p class="text-gray-400">
Currently, video posting is invite-only as we carefully
scale our platform. While anyone can watch videos, content
creation is limited to approved creators. This helps us
maintain quality content during our early stages.
</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">
Content Responsibility & Moderation
</h3>
<p class="text-gray-400">
While we don't host videos directly, we maintain community
standards through access control. Users who violate our
guidelines may be blocked from accessing the platform. All
content must follow local laws and platform guidelines.
</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">
Platform Status
</h3>
<p class="text-gray-400">
bitvid is a work in progress. Features may change or
break, and security improvements are ongoing. Your
feedback and patience help us build a better platform.
</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h3 class="text-white font-semibold mb-2">Get Involved</h3>
<p class="text-gray-400">
Are you a developer? We'd love your help! Visit our GitHub
repository to contribute to building the future of
decentralized video sharing.
</p>
</div>
</div>
</div>
<!-- Button at bottom -->
<div class="mt-6">
<button
id="acceptDisclaimer"
class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
>
I Understand
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer --> <!-- Footer -->
<footer class="mt-auto pb-8 text-center px-4"> <footer class="mt-auto pb-8 text-center px-4">
<a <a
@@ -387,251 +250,7 @@
</footer> </footer>
</div> </div>
<!-- Load external modal components + attach event listeners --> <!-- Additional Scripts -->
<script>
async function loadModal(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to load " + url);
}
const html = await response.text();
document
.getElementById("modalContainer")
.insertAdjacentHTML("beforeend", html);
console.log(url, "loaded");
} catch (err) {
console.error(err);
}
}
Promise.all([
// Existing modals
loadModal("components/login-modal.html"),
loadModal("components/application-form.html"),
loadModal("components/content-appeals-form.html"),
// New forms
loadModal("components/general-feedback-form.html"),
loadModal("components/feature-request-form.html"),
loadModal("components/bug-fix-form.html"),
]).then(() => {
console.log("Modals loaded.");
//
// 1) Login button => open login modal
//
const loginNavBtn = document.getElementById("loginButton");
if (loginNavBtn) {
loginNavBtn.addEventListener("click", () => {
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.remove("hidden");
}
});
}
//
// 2) Close login modal
//
const closeLoginBtn = document.getElementById("closeLoginModal");
if (closeLoginBtn) {
closeLoginBtn.addEventListener("click", () => {
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.add("hidden");
}
});
}
//
// 3) “Application Form” button => open application form
//
const openAppFormBtn = document.getElementById("openApplicationModal");
if (openAppFormBtn) {
openAppFormBtn.addEventListener("click", () => {
// Hide the login modal first
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.add("hidden");
}
// Now show the application form modal
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.remove("hidden");
}
});
}
//
// 4) Close application form
//
const closeNostrFormBtn = document.getElementById(
"closeNostrFormModal"
);
if (closeNostrFormBtn) {
closeNostrFormBtn.addEventListener("click", () => {
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.add("hidden");
}
// ADDED: If user has not seen disclaimer yet, show it after application modal is closed
if (!localStorage.getItem("hasSeenDisclaimer")) {
const disclaimerModal =
document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.remove("hidden");
}
}
});
}
//
// 5) ?modal=appeals => open content appeals form
// ?modal=application => open application form
//
const urlParams = new URLSearchParams(window.location.search);
const modalParam = urlParams.get("modal");
if (modalParam === "appeals") {
const appealsModal = document.getElementById("contentAppealsModal");
if (appealsModal) {
appealsModal.classList.remove("hidden");
}
// ADDED: After user closes appeals, show disclaimer if needed
const closeAppealsBtn = document.getElementById(
"closeContentAppealsModal"
);
if (closeAppealsBtn) {
closeAppealsBtn.addEventListener("click", () => {
appealsModal.classList.add("hidden");
if (!localStorage.getItem("hasSeenDisclaimer")) {
const disclaimerModal =
document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.remove("hidden");
}
}
});
}
} else if (modalParam === "application") {
// Show application form, but DO NOT show disclaimer until user closes
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.remove("hidden");
}
// Note: The close event above (closeNostrFormBtn) handles the disclaimer after closing.
} else {
// If there's no special param in the URL, we can consider showing the disclaimer right away
const hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
if (!hasSeenDisclaimer) {
const disclaimerModal = document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.remove("hidden");
}
}
}
//
// 6) Close content appeals modal (needed if user navigates w/o param, then opens appeals)
//
const closeAppealsBtn = document.getElementById(
"closeContentAppealsModal"
);
if (closeAppealsBtn) {
closeAppealsBtn.addEventListener("click", () => {
const appealsModal = document.getElementById("contentAppealsModal");
if (appealsModal) {
appealsModal.classList.add("hidden");
}
});
}
//
// 7) Disclaimer 'I Understand' Button
//
const acceptDisclaimerBtn = document.getElementById("acceptDisclaimer");
if (acceptDisclaimerBtn) {
acceptDisclaimerBtn.addEventListener("click", () => {
// Hide disclaimer
const disclaimerModal = document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.add("hidden");
}
// Store the fact that user has seen it
localStorage.setItem("hasSeenDisclaimer", "true");
});
}
//
// 8) Query param checks for the three new forms
// https://bitvid.network?modal=feedback => open generalFeedbackModal
// https://bitvid.network?modal=feature => open featureRequestModal
// https://bitvid.network?modal=bug => open bugFixModal
//
if (modalParam === "feedback") {
const feedbackModal = document.getElementById("generalFeedbackModal");
if (feedbackModal) {
feedbackModal.classList.remove("hidden");
}
} else if (modalParam === "feature") {
const featureModal = document.getElementById("featureRequestModal");
if (featureModal) {
featureModal.classList.remove("hidden");
}
} else if (modalParam === "bug") {
const bugModal = document.getElementById("bugFixModal");
if (bugModal) {
bugModal.classList.remove("hidden");
}
}
//
// 9) Close buttons for the three new forms
//
// general feedback
const closeFeedbackBtn = document.getElementById(
"closeGeneralFeedbackModal"
);
if (closeFeedbackBtn) {
closeFeedbackBtn.addEventListener("click", () => {
const feedbackModal = document.getElementById(
"generalFeedbackModal"
);
if (feedbackModal) {
feedbackModal.classList.add("hidden");
}
});
}
// feature request
const closeFeatureBtn = document.getElementById(
"closeFeatureRequestModal"
);
if (closeFeatureBtn) {
closeFeatureBtn.addEventListener("click", () => {
const featureModal = document.getElementById("featureRequestModal");
if (featureModal) {
featureModal.classList.add("hidden");
}
});
}
// bug fix
const closeBugBtn = document.getElementById("closeBugFixModal");
if (closeBugBtn) {
closeBugBtn.addEventListener("click", () => {
const bugModal = document.getElementById("bugFixModal");
if (bugModal) {
bugModal.classList.add("hidden");
}
});
}
});
</script>
<!-- Other Scripts -->
<script src="js/libs/nostr.bundle.js"></script> <script src="js/libs/nostr.bundle.js"></script>
<script type="module"> <script type="module">
import { nip19, SimplePool } from "https://esm.sh/nostr-tools@1.8.3"; import { nip19, SimplePool } from "https://esm.sh/nostr-tools@1.8.3";
@@ -644,5 +263,7 @@
<script type="module" src="js/nostr.js"></script> <script type="module" src="js/nostr.js"></script>
<script type="module" src="js/viewManager.js"></script> <script type="module" src="js/viewManager.js"></script>
<script type="module" src="js/app.js"></script> <script type="module" src="js/app.js"></script>
<script type="module" src="js/disclaimer.js"></script>
<script type="module" src="js/index.js"></script>
</body> </body>
</html> </html>

21
src/js/app.js
View File

@@ -4,7 +4,7 @@ import { loadView } from "./viewManager.js";
import { nostrClient } from "./nostr.js"; import { nostrClient } from "./nostr.js";
import { torrentClient } from "./webtorrent.js"; import { torrentClient } from "./webtorrent.js";
import { isDevMode } from "./config.js"; import { isDevMode } from "./config.js";
import { disclaimerModal } from "./disclaimer.js"; import disclaimerModal from "./disclaimer.js";
import { initialBlacklist, initialEventBlacklist } from "./lists.js"; import { initialBlacklist, initialEventBlacklist } from "./lists.js";
/** /**
@@ -724,12 +724,19 @@ class bitvidApp {
/** /**
* Subscribe to videos (older + new) and render them as they come in. * Subscribe to videos (older + new) and render them as they come in.
*/ */
async loadVideos() { async loadVideos(forceFetch = false) {
console.log("Starting loadVideos..."); console.log("Starting loadVideos... (forceFetch =", forceFetch, ")");
// We do NOT decode initialEventBlacklist here. // If forceFetch is true, unsubscribe from the old subscription to start fresh
// That happens once in the constructor, creating this.blacklistedEventIds. if (forceFetch && this.videoSubscription) {
// If you have a specific unsubscribe method, call it here.
// For example:
nostrClient.unsubscribeVideos(this.videoSubscription);
this.videoSubscription = null;
}
// The rest of your existing logic:
if (!this.videoSubscription) { if (!this.videoSubscription) {
if (this.videoList) { if (this.videoList) {
this.videoList.innerHTML = ` this.videoList.innerHTML = `
@@ -738,7 +745,7 @@ class bitvidApp {
</p>`; </p>`;
} }
// Create a single subscription // Create a new subscription
this.videoSubscription = nostrClient.subscribeVideos(() => { this.videoSubscription = nostrClient.subscribeVideos(() => {
const updatedAll = nostrClient.getActiveVideos(); const updatedAll = nostrClient.getActiveVideos();
@@ -749,7 +756,7 @@ class bitvidApp {
return false; return false;
} }
// 2) Check author (if you’re also blacklisting authors by npub) // 2) Check author if you’re blacklisting authors by npub
const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey; const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
if (initialBlacklist.includes(authorNpub)) { if (initialBlacklist.includes(authorNpub)) {
return false; return false;

43
src/js/disclaimer.js
View File

@@ -1,36 +1,39 @@
// js/disclaimer.js
class DisclaimerModal { class DisclaimerModal {
constructor() { constructor() {
// Initialize elements when the disclaimer HTML is in the DOM.
this.init();
}
init() {
this.modal = document.getElementById("disclaimerModal"); this.modal = document.getElementById("disclaimerModal");
this.acceptButton = document.getElementById("acceptDisclaimer"); this.acceptButton = document.getElementById("acceptDisclaimer");
// If user previously dismissed the disclaimer, we'll store "true" in localStorage:
this.hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
// Set up the click event for the "I Understand" button
this.setupEventListeners();
}
setupEventListeners() {
if (this.acceptButton) { if (this.acceptButton) {
this.acceptButton.addEventListener("click", () => { this.acceptButton.addEventListener("click", () => {
// Hide the disclaimer by adding the "hidden" class this.hide();
if (this.modal) {
this.modal.classList.add("hidden");
}
// Mark that the user has seen the disclaimer, so we don't show it again
localStorage.setItem("hasSeenDisclaimer", "true");
}); });
} }
} }
show() { hide() {
// Only show it if the user hasn't seen it before
if (!this.hasSeenDisclaimer) {
if (this.modal) { if (this.modal) {
this.modal.classList.add("hidden");
}
localStorage.setItem("hasSeenDisclaimer", "true");
}
show() {
// In case the modal hasn't been initialized yet.
if (!this.modal) {
this.init();
}
if (!localStorage.getItem("hasSeenDisclaimer") && this.modal) {
this.modal.classList.remove("hidden"); this.modal.classList.remove("hidden");
} }
} }
} }
}
// Export an instance that you can import in your main script // Create and export a default instance.
export const disclaimerModal = new DisclaimerModal(); const disclaimerModal = new DisclaimerModal();
export default disclaimerModal;

258
src/js/index.js Normal file
View File

@@ -0,0 +1,258 @@
// js/index.js
// 1) Load modals (login, application, etc.)
async function loadModal(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to load " + url);
}
const html = await response.text();
document
.getElementById("modalContainer")
.insertAdjacentHTML("beforeend", html);
console.log(url, "loaded");
} catch (err) {
console.error(err);
}
}
// 2) Load sidebar
async function loadSidebar(url, containerId) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to load " + url);
}
const html = await response.text();
document.getElementById(containerId).innerHTML = html;
console.log(url, "loaded into", containerId);
} catch (err) {
console.error(err);
}
}
// 3) Load the disclaimer (now separate)
async function loadDisclaimer(url, containerId) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to load " + url);
}
const html = await response.text();
document.getElementById(containerId).insertAdjacentHTML("beforeend", html);
console.log(url, "disclaimer loaded into", containerId);
} catch (err) {
console.error(err);
}
}
// 4) Load everything: modals, sidebar, disclaimers
Promise.all([
// Existing modals
loadModal("components/login-modal.html"),
loadModal("components/application-form.html"),
loadModal("components/content-appeals-form.html"),
// New forms
loadModal("components/general-feedback-form.html"),
loadModal("components/feature-request-form.html"),
loadModal("components/bug-fix-form.html"),
])
.then(() => {
console.log("Modals loaded.");
return loadSidebar("components/sidebar.html", "sidebarContainer");
})
.then(() => {
console.log("Sidebar loaded.");
const mobileMenuBtn = document.getElementById("mobileMenuBtn");
const sidebar = document.getElementById("sidebar");
const app = document.getElementById("app"); // <-- new
if (mobileMenuBtn && sidebar && app) {
mobileMenuBtn.addEventListener("click", () => {
sidebar.classList.toggle("hidden");
sidebar.classList.toggle("-translate-x-full");
// Toggle the class on #app so it shifts right
app.classList.toggle("sidebar-open");
});
}
return import("./sidebar.js").then((module) => {
module.setupSidebarNavigation();
});
})
.then(() => {
// Now load the disclaimer
return loadDisclaimer("components/disclaimer.html", "modalContainer");
})
.then(() => {
console.log("Disclaimer loaded.");
// 1) Login button => open login modal
const loginNavBtn = document.getElementById("loginButton");
if (loginNavBtn) {
loginNavBtn.addEventListener("click", () => {
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.remove("hidden");
}
});
}
// 2) Close login modal
const closeLoginBtn = document.getElementById("closeLoginModal");
if (closeLoginBtn) {
closeLoginBtn.addEventListener("click", () => {
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.add("hidden");
}
});
}
// 3) “Application Form” => open application form
const openAppFormBtn = document.getElementById("openApplicationModal");
if (openAppFormBtn) {
openAppFormBtn.addEventListener("click", () => {
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.add("hidden");
}
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.remove("hidden");
}
});
}
// 4) Close application form
const closeNostrFormBtn = document.getElementById("closeNostrFormModal");
if (closeNostrFormBtn) {
closeNostrFormBtn.addEventListener("click", () => {
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.add("hidden");
}
// If user hasn't seen disclaimer, show it
if (!localStorage.getItem("hasSeenDisclaimer")) {
const disclaimerModal = document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.remove("hidden");
}
}
});
}
// 5) ?modal=appeals => open content appeals form
const urlParams = new URLSearchParams(window.location.search);
const modalParam = urlParams.get("modal");
if (modalParam === "appeals") {
const appealsModal = document.getElementById("contentAppealsModal");
if (appealsModal) {
appealsModal.classList.remove("hidden");
}
const closeAppealsBtn = document.getElementById(
"closeContentAppealsModal"
);
if (closeAppealsBtn) {
closeAppealsBtn.addEventListener("click", () => {
appealsModal.classList.add("hidden");
if (!localStorage.getItem("hasSeenDisclaimer")) {
const disclaimerModal = document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.remove("hidden");
}
}
});
}
} else if (modalParam === "application") {
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.remove("hidden");
}
} else {
// If there's no special param, disclaimers can show if user hasn't seen them
const hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
if (!hasSeenDisclaimer) {
const disclaimerModal = document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.remove("hidden");
}
}
}
// 6) Close content appeals modal if needed
const closeAppealsBtn = document.getElementById("closeContentAppealsModal");
if (closeAppealsBtn) {
closeAppealsBtn.addEventListener("click", () => {
const appealsModal = document.getElementById("contentAppealsModal");
if (appealsModal) {
appealsModal.classList.add("hidden");
}
});
}
// 7) Disclaimer 'I Understand' Button
const acceptDisclaimerBtn = document.getElementById("acceptDisclaimer");
if (acceptDisclaimerBtn) {
acceptDisclaimerBtn.addEventListener("click", () => {
const disclaimerModal = document.getElementById("disclaimerModal");
if (disclaimerModal) {
disclaimerModal.classList.add("hidden");
}
localStorage.setItem("hasSeenDisclaimer", "true");
});
}
// 8) Query param checks for the three new forms
if (modalParam === "feedback") {
const feedbackModal = document.getElementById("generalFeedbackModal");
if (feedbackModal) {
feedbackModal.classList.remove("hidden");
}
} else if (modalParam === "feature") {
const featureModal = document.getElementById("featureRequestModal");
if (featureModal) {
featureModal.classList.remove("hidden");
}
} else if (modalParam === "bug") {
const bugModal = document.getElementById("bugFixModal");
if (bugModal) {
bugModal.classList.remove("hidden");
}
}
// 9) Close buttons for the new forms
const closeFeedbackBtn = document.getElementById(
"closeGeneralFeedbackModal"
);
if (closeFeedbackBtn) {
closeFeedbackBtn.addEventListener("click", () => {
const feedbackModal = document.getElementById("generalFeedbackModal");
if (feedbackModal) {
feedbackModal.classList.add("hidden");
}
});
}
const closeFeatureBtn = document.getElementById("closeFeatureRequestModal");
if (closeFeatureBtn) {
closeFeatureBtn.addEventListener("click", () => {
const featureModal = document.getElementById("featureRequestModal");
if (featureModal) {
featureModal.classList.add("hidden");
}
});
}
const closeBugBtn = document.getElementById("closeBugFixModal");
if (closeBugBtn) {
closeBugBtn.addEventListener("click", () => {
const bugModal = document.getElementById("bugFixModal");
if (bugModal) {
bugModal.classList.add("hidden");
}
});
}
});

46
src/js/sidebar.js Normal file
View File

@@ -0,0 +1,46 @@
import { loadView } from "./viewManager.js";
/**
* Wire up the sidebar links.
* Home => loads the "most-recent-videos" partial and re-renders videos
* Explore => loads explore.html with a "Coming Soon" message
* Subscriptions => loads subscriptions.html with a "Coming Soon" message
*/
export function setupSidebarNavigation() {
// 1) Home
const homeLink = document.querySelector('a[href="#view=most-recent-videos"]');
if (homeLink) {
homeLink.addEventListener("click", (e) => {
e.preventDefault();
loadView("views/most-recent-videos.html").then(() => {
// Once the partial is loaded, reassign #videoList + call loadVideos
if (window.app && window.app.loadVideos) {
window.app.videoList = document.getElementById("videoList");
window.app.loadVideos();
}
});
});
}
// 2) Explore
const exploreLink = document.querySelector('a[href="#view=explore"]');
if (exploreLink) {
exploreLink.addEventListener("click", (e) => {
e.preventDefault();
loadView("views/explore.html");
// We just show the partial. No dynamic videos needed yet.
});
}
// 3) Subscriptions
const subscriptionsLink = document.querySelector(
'a[href="#view=subscriptions"]'
);
if (subscriptionsLink) {
subscriptionsLink.addEventListener("click", (e) => {
e.preventDefault();
loadView("views/subscriptions.html");
// Also "Coming Soon" in that partial for now.
});
}
}

2
src/js/webtorrent.js
View File

@@ -175,7 +175,7 @@ export class TorrentClient {
return reject(new Error("No compatible video file found in torrent")); return reject(new Error("No compatible video file found in torrent"));
} }
videoElement.muted = true; videoElement.muted = false;
videoElement.crossOrigin = "anonymous"; videoElement.crossOrigin = "anonymous";
videoElement.addEventListener("error", (e) => { videoElement.addEventListener("error", (e) => {

5
src/views/explore.html Normal file
View File

@@ -0,0 +1,5 @@
<!-- views/explore.html -->
<section>
<h2 class="text-xl mb-4 text-gray-700">Explore</h2>
<p class="text-gray-600">Coming Soon...</p>
</section>

5
src/views/subscriptions.html Normal file
View File

@@ -0,0 +1,5 @@
<!-- views/subscriptions.html -->
<section>
<h2 class="text-xl mb-4 text-gray-700">Subscriptions</h2>
<p class="text-gray-600">Coming Soon...</p>
</section>

1
whitelistform.txt
View File

@@ -1 +0,0 @@
<iframe src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpkha64cj06g8sk2hqgq0yn4gqalgxxsta7x8lmvy8jr7pqfm5l9yqy2hwumn8ghj7un9d3shjtnyv9kh2uewd9hj7qppvf5hganfvss9w6rfw3jkc6tnwssyzursd35kxct5d9hkugzxdaex6udmmth" height="700px" width="480px" frameborder="0" style="border-style:none;box-shadow:0px 0px 2px 2px rgba(0,0,0,0.2);" cellspacing="0" ></iframe>