myetv-player 1.1.6 → 1.3.0

package/scss/_controls.scss

@@ -1,188 +0,0 @@
-// ===================================
-// CONTROLS
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* CONTROLS CONTAINER - 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;
-}
-
-/* MAIN CONTROLS - IMPROVED RESPONSIVE LAYOUT */
-.controls-main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    min-height: 44px !important;
-    flex-shrink: 0;
-}
-
-.controls-left,
-.controls-right {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-shrink: 1;
-    min-width: 0;
-}
-
-/* BUTTONS - IMPROVED RESPONSIVE BEHAVIOR */
-.control-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: 1;
-    min-width: 0;
-    white-space: nowrap;
-}
-
-.control-btn:hover {
-    background: var(--player-button-hover);
-    transform: scale(1.05);
-}
-
-.control-btn:active {
-    transform: scale(0.95);
-    background: var(--player-button-active);
-}
-
-/* SPECIFIC SUBTITLES BUTTON */
-.subtitles-btn {
-    position: relative;
-}
-
-/* QUALITY BUTTON WITH DUAL DISPLAY */
-.quality-btn {
-    min-height: 36px;
-    padding: 6px 8px;
-}
-
-.quality-btn-text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    line-height: 1;
-}
-
-.selected-quality {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--player-button-color);
-}
-
-.current-quality {
-    font-size: 10px;
-    font-weight: 400;
-    color: var(--player-text-secondary);
-    opacity: 0.8;
-    margin-top: 2px;
-    line-height: 1;
-}
-
-/* TIME DISPLAY - RESPONSIVE */
-.time-display {
-    color: var(--player-text-color);
-    font-size: 14px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-variant-numeric: tabular-nums;
-    flex-shrink: 2;
-    min-width: 0;
-}
-
-/* ICONS */
-.icon {
-    width: var(--player-icon-size);
-    height: var(--player-icon-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-}
-
-.hidden {
-    display: none !important;
-}
-
-/* BRAND LOGO RESPONSIVE */
-.controls-right .brand-logo {
-    height: 44px;
-    max-width: 120px;
-    object-fit: contain;
-    margin-right: 10px;
-    pointer-events: auto;
-    opacity: 0.8;
-    transition: opacity var(--player-transition-fast);
-    order: -1;
-    flex-shrink: 1;
-}
-
-.controls-right .brand-logo:hover {
-    opacity: 1;
-}
-
-.controls-right .brand-logo-link {
-    order: -1;
-    margin-right: 10px;
-    display: inline-block;
-    text-decoration: none;
-}
-
-.controls-right .brand-logo-link .brand-logo {
-    margin-right: 0;
-}
-
-/* Hide cursor when controlbar is hidden */
-.video-wrapper.hide-cursor {
-    cursor: none !important;
-}
-
-/* Ensure cursor is visible on controls even when hide-cursor is active */
-.video-wrapper.hide-cursor .controls {
-    cursor: default !important;
-}
-
-/* Ensure cursor is visible on buttons */
-.video-wrapper.hide-cursor .control-btn {
-    cursor: pointer !important;
-}
-
-/* do not hide mouse on iframes */
-.video-wrapper.hide-cursor iframe {
-    cursor: auto !important;
-    pointer-events: auto !important;
-}

package/scss/_loading.scss

@@ -1,111 +0,0 @@
-// ===================================
-// LOADING & OVERLAYS
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* 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);
-    }
-}
-
-/* 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;
-}

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);
-        }
-    }
-}