myetv-player 1.2.0 → 1.4.0

package/scss/_themes.scss

@@ -1,30 +0,0 @@
-// ===================================
-// THEMES
-// ===================================
-
-/* ALTERNATIVE THEME - Blue */
-.player-theme-blue {
-    --player-primary-color: #2196F3;
-    --player-primary-hover: #1976D2;
-    --player-primary-dark: #1565C0;
-}
-
-
-
-/* ALTERNATIVE THEME - Green */
-.player-theme-green {
-    --player-primary-color: #4CAF50;
-    --player-primary-hover: #45a049;
-    --player-primary-dark: #388e3c;
-}
-
-
-
-/* ALTERNATIVE THEME - Red */
-.player-theme-red {
-    --player-primary-color: #f44336;
-    --player-primary-hover: #d32f2f;
-    --player-primary-dark: #c62828;
-}
-
-

package/scss/_title-overlay.scss

@@ -1,60 +0,0 @@
-// ===================================
-// TITLE OVERLAY
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* TITLE OVERLAY - WITH AUTO-HIDE */
-.title-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: var(--player-bg-title-overlay);
-    padding: var(--player-title-overlay-padding);
-    opacity: 0;
-    transform: translateY(-100%);
-    transition: all var(--player-transition-normal);
-    z-index: 15;
-    pointer-events: none;
-}
-
-.title-overlay.show {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.title-overlay.show.persistent {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.title-text {
-    color: var(--player-text-color);
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 1.3;
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.subtitle-text {
-    color: var(--player-text-color);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 1.3;
-    margin: 5px 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
-    opacity: 0.9;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}

package/scss/_tooltips.scss

@@ -1,7 +0,0 @@
-// ===================================
-// TOOLTIPS
-// ===================================
-
-@use 'mixins' as *;
-
-

package/scss/_variables.scss

@@ -1,49 +0,0 @@
-// ===================================
-// VARIABLES
-// ===================================
-// Main colors
-$player-primary-color: goldenrod !default;
-$player-primary-hover: #daa520 !default;
-$player-primary-dark: #b8860b !default;
-
-// Control colors
-$player-button-color: white !default;
-$player-button-hover: rgba(255, 255, 255, 0.1) !default;
-$player-button-active: rgba(255, 255, 255, 0.2) !default;
-
-// Text colors
-$player-text-color: white !default;
-$player-text-secondary: rgba(255, 255, 255, 0.8) !default;
-
-// Background and overlay
-$player-bg-primary: #000 !default;
-$player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%) !default;
-$player-bg-title-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%) !default;
-$player-bg-menu: rgba(20, 20, 20, 0.95) !default;
-$player-bg-loading: rgba(0, 0, 0, 0.7) !default;
-
-// Dimensions
-$player-border-radius: 12px !default;
-$player-controls-padding: 20px 15px 15px !default;
-$player-title-overlay-padding: 15px 20px 25px !default;
-$player-button-padding: 8px !default;
-$player-icon-size: 20px !default;
-
-// Progress and Volume bars
-$player-progress-height: 6px !default;
-$player-progress-bg: rgba(255, 255, 255, 0.2) !default;
-$player-progress-buffer: rgba(255, 255, 255, 0.3) !default;
-$player-progress-handle-size: 16px !default;
-$player-volume-height: 4px !default;
-$player-volume-bg: rgba(255, 255, 255, 0.2) !default;
-$player-volume-handle-size: 14px !default;
-$player-volume-fill: 100% !default;
-
-// Transitions
-$player-transition-fast: 0.2s ease !default;
-$player-transition-normal: 0.3s ease !default;
-
-// Shadows
-$player-shadow-main: 0 8px 32px rgba(0, 0, 0, 0.3) !default;
-$player-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.2) !default;
-$player-shadow-tooltip: 0 3px 12px rgba(0, 0, 0, 0.4) !default;

package/scss/_video.scss

