myetv-player 1.2.0 → 1.4.0

package/scss/_menus.scss

@@ -1,432 +0,0 @@
-// ===================================
-// MENUS (Settings, Quality, Speed, Subtitles)
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* CONTROL MENUS */
-.speed-control,
-.quality-control,
-.subtitles-control {
-    position: relative;
-}
-
-.speed-menu,
-.quality-menu,
-.subtitles-menu {
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    background: var(--player-bg-menu);
-    backdrop-filter: blur(10px);
-    border-radius: 8px;
-    padding: 8px 0;
-    margin-bottom: 10px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--player-transition-fast);
-    min-width: 140px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    z-index: 100;
-    box-shadow: var(--player-shadow-menu);
-}
-
-/* Main menus open ONLY with .active (CLICK) */
-.speed-menu.active,
-.quality-menu.active,
-.subtitles-menu.active {
-    opacity: 1 !important;
-    visibility: visible !important;
-    pointer-events: all !important;
-}
-
-.speed-option,
-.quality-option,
-.subtitles-option {
-    padding: 8px 16px;
-    color: var(--player-text-color);
-    cursor: pointer;
-    transition: all var(--player-transition-fast);
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.speed-option:hover,
-.quality-option:hover,
-.subtitles-option:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--player-primary-color);
-}
-
-.speed-option.active,
-.quality-option.active,
-.subtitles-option.active {
-    color: var(--player-primary-color);
-    font-weight: 600;
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Highlight currently selected subtitle option */
-.subtitles-option.selected,
-.subtitles-option.active {
-    color: var(--player-primary-color);
-    background: rgba(255, 255, 255, 0.1);
-    position: relative;
-}
-
-.subtitles-option.selected::after,
-.subtitles-option.active::after {
-    content: '✓';
-    position: absolute;
-    right: 10px;
-    font-weight: bold;
-}
-
-/* DUAL QUALITY INDICATORS */
-.quality-option.selected {
-    color: var(--player-primary-color);
-    font-weight: 600;
-}
-
-.quality-option.selected::after {
-    content: 'Selected';
-    font-size: 12px;
-    color: var(--player-primary-color);
-    font-weight: 400;
-    margin-left: 8px;
-}
-
-.quality-option.playing {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.quality-option.playing::after {
-    content: 'Playing';
-    font-size: 12px;
-    color: #4CAF50;
-    font-weight: 400;
-    margin-left: 8px;
-}
-
-.quality-option.selected.playing::after {
-    content: 'Active';
-    font-size: 12px;
-    color: var(--player-primary-color);
-    font-weight: 500;
-    margin-left: 8px;
-}
-
-.subtitles-option.active::after {
-    content: '✓';
-    font-size: 12px;
-    color: var(--player-primary-color);
-}
-
-/* SETTINGS DROPDOWN MENU - FOR SMALL SCREENS */
-.settings-control {
-    position: relative;
-    display: none;
-}
-
-.settings-btn {
-    background: none;
-    border: none;
-    color: var(--player-button-color);
-    cursor: pointer;
-    padding: var(--player-button-padding);
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    transition: all var(--player-transition-fast);
-    font-size: 14px;
-    font-weight: 500;
-    position: relative;
-    flex-shrink: 0;
-    min-width: 0;
-    white-space: nowrap;
-}
-
-.settings-btn:hover {
-    background: var(--player-button-hover);
-    transform: scale(1.05);
-}
-
-.settings-btn:active {
-    transform: scale(0.95);
-    background: var(--player-button-active);
-}
-
-.settings-btn .icon::before {
-    content: '⚙️';
-    font-size: 16px;
-}
-
-.settings-menu {
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    background: var(--player-bg-menu);
-    backdrop-filter: blur(10px);
-    border-radius: 8px;
-    padding: 8px 0;
-    margin-bottom: 10px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--player-transition-fast);
-    min-width: 180px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    z-index: 100;
-    box-shadow: var(--player-shadow-menu);
-}
-
-/* ⚠️ Settings menu opens ONLY with .active (CLICK) */
-.settings-menu.active {
-    opacity: 1 !important;
-    visibility: visible !important;
-    pointer-events: all !important;
-}
-
-.settings-option {
-    padding: 8px 16px;
-    color: var(--player-text-color);
-    cursor: pointer;
-    transition: all var(--player-transition-fast);
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    position: relative;
-}
-
-.settings-option:last-child {
-    border-bottom: none;
-}
-
-.settings-option:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--player-primary-color);
-}
-
-.settings-option-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: 1;
-}
-
-.settings-option-value {
-    font-size: 12px;
-    color: var(--player-text-secondary);
-    opacity: 0.8;
-}
-
-/* Submenu styling - HIDDEN BY DEFAULT */
-.settings-submenu,
-.quality-submenu,
-.speed-submenu {
-    position: absolute;
-    bottom: 0;
-    right: 100%;
-    background: var(--player-bg-menu);
-    backdrop-filter: blur(10px);
-    border-radius: 8px;
-    padding: 8px 0;
-    margin-right: 5px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--player-transition-fast);
-    min-width: 150px;
-    max-width: 180px;
-    max-height: 250px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    white-space: nowrap;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    z-index: 101;
-    box-shadow: var(--player-shadow-menu);
-    pointer-events: none;
-}
-
-/* ⚠️ SOLUTION: Submenus open on HOVER (easier and more intuitive) */
-.settings-option:hover .settings-submenu,
-.settings-option:hover .quality-submenu,
-.settings-option:hover .speed-submenu {
-    opacity: 1 !important;
-    visibility: visible !important;
-    transform: translateX(-2px) !important;
-    pointer-events: all !important;
-}
-
-.settings-submenu .settings-suboption,
-.quality-submenu .quality-option,
-.speed-submenu .speed-option {
-    padding: 8px 10px !important;
-    font-size: 12px !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-}
-
-.settings-suboption {
-    padding: 8px 16px;
-    color: var(--player-text-color);
-    cursor: pointer;
-    transition: all var(--player-transition-fast);
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.settings-suboption:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--player-primary-color);
-}
-
-.settings-suboption.active {
-    color: var(--player-primary-color);
-    font-weight: 600;
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.settings-suboption.active::after {
-    content: '✓';
-    font-size: 12px;
-    color: var(--player-primary-color);
-}
-
-/* Visual indicator for options with submenus */
-.settings-option:has(.settings-submenu, .quality-submenu, .speed-submenu)::after {
-    content: '▶';
-    font-size: 10px;
-    color: var(--player-text-secondary);
-    margin-left: 8px;
-}
-
-.settings-option:hover::after {
-    color: var(--player-primary-color);
-}
-
-/* RESPONSIVE - PROGRESSIVE REDUCTION */
-@media (max-width: 768px) {
-    .settings-menu > .settings-option {
-        font-size: 12px !important;
-    }
-
-    .settings-submenu,
-    .quality-submenu,
-    .speed-submenu {
-        max-width: min(140px, calc(100vw - 180px)) !important;
-    }
-
-    .settings-submenu .settings-suboption,
-    .quality-submenu .quality-option,
-    .speed-submenu .speed-option {
-        padding: 7px 8px !important;
-        font-size: 11px !important;
-    }
-}
-
-@media (max-width: 600px) {
-    .settings-menu > .settings-option {
-        font-size: 11px !important;
-    }
-
-    .settings-submenu,
-    .quality-submenu,
-    .speed-submenu {
-        max-width: min(120px, calc(100vw - 160px)) !important;
-    }
-
-    .settings-submenu .settings-suboption,
-    .quality-submenu .quality-option,
-    .speed-submenu .speed-option {
-        padding: 6px 7px !important;
-        font-size: 10px !important;
-    }
-}
-
-@media (max-width: 450px) {
-    .settings-menu > .settings-option {
-        font-size: 10px !important;
-    }
-
-    .settings-submenu,
-    .quality-submenu,
-    .speed-submenu {
-        max-width: min(100px, calc(100vw - 140px)) !important;
-    }
-
-    .settings-submenu .settings-suboption,
-    .quality-submenu .quality-option,
-    .speed-submenu .speed-option {
-        padding: 5px 6px !important;
-        font-size: 9px !important;
-    }
-}
-
-@media (max-width: 350px) {
-    .settings-control {
-        display: block !important;
-    }
-
-    .pip-btn,
-    .speed-control,
-    .subtitles-control {
-        display: none !important;
-    }
-}
-// Expandable settings menu styles
-.settings-expandable-wrapper {
-    position: relative;
-    display: block;
-}
-
-.settings-option.expandable-trigger {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    font-size: 10px !important;
-
-    .settings-option-label {
-        font-size: 10px !important;
-    }
-
-    .expand-arrow {
-        font-size: 8px;
-        transition: transform 0.2s ease;
-        margin-left: 8px;
-    }
-}
-
-.settings-expandable-content {
-    padding-left: 15px;
-    margin-top: 4px;
-
-    .settings-suboption {
-        padding: 6px 12px;
-        cursor: pointer;
-        color: white;
-        font-size: 10px;
-        white-space: normal;
-        word-wrap: break-word;
-        opacity: 0.8;
-        transition: opacity 0.2s;
-
-        &.active {
-            opacity: 1;
-            font-weight: bold;
-        }
-
-        &:hover {
-            opacity: 1;
-            background: rgba(255, 255, 255, 0.1);
-        }
-    }
-}

package/scss/_mixins.scss

@@ -1,112 +0,0 @@
-// ===================================
-// MIXINS
-// ===================================
-
-@use 'variables' as *;
-
-// Mixin for button hover effects
-@mixin button-hover {
-    transition: all $player-transition-fast;
-
-    &:hover {
-        background: $player-button-hover;
-        transform: scale(1.05);
-    }
-
-    &:active {
-        transform: scale(0.95);
-        background: $player-button-active;
-    }
-}
-
-// Mixin for overlay positioning
-@mixin overlay-base {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-// Mixin for menu styling
-@mixin menu-base {
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    background: $player-bg-menu;
-    backdrop-filter: blur(10px);
-    border-radius: 8px;
-    padding: 8px 0;
-    margin-bottom: 10px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all $player-transition-fast;
-    min-width: 140px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    z-index: 100;
-    box-shadow: $player-shadow-menu;
-}
-
-// Mixin for tooltip styling
-@mixin tooltip-base {
-    position: absolute;
-    bottom: 100%;
-    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;
-    transition: all 0.15s ease;
-    z-index: 1000;
-    box-shadow: $player-shadow-tooltip;
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: 0;
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-top: 5px solid rgba(0, 0, 0, 0.9);
-    }
-}
-
-// Mixin for flex centering
-@mixin flex-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-// Mixin for smooth transition
-@mixin smooth-transition($properties...) {
-    transition: $properties $player-transition-normal;
-}
-
-// Responsive breakpoints
-@mixin tablet {
-    @media (max-width: 768px) {
-        @content;
-    }
-}
-
-@mixin mobile {
-    @media (max-width: 480px) {
-        @content;
-    }
-}
-
-@mixin small-mobile {
-    @media (max-width: 350px) {
-        @content;
-    }
-}

package/scss/_poster.scss

@@ -1,8 +0,0 @@
-// ===================================
-// POSTER OVERLAY
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-