Add initial project structure with Docker setup, SOLID principles, and video player implementation

- Created .gitignore to exclude logs and build artifacts. - Added Dockerfile and docker-compose.yml for containerized deployment. - Implemented a video player following SOLID principles with classes for video source, audio control, and volume meter. - Introduced interfaces for audio, video source, and volume meter to ensure adherence to Interface Segregation Principle. - Developed main entry point and HTML structure for the video player application. - Included TypeScript configuration and package.json for project dependencies.
2025-12-17 22:33:35 -05:00
commit 1fd455d29b
21 changed files with 1069 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link href="./src/styles.css"  rel="stylesheet" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Biscayne Bay Stream</title>
+  </head>
+  <body>
+    <div id="app">
+      <video id="video" style="width: 100vw;height: 100vh;background-color: black;" autoplay muted playsinline></video>
+      <button id="unmute-btn" class="unmute-button">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 5L6 9H2v6h4l5 4V5z"></path>
+          <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+        </svg>
+        <span>Unmute Audio</span>
+      </button>
+    </div>
+
+    <div id="volume-meter-container" class="volume-meter-container"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>