@@ -1,221 +0,0 @@
-// ===================================
-// VIDEO PLAYER
-// ===================================
-
-@use 'mixins' as *;
-
-/* SMART VIDEO HIDING */
-.video-player {
-    width: 100%;
-    height: auto;
-    display: block;
-    min-height: 300px;
-    visibility: hidden;
-    opacity: 0;
-    position: relative;
-    z-index: 1;
-    transition: none;
-}
-
-.video-wrapper.player-initialized .video-player {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.3s ease;
-    pointer-events: auto;
-}
-
-/* NATIVE CONTROLS DISABLED */
-.video-player::-webkit-media-controls-panel,
-.video-player::-webkit-media-controls-play-button,
-.video-player::-webkit-media-controls-start-playback-button,
-.video-player::-webkit-media-controls-timeline,
-.video-player::-webkit-media-controls-current-time-display,
-.video-player::-webkit-media-controls-time-remaining-display,
-.video-player::-webkit-media-controls-mute-button,
-.video-player::-webkit-media-controls-toggle-closed-captions-button,
-.video-player::-webkit-media-controls-volume-slider,
-.video-player::-webkit-media-controls-fullscreen-button,
-.video-player::-webkit-media-controls-seek-back-button,
-.video-player::-webkit-media-controls-seek-forward-button,
-.video-player::-webkit-media-controls-rewind-button,
-.video-player::-webkit-media-controls-return-to-realtime-button,
-.video-player::-webkit-media-controls-overlay-play-button {
-    display: none !important;
-    visibility: hidden !important;
-    opacity: 0 !important;
-}
-
-.video-player::-moz-media-controls {
-    display: none !important;
-}
-
-/* INITIAL LOADING */
-.initial-loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--player-bg-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
-}
-
-.video-wrapper.player-initialized .initial-loading {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    transition-delay: 0.2s;
-}
-
-.video-wrapper.player-initialized .initial-loading {
-    display: none;
-    transition-delay: 0.5s;
-}
-
-.loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--player-bg-loading);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity var(--player-transition-normal);
-    z-index: 15;
-}
-
-.loading-overlay.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-.loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-top: 3px solid var(--player-primary-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-/* CUSTOM SUBTITLES STYLING */
-.video-player::cue {
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    font-size: 18px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-weight: 500;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-    padding: 8px 12px;
-    border-radius: 6px;
-    line-height: 1.4;
-}
-
-.video-player::cue(.highlight) {
-    background: var(--player-primary-color);
-    color: black;
-}
-
-.video-player::cue(b) {
-    font-weight: 700;
-}
-
-.video-player::cue(i) {
-    font-style: italic;
-}
-
-/* VIDEO POSTER OVERLAY */
-.video-poster-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    z-index: 1;
-    cursor: pointer;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    pointer-events: none;
-}
-
-.video-poster-overlay.visible {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-}
-
-.video-poster-overlay.hidden {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-}
-
-.video-poster-overlay.visible:hover {
-    opacity: 0.95;
-}
-
-.video-poster-overlay::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80px;
-    height: 80px;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    border: 3px solid var(--player-primary-color);
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
-    pointer-events: none;
-}
-
-.video-poster-overlay.visible:hover::after {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1.1);
-    border-color: var(--player-primary-hover);
-    box-shadow: 0 0 20px var(--player-primary-color);
-}
-
-.video-poster-overlay::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-40%, -50%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 15px 0 15px 25px;
-    border-color: transparent transparent transparent var(--player-primary-color);
-    z-index: 2;
-    opacity: 0;
-    transition: opacity 0.3s ease, border-color 0.3s ease;
-    pointer-events: none;
-}
-
-.video-poster-overlay.visible:hover::before {
-    opacity: 1;
-    border-color: transparent transparent transparent var(--player-primary-hover);
-}

package/scss/_volume.scss

@@ -1,122 +0,0 @@
-// ===================================
-// VOLUME CONTROLS
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* VOLUME CONTROLS - IMPROVED RESPONSIVE */
-.volume-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-    flex-shrink: 2;
-    min-width: 0;
-}
-
-.volume-slider {
-    width: 60px;
-    height: var(--player-volume-height);
-    background: var(--player-volume-bg);
-    border-radius: calc(var(--player-volume-height) / 2);
-    outline: none;
-    cursor: pointer;
-    -webkit-appearance: none;
-    transition: all var(--player-transition-fast);
-}
-
-.volume-tooltip {
-    position: absolute;
-    bottom: 210%;
-    transition: opacity 0.15s ease, transform 0.15s ease;
-    left: 0;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.9);
-    color: white;
-    padding: 6px 10px;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    z-index: 1000;
-    box-shadow: var(--player-shadow-tooltip);
-    pointer-events: none;
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.volume-tooltip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 6px solid rgba(0, 0, 0, 0.9);
-}
-
-.volume-container:hover .volume-tooltip,
-.volume-tooltip.visible {
-    opacity: 1;
-    visibility: visible;
-}
-
-.volume-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: var(--player-volume-handle-size);
-    height: var(--player-volume-handle-size);
-    border-radius: 50%;
-    background: var(--player-primary-dark);
-    cursor: pointer;
-    transition: all var(--player-transition-fast);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    margin-top: calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2);
-    transform: translateY(0);
-}
-
-.volume-slider::-webkit-slider-thumb:hover {
-    transform: translateY(0) scale(1.2);
-    background: var(--player-primary-color);
-}
-
-.volume-slider::-moz-range-thumb {
-    width: var(--player-volume-handle-size);
-    height: var(--player-volume-handle-size);
-    border-radius: 50%;
-    background: var(--player-primary-dark);
-    cursor: pointer;
-    border: none;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    transition: all var(--player-transition-fast);
-    margin-top: 0;
-    transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2));
-}
-
-.volume-slider::-moz-range-thumb:hover {
-    background: var(--player-primary-color);
-    transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2)) scale(1.1);
-}
-
-.volume-slider::-webkit-slider-runnable-track {
-    height: var(--player-volume-height);
-    background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
-    border-radius: calc(var(--player-volume-height) / 2);
-    transition: background var(--player-transition-fast);
-    margin: 0;
-    border: none;
-}
-
-.volume-slider::-moz-range-track {
-    height: var(--player-volume-height);
-    background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
-    border-radius: calc(var(--player-volume-height) / 2);
-    border: none;
-    transition: background var(--player-transition-fast);
-    margin: 0;
-}

