myetv-player 1.0.0 → 1.0.8

package/scss/README.md

@@ -1 +1,161 @@
+# MYETV Video Player - SCSS Files
 
+## 📁 File Structure
+
+```
+myetv-player/
+├── scss/
+│   ├── myetv-player.scss         # Main file
+│   ├── _variables.scss            # Variables (colors, sizes, etc.)
+│   ├── _mixins.scss               # Reusable mixins
+│   ├── _base.scss                 # Base styles
+│   ├── _video.scss                # Video element
+│   ├── _loading.scss              # Loading overlay
+│   ├── _title-overlay.scss        # Title overlay
+│   ├── _controls.scss             # Player controls
+│   ├── _progress-bar.scss         # Progress bar
+│   ├── _volume.scss               # Volume controls
+│   ├── _menus.scss                # Dropdown menus
+│   ├── _poster.scss               # Video poster
+│   ├── _watermark.scss            # Watermark
+│   ├── _tooltips.scss             # Tooltip system
+│   ├── _audio-player.scss         # Player for only audio files
+│   ├── _themes.scss               # Alternative themes
+│   ├── _resolution.scss           # Display modes
+│   └── _responsive.scss           # Media queries
+├── package.json
+└── README.md
+```
+
+## Installation
+
+### 1. Install Node.js
+Download and install Node.js from [nodejs.org](https://nodejs.org)
+
+### 2. Install Sass
+```bash
+npm install
+```
+
+Or install Sass globally:
+```bash
+npm install -g sass
+```
+
+## Compilation
+
+### Development (with watch mode)
+```bash
+npm run scss:watch
+```
+This command watches SCSS files and recompiles automatically when changed.
+
+### Production (minified)
+```bash
+npm run scss:prod
+```
+Generates a minified CSS file for production.
+
+### Single compilation
+```bash
+npm run scss
+```
+
+### Manual compilation
+```bash
+sass myetv-player.scss myetv-player.css
+```
+
+## How to Add Features
+
+### 1. Modify Variables
+Open `_variables.scss` and modify the values:
+```scss
+$player-primary-color: #4a90e2 !default;  // Change primary color
+$player-icon-size: 24px !default;          // Change icon size
+```
+
+### 2. Add New Components
+Create a new file `_component-name.scss` and import it into `myetv-player.scss`:
+```scss
+@import 'component-name';
+```
+
+### 3. Create New Themes
+Open `_themes.scss` and add:
+```scss
+.video-wrapper.theme-custom {
+  --player-primary-color: #your-color;
+  --player-primary-hover: #your-hover-color;
+}
+```
+
+### 4. Modify Responsive Breakpoints
+Open `_mixins.scss` and customize the breakpoints:
+```scss
+@mixin tablet {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+```
+
+## Best Practices
+
+1. **Do not modify compiled CSS** - Always work on SCSS files
+2. **Use variables** - For reusable values, create variables in `_variables.scss`
+3. **Create mixins** - For repeated patterns, add mixins in `_mixins.scss`
+4. **Keep files small** - Each file should handle a single component
+5. **Test on multiple browsers** - Verify cross-browser compatibility
+
+## Quick Customization
+
+### Change Primary Color
+```scss
+// In _variables.scss
+$player-primary-color: #e74c3c !default;  // Red
+```
+
+### Add New Button
+```scss
+// In _controls.scss
+.custom-button {
+  @include button-hover;
+  // Your styles
+}
+```
+
+### Create Custom Menu
+```scss
+// In _menus.scss
+.custom-menu {
+  @include menu-base;
+  // Your additional styles
+}
+```
+
+## Output
+
+After compilation you will get:
+- `myetv-player.css` - Complete CSS file
+- `myetv-player.min.css` - Minified CSS file for production
+- `myetv-player.css.map` - Source map for debugging (with --source-map)
+
+## Debug
+
+If you use watch mode with source map:
+```bash
+npm run scss:dev
+```
+
+You can see the original SCSS styles in the browser during debug.
+
+## Support
+
+For questions or issues:
+- Website: [https://www.myetv.tv](https://www.myetv.tv)
+- Developer: [https://oskarcosimo.com](https://oskarcosimo.com)
+
+---
+
+**Happy Coding!**

package/scss/_controls.scss

@@ -1,30 +1,184 @@
-// ===================================
-// CONTROLS
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* CONTROLS - IMPROVED RESPONSIVE DESIGN */
-.controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--player-bg-controls);
-    padding: var(--player-controls-padding);
-    opacity: 0;
-    transform: translateY(100%);
-    transition: all var(--player-transition-normal);
-    z-index: 10;
-    min-height: 70px !important;
-    box-sizing: border-box;
-}
-
-.controls.show {
-    opacity: 1;
-    transform: translateY(0);
-    position: absolute !important;
-    bottom: 0 !important;
-    z-index: 20 !important;
-}
+// ===================================
+// CONTROLS
+// ===================================
+
+@use 'mixins' as *;
+@use 'variables' as *;
+
+// ===================================
+// PROGRESS BAR SYSTEM
+// ===================================
+
+.progress-container {
+    position: relative;
+    overflow: visible !important; // Allow handle to extend outside the container
+    padding: 0; // No padding - keeps control bar height normal
+    margin-bottom: 10px; // Space below instead of padding
+    display: flex;
+    align-items: center; // Vertically center the progress bar
+    cursor: pointer;
+}
+
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 4px; // Thin progress bar
+    background: rgba(255, 255, 255, 0.3); // Semi-transparent background
+    border-radius: 2px;
+    overflow: visible !important; // Allow handle to be visible
+    cursor: pointer;
+}
+
+// Buffer bar (shows buffered/loaded video)
+.progress-buffer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 1; // Below filled bar
+}
+
+// Filled bar (shows watched video progress)
+.progress-filled {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--player-accent, #ff0000); // Accent color fill
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 2; // Above buffer, below handle
+}
+
+// ===================================
+// PROGRESS HANDLE - BASE STYLES
+// ===================================
+
+.progress-handle {
+    position: absolute;
+    top: 50%;
+    left: 0%;
+    transform: translate(-50%, -50%); // Center the handle
+    width: 14px;
+    height: 14px;
+    background: var(--player-accent, #ff0000);
+    cursor: grab; // Indicates draggable
+    transition: opacity 0.2s ease;
+    z-index: 10; // Above everything (buffer and filled)
+    pointer-events: auto; // Ensure it's clickable
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); // Subtle shadow for depth
+}
+
+// Grabbing cursor when actively dragging
+.progress-handle:active {
+    cursor: grabbing;
+}
+
+// ===================================
+// SEEK HANDLE SHAPES
+// ===================================
+
+// Circle - classic round handle (default recommended)
+.progress-handle-circle {
+    border-radius: 50%; // Perfect circle
+}
+
+// Square - sharp corners
+.progress-handle-square {
+    border-radius: 3px; // Slightly rounded corners
+}
+
+// Diamond - rotated square
+.progress-handle-diamond {
+    border-radius: 2px;
+    transform: translate(-50%, -50%) rotate(45deg); // 45 degree rotation
+}
+
+// Arrow - pointing upward
+.progress-handle-arrow {
+    background: transparent;
+    width: 0 !important;
+    height: 0 !important;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 14px solid var(--player-accent, #ff0000); // Triangle pointing up
+    border-radius: 0;
+    box-shadow: none; // No shadow for border-based shapes
+}
+
+// Triangle - simple triangle shape
+.progress-handle-triangle {
+    background: transparent;
+    width: 0 !important;
+    height: 0 !important;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 14px solid var(--player-accent, #ff0000);
+    border-radius: 0;
+    box-shadow: none;
+}
+
+// Heart - romantic shape using clip-path
+.progress-handle-heart {
+    width: 16px !important;
+    height: 16px !important;
+    clip-path: polygon( 50% 15%, 65% 0%, 80% 0%, 95% 15%, 95% 30%, 50% 85%, 5% 30%, 5% 15%, 20% 0%, 35% 0% );
+}
+
+// Star - five-pointed star using clip-path
+.progress-handle-star {
+    width: 16px !important;
+    height: 16px !important;
+    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
+}
+
+// None - completely hidden (no visual indicator)
+.progress-handle-none {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+// ===================================
+// FORCE HANDLE ALWAYS VISIBLE
+// ===================================
+
+// Override any other rule that hides the handle
+.progress-handle {
+    opacity: 1 !important; // Always visible
+}
+
+.progress-container .progress-handle {
+    opacity: 1 !important; // Always visible with higher specificity
+}
+
+// ===================================
+// CONTROLS CONTAINER
+// ===================================
+
+/* Main controls container */
+.controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--player-bg-controls);
+    padding: var(--player-controls-padding);
+    opacity: 0; // Hidden by default
+    transform: translateY(100%); // Slide out below
+    transition: all var(--player-transition-normal);
+    z-index: 10;
+    min-height: 70px !important;
+    box-sizing: border-box;
+}
+
+/* Controls visible state */
+.controls.show {
+    opacity: 1; // Fully visible
+    transform: translateY(0); // Slide in
+    position: absolute !important;
+    bottom: 0 !important;
+    z-index: 20 !important; // Above other elements
+}