myetv-player 1.2.0 → 1.3.0

package/scss/_controls.scss

@@ -1,204 +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;
-}
-
-.play-icon svg,
-.pause-icon svg,
-.volume-icon svg,
-.mute-icon svg,
-.playlist-prev-btn .icon svg,
-.playlist-next-btn .icon svg,
-.subtitles-btn .icon svg,
-.fullscreen-icon svg,
-.exit-fullscreen-icon svg,
-.pip-icon svg,
-.pip-exit-icon svg {
-    width: 16px;
-    height: 16px;
-    display: block;
-}
-
-/* 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;
-}