package/scss/_watermark.scss

@@ -1,128 +0,0 @@
-// ===================================
-// VIDEO WATERMARK
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-.video-watermark {
-    position: absolute;
-    z-index: 15;
-    pointer-events: auto;
-    opacity: 0.7;
-    transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
-}
-
-.video-watermark {
-    visibility: visible;
-    opacity: 0.7;
-}
-
-.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
-    visibility: hidden;
-    opacity: 0;
-}
-
-.video-wrapper.has-controls .video-watermark {
-    visibility: visible;
-    opacity: 0.7;
-}
-
-.video-watermark:hover {
-    opacity: 1;
-}
-
-.video-watermark img {
-    display: block;
-    max-width: 150px;
-    max-height: 80px;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-}
-
-/* Top positions */
-.video-watermark.watermark-topleft {
-    top: 15px;
-    left: 15px;
-}
-
-.video-watermark.watermark-topright {
-    top: 15px;
-    right: 15px;
-}
-
-/* Bottom positions - Dynamic with controlbar height + spacing */
-.video-watermark.watermark-bottomleft {
-    bottom: calc(var(--player-controls-height, 70px) + 15px);
-    left: 15px;
-}
-
-.video-watermark.watermark-bottomright {
-    bottom: calc(var(--player-controls-height, 70px) + 15px);
-    right: 15px;
-}
-
-/* When controls hidden, move to corner */
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
-    bottom: 15px;
-}
-
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-    bottom: 15px;
-}
-
-/* When controls shown, stay above controlbar */
-.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
-.video-wrapper.has-controls .video-watermark.watermark-bottomright {
-    bottom: calc(var(--player-controls-height, 70px) + 15px);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .video-watermark img {
-        max-width: 100px;
-        max-height: 50px;
-    }
-
-    .video-watermark.watermark-topleft,
-    .video-watermark.watermark-topright {
-        top: 10px;
-    }
-
-    .video-watermark.watermark-topleft,
-    .video-watermark.watermark-bottomleft {
-        left: 10px;
-    }
-
-    .video-watermark.watermark-topright,
-    .video-watermark.watermark-bottomright {
-        right: 10px;
-    }
-
-    .video-watermark.watermark-bottomleft,
-    .video-watermark.watermark-bottomright {
-        bottom: calc(var(--player-controls-height, 60px) + 10px);
-    }
-
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-        bottom: 10px;
-    }
-}
-
-@media (max-width: 480px) {
-    .video-watermark.watermark-bottomleft,
-    .video-watermark.watermark-bottomright {
-        bottom: calc(var(--player-controls-height, 55px) + 10px);
-    }
-
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-        bottom: 8px;
-    }
-}
-
-.video-watermark[style*="cursor: pointer"] {
-    cursor: pointer !important;
-}

package/scss/myetv-player.scss

@@ -1,51 +0,0 @@
-// ===================================
-// MYETV VIDEO PLAYER - SCSS
-// Created by https://www.myetv.tv
-// https://oskarcosimo.com
-// ===================================
-
-// 1. Core: Variables and Mixins
-@use 'variables' as *;
-@use 'mixins' as *;
-
-// 2. Base Styles (includes :root)
-@use 'base';
-
-// 3. Video Element
-@use 'video';
-
-// 4. Loading & Overlays
-@use 'loading';
-
-// 5. Title Overlay
-@use 'title-overlay';
-
-// 6. Controls
-@use 'controls';
-
-// 7. Progress Bar
-@use 'progress-bar';
-
-// 8. Volume Controls
-@use 'volume';
-
-// 9. Menus (Settings, Quality, Speed, Subtitles)
-@use 'menus';
-
-// 10. Poster Overlay
-@use 'poster';
-
-// 11. Tooltips
-@use 'tooltips';
-
-// 12 Audio Player (audiofile + audiowave)
-@use 'audio-player';
-
-// 13. Themes (Blue, Green, Red)
-@use 'themes';
-
-// 14. Watermark
-@use 'watermark';
-
-// 15. Responsive (must be last)
-@use 'responsive';

package/scss/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "myetv-player",
-  "version": "1.0.0",
-  "description": "MYETV Video Player - SCSS Source Files",
-  "scripts": {
-    "scss": "sass myetv-player.scss myetv-player.css",
-    "scss:watch": "sass --watch myetv-player.scss:myetv-player.css",
-    "scss:prod": "sass --style=compressed myetv-player.scss:myetv-player.min.css",
-    "scss:dev": "sass --watch --source-map myetv-player.scss:myetv-player.css"
-  },
-  "devDependencies": {
-    "sass": "^1.69.0"
-  },
-  "author": "MYETV - Oskar Cosimo",
-  "license": "MIT"
-}