myetv-player 1.2.0 → 1.3.0

package/scss/_progress-bar.scss

@@ -1,319 +0,0 @@
-// ===================================
-// PROGRESS BAR
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* PROGRESS BAR */
-.progress-container {
-    width: 100%;
-    height: var(--player-progress-height);
-    background: var(--player-progress-bg);
-    border-radius: calc(var(--player-progress-height) / 2);
-    margin-bottom: 15px;
-    position: relative;
-    cursor: pointer;
-}
-
-.progress-bar {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    border-radius: calc(var(--player-progress-height) / 2);
-    overflow: hidden;
-}
-
-.progress-buffer {
-    height: 100%;
-    background: var(--player-progress-buffer);
-    width: 0%;
-    border-radius: calc(var(--player-progress-height) / 2);
-    transition: width var(--player-transition-fast);
-}
-
-.progress-filled {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: var(--player-primary-color);
-    width: 0%;
-    border-radius: calc(var(--player-progress-height) / 2);
-    transition: width 0.1s ease;
-}
-
-.progress-handle {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--player-progress-handle-size);
-    height: var(--player-progress-handle-size);
-    background: var(--player-primary-color);
-    border-radius: 50%;
-    opacity: 1;
-    transition: opacity var(--player-transition-fast);
-    z-index: 2;
-    left: 0%;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    pointer-events: all;
-    touch-action: none;
-    /* Larger invisible touch area */
-    &::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 44px;
-        height: 44px;
-        border-radius: 50%;
-    }
-}
-
-.progress-container:hover .progress-handle {
-    opacity: 1;
-}
-
-.progress-container:hover .progress-filled {
-    background: var(--player-primary-hover);
-}
-
-/* TOOLTIP SEEK BAR */
-.seek-tooltip {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    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;
-    transform: translateX(-50%) translateY(-8px);
-    transition: all 0.15s ease;
-    z-index: 1000;
-    box-shadow: var(--player-shadow-tooltip);
-    font-variant-numeric: tabular-nums;
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.seek-tooltip::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);
-}
-
-.seek-tooltip.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-50%) translateY(-4px);
-}
-
-/* CHAPTER MARKERS SYSTEM */
-.chapter-markers-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 3;
-}
-
-.chapter-marker {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 3px;
-    background: var(--player-primary-color);
-    opacity: 0.7;
-    cursor: pointer;
-    pointer-events: auto;
-    transition: all var(--player-transition-fast);
-    border-radius: 2px;
-    transform: translateX(-50%);
-}
-
-.chapter-marker:hover {
-    opacity: 1;
-    width: 4px;
-    height: 120%;
-    top: -10%;
-    box-shadow: 0 0 8px var(--player-primary-color);
-}
-
-.chapter-marker.active {
-    background: var(--player-primary-hover);
-    opacity: 1;
-    width: 4px;
-}
-
-.chapter-tooltip {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    background: rgba(0, 0, 0, 0.95);
-    backdrop-filter: blur(10px);
-    border-radius: 8px;
-    padding: 0;
-    margin-bottom: 12px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.2s ease;
-    transform: translateX(-50%) translateY(-8px);
-    z-index: 1000;
-    box-shadow: var(--player-shadow-tooltip);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    min-width: 200px;
-    max-width: 300px;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.chapter-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.95);
-}
-
-.chapter-tooltip-image {
-    width: 100%;
-    height: 150px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    display: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.chapter-tooltip-title {
-    padding: 10px 12px 6px;
-    color: var(--player-text-color);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.3;
-    word-wrap: break-word;
-}
-
-.chapter-tooltip-time {
-    padding: 0 12px 10px;
-    color: var(--player-text-secondary);
-    font-size: 12px;
-    font-weight: 400;
-    font-variant-numeric: tabular-nums;
-}
-
-/* ===================================
-   SEEK HANDLE SHAPES
-   Available: none, circle, square, diamond, arrow, triangle, heart, star
-   =================================== */
-
-/* Default shape: circle (already defined above) */
-.progress-handle {
-    /* Base styles already defined */
-}
-
-.progress-handle-circle {
-    border-radius: 50%;
-}
-
-.progress-handle-square {
-    border-radius: 2px;
-}
-
-.progress-handle-diamond {
-    border-radius: 2px;
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.progress-handle-arrow {
-    border-radius: 0;
-    clip-path: polygon(0% 50%, 60% 0%, 60% 35%, 100% 35%, 100% 65%, 60% 65%, 60% 100%);
-}
-
-.progress-handle-triangle {
-    border-radius: 0;
-    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-}
-
-.progress-handle-heart {
-    border-radius: 0;
-}
-
-.progress-handle-heart::before {
-    content: '❤';
-    font-size: 12px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.progress-handle-star {
-    border-radius: 0;
-    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-}
-
-.progress-handle-none {
-    opacity: 0 !important;
-}
-
-/* ===================================
-   TOUCH/DRAG IMPROVEMENTS
-   =================================== */
-
-/* Increase touch target ONLY for the handle, not the entire bar */
-.progress-handle {
-    /* Invisible larger touch area */
-    &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 44px;
-        height: 44px;
-        border-radius: 50%;
-        /* Uncomment to debug: background: rgba(255, 0, 0, 0.2); */
-    }
-}
-
-/* ONLY when actively seeking - enlarge bar */
-.progress-container.seeking {
-    .progress-bar {
-        height: calc(var(--player-progress-height) * 2);
-        transition: height 0.15s ease;
-    }
-
-    .progress-handle {
-        transform: translate(-50%, -50%) scale(1.4);
-        transition: transform 0.15s ease;
-    }
-}
-
-/* Desktop hover - subtle enlargement */
-@media (hover: hover) and (pointer: fine) {
-    .progress-container:hover .progress-bar {
-        height: calc(var(--player-progress-height) * 1.3);
-        transition: height 0.15s ease;
-    }
-}

package/scss/_resolution.scss

@@ -1,68 +0,0 @@
-// ===================================
-// RESOLUTION MODES
-// ===================================
-
-// 16:9 aspect ratio (default)
-.video-wrapper.ratio-16-9 {
-  .video-player {
-    aspect-ratio: 16 / 9;
-  }
-}
-
-// 4:3 aspect ratio
-.video-wrapper.ratio-4-3 {
-  .video-player {
-    aspect-ratio: 4 / 3;
-  }
-}
-
-// 21:9 cinematic
-.video-wrapper.ratio-21-9 {
-  .video-player {
-    aspect-ratio: 21 / 9;
-  }
-}
-
-// 1:1 square
-.video-wrapper.ratio-1-1 {
-  .video-player {
-    aspect-ratio: 1 / 1;
-  }
-}
-
-// Fit to screen
-.video-wrapper.fit-to-screen {
-  .video-player {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
-
-// Fill screen (may crop)
-.video-wrapper.fill-screen {
-  .video-player {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-// Stretched (may distort)
-.video-wrapper.stretched {
-  .video-player {
-    width: 100%;
-    height: 100%;
-    object-fit: fill;
-  }
-}
-
-// Original size
-.video-wrapper.original-size {
-  .video-player {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-  }
-}