@memberjunction/ng-media-player 6.1.0-edge.4 → 6.1.0-edge.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1462,7 +1462,7 @@ export class MJMediaPlayerComponent {
|
|
|
1462
1462
|
i0.ɵɵclassProp("mj-media-player--bottom-transcript", ctx.TranscriptPosition === "bottom")("mj-media-player--has-transcript", ctx.ShowTranscriptPanel)("mj-media-player--audio", ctx.IsAudioOnly)("mj-media-player--video", ctx.VideoTracks.length > 0);
|
|
1463
1463
|
i0.ɵɵadvance();
|
|
1464
1464
|
i0.ɵɵconditional(!ctx.HasTracks ? 1 : 2);
|
|
1465
|
-
} }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n color: var(--mj-text-primary);\n}\n\n.mj-media-player[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-height: 0;\n gap: 0;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n overflow: hidden;\n outline: none;\n}\n\n.mj-media-player[_ngcontent-%COMP%]:focus-visible {\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n\n\n.mj-media-player--has-transcript[_ngcontent-%COMP%]:not(.mj-media-player--bottom-transcript) {\n flex-direction: row;\n align-items: stretch;\n}\n\n.mj-media-main[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n}\n\n\n\n\n\n\n.mj-media-player--audio.mj-media-player--bottom-transcript[_ngcontent-%COMP%] .mj-media-main[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n\n\n\n.mj-media-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 2.5rem 1rem;\n color: var(--mj-text-muted);\n}\n\n.mj-media-empty__icon[_ngcontent-%COMP%] {\n font-size: 2rem;\n}\n\n.mj-media-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n color: var(--mj-status-error-text);\n background: var(--mj-status-error-bg);\n}\n\n\n\n\n.mj-media-stage[_ngcontent-%COMP%] {\n position: relative;\n background: var(--mj-bg-surface-sunken);\n min-height: 80px;\n}\n\n\n\n.mj-media-player--video[_ngcontent-%COMP%] .mj-media-stage[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n}\n\n.mj-media-audio[_ngcontent-%COMP%] {\n display: none;\n}\n\n.mj-media-audio-art[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n font-size: 2.5rem;\n color: var(--mj-text-disabled);\n}\n\n\n\n.mj-media-waveform[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n gap: 1px;\n width: 100%;\n box-sizing: border-box;\n height: 96px;\n padding: 0.75rem 1rem;\n overflow: hidden;\n cursor: pointer;\n touch-action: none;\n outline: none;\n}\n\n.mj-media-waveform[_ngcontent-%COMP%]:focus-visible {\n box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform__bar[_ngcontent-%COMP%] {\n \n\n\n\n\n\n\n flex: 1 1 0;\n min-width: 0;\n min-height: 2px;\n align-self: center;\n background: var(--mj-border-strong);\n border-radius: 1px;\n pointer-events: none;\n transform-origin: center;\n transition: background-color 0.1s ease, transform 0.18s ease;\n}\n\n.mj-media-waveform__bar--played[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n\n\n.mj-media-waveform__progress[_ngcontent-%COMP%] {\n position: absolute;\n top: 0.5rem;\n bottom: 0.5rem;\n width: 2px;\n margin-left: -1px;\n background: var(--mj-brand-primary);\n opacity: 0.85;\n pointer-events: none;\n}\n\n\n\n.mj-media-waveform-fallback[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n height: 96px;\n padding: 0 1rem;\n cursor: pointer;\n touch-action: none;\n outline: none;\n}\n\n.mj-media-waveform-fallback[_ngcontent-%COMP%]:focus-visible {\n box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform-fallback__rail[_ngcontent-%COMP%] {\n position: relative;\n flex: 1 1 auto;\n height: 5px;\n background: var(--mj-border-strong);\n border-radius: var(--mj-radius-full, 999px);\n overflow: hidden;\n}\n\n.mj-media-waveform-fallback__fill[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0 auto 0 0;\n background: var(--mj-brand-primary);\n}\n\n\n\n.mj-media-video-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr;\n gap: 4px;\n flex: 1 1 auto;\n min-height: 0;\n width: 100%;\n background: var(--mj-bg-surface-sunken);\n}\n\n.mj-media-video-grid--multi[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n}\n\n.mj-media-video-cell[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n min-height: 0;\n}\n\n.mj-media-video-cell__label[_ngcontent-%COMP%] {\n position: absolute;\n top: 0.5rem;\n left: 0.5rem;\n z-index: 1;\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem;\n border-radius: var(--mj-radius-sm, 4px);\n color: var(--mj-text-inverse);\n background: rgba(0, 0, 0, 0.55);\n}\n\n.mj-media-video[_ngcontent-%COMP%] {\n width: 100%;\n height: auto;\n display: block;\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n.mj-media-video-grid[_ngcontent-%COMP%]:not(.mj-media-video-grid--multi) .mj-media-video[_ngcontent-%COMP%] {\n height: 100%;\n min-height: 0;\n object-fit: contain;\n}\n\n\n\n\n.mj-media-busy[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.625rem;\n pointer-events: none;\n color: var(--mj-text-inverse);\n background: color-mix(in srgb, var(--mj-bg-overlay) 55%, transparent);\n}\n\n.mj-media-busy__spinner[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 3px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n border-top-color: var(--mj-text-inverse);\n animation: _ngcontent-%COMP%_mj-media-spin 0.8s linear infinite;\n}\n\n.mj-media-busy__label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n font-weight: 600;\n letter-spacing: 0.01em;\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n\n\n.mj-media-busy--static[_ngcontent-%COMP%] .mj-media-busy__spinner[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.4s ease-in-out infinite;\n border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-busy-pulse {\n 0%,\n 100% {\n opacity: 0.45;\n }\n 50% {\n opacity: 1;\n }\n}\n\n\n\n\n.mj-media-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n align-self: flex-start;\n min-height: 1rem;\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--mj-text-muted);\n}\n\n.mj-media-status--busy[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.mj-media-status__dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-brand-primary);\n animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.2s ease-in-out infinite;\n}\n\n\n\n\n.mj-media-transport[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.625rem 0.75rem 0.75rem;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.mj-media-scrubber-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n}\n\n.mj-media-time[_ngcontent-%COMP%] {\n font-variant-numeric: tabular-nums;\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n min-width: 3.25rem;\n}\n\n.mj-media-time--total[_ngcontent-%COMP%] {\n text-align: right;\n}\n\n.mj-media-scrubber[_ngcontent-%COMP%] {\n position: relative;\n flex: 1 1 auto;\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n touch-action: none;\n outline: none;\n}\n\n.mj-media-scrubber[_ngcontent-%COMP%]:focus-visible {\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-full, 999px);\n}\n\n.mj-media-scrubber__rail[_ngcontent-%COMP%] {\n position: relative;\n flex: 1 1 auto;\n height: 5px;\n background: var(--mj-border-strong);\n border-radius: var(--mj-radius-full, 999px);\n overflow: hidden;\n}\n\n.mj-media-scrubber__fill[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0 auto 0 0;\n background: var(--mj-brand-primary);\n}\n\n.mj-media-scrubber__handle[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n width: 13px;\n height: 13px;\n margin-left: -6.5px;\n transform: translateY(-50%);\n background: var(--mj-brand-primary);\n border: 2px solid var(--mj-bg-surface);\n border-radius: 50%;\n pointer-events: none;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mj-media-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.mj-media-controls__left[_ngcontent-%COMP%], \n.mj-media-controls__right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n\n\n.mj-media-btn[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n min-width: 32px;\n height: 32px;\n padding: 0 0.5rem;\n font-size: 0.875rem;\n color: var(--mj-text-primary);\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--mj-radius-sm, 4px);\n cursor: pointer;\n transition: background-color 0.12s ease, color 0.12s ease;\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:active {\n background: var(--mj-bg-surface-active);\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n background: var(--mj-brand-primary);\n min-width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%]:active {\n background: var(--mj-brand-primary-active);\n}\n\n\n\n.mj-media-btn--active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.mj-media-btn--active[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n.mj-media-btn__skip-label[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n font-variant-numeric: tabular-nums;\n}\n\n\n\n.mj-media-volume[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.mj-media-volume__slider[_ngcontent-%COMP%] {\n width: 80px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.mj-media-volume__slider[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-full, 999px);\n}\n\n\n\n.mj-media-rate[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.mj-media-rate__toggle[_ngcontent-%COMP%] {\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n}\n\n.mj-media-rate__menu[_ngcontent-%COMP%] {\n position: absolute;\n bottom: calc(100% + 4px);\n right: 0;\n z-index: 10;\n margin: 0;\n padding: 0.25rem;\n list-style: none;\n min-width: 4rem;\n background: var(--mj-bg-surface-elevated);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%] {\n display: block;\n width: 100%;\n text-align: left;\n padding: 0.375rem 0.625rem;\n font-size: 0.8125rem;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-radius: var(--mj-radius-sm, 4px);\n cursor: pointer;\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-rate__item--active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n\n\n\n.mj-media-transcript[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1px;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-subtle);\n max-height: 480px;\n width: 340px;\n flex: 0 0 auto;\n padding: 0.5rem;\n}\n\n\n\n\n\n\n\n.mj-media-player--bottom-transcript[_ngcontent-%COMP%] .mj-media-transcript[_ngcontent-%COMP%] {\n width: auto;\n border-left: none;\n border-top: 1px solid var(--mj-border-subtle);\n flex: 1 1 auto;\n min-height: 0;\n max-height: none;\n}\n\n.mj-media-cue[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.625rem;\n align-items: flex-start;\n width: 100%;\n text-align: left;\n padding: 0.5rem 0.625rem;\n background: transparent;\n border: none;\n border-left: 3px solid transparent;\n border-radius: var(--mj-radius-sm, 4px);\n cursor: pointer;\n color: var(--mj-text-primary);\n font: inherit;\n transition: background-color 0.12s ease;\n}\n\n.mj-media-cue[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-cue[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-cue--active[_ngcontent-%COMP%] {\n border-left-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-media-cue__time[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n font-variant-numeric: tabular-nums;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n padding-top: 0.125rem;\n}\n\n.mj-media-cue__body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n min-width: 0;\n}\n\n.mj-media-cue__speaker[_ngcontent-%COMP%] {\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.mj-media-cue__text[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n line-height: 1.4;\n}\n\n\n\n\n\n\n.mj-media-waveform[_ngcontent-%COMP%]:not(.mj-media-waveform--static) .mj-media-waveform__bar[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-media-bar-in 0.25s ease both;\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-bar-in {\n from {\n transform: scaleY(0.15);\n opacity: 0.4;\n }\n to {\n transform: scaleY(1);\n opacity: 1;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mj-media-btn[_ngcontent-%COMP%], \n .mj-media-cue[_ngcontent-%COMP%], \n .mj-media-waveform__bar[_ngcontent-%COMP%], \n .mj-media-scrubber__fill[_ngcontent-%COMP%] {\n transition: none;\n animation: none;\n }\n\n \n\n .mj-media-busy__spinner[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.4s ease-in-out infinite;\n border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n }\n\n .mj-media-status__dot[_ngcontent-%COMP%] {\n animation: none;\n }\n}"], changeDetection: 0 });
|
|
1465
|
+
} }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n color: var(--mj-text-primary);\n}\n\n.mj-media-player[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-height: 0;\n gap: 0;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n overflow: hidden;\n outline: none;\n}\n\n.mj-media-player[_ngcontent-%COMP%]:focus-visible {\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n\n.mj-media-player--has-transcript[_ngcontent-%COMP%]:not(.mj-media-player--bottom-transcript) {\n flex-direction: row;\n align-items: stretch;\n}\n\n.mj-media-main[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n}\n\n\n\n\n\n.mj-media-player--audio.mj-media-player--bottom-transcript[_ngcontent-%COMP%] .mj-media-main[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n\n\n.mj-media-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 2.5rem 1rem;\n color: var(--mj-text-muted);\n}\n\n.mj-media-empty__icon[_ngcontent-%COMP%] {\n font-size: 2rem;\n}\n\n.mj-media-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n color: var(--mj-status-error-text);\n background: var(--mj-status-error-bg);\n}\n\n\n\n.mj-media-stage[_ngcontent-%COMP%] {\n position: relative;\n background: var(--mj-bg-surface-sunken);\n min-height: 80px;\n}\n\n\n.mj-media-player--video[_ngcontent-%COMP%] .mj-media-stage[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n}\n\n.mj-media-audio[_ngcontent-%COMP%] {\n display: none;\n}\n\n.mj-media-audio-art[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n font-size: 2.5rem;\n color: var(--mj-text-disabled);\n}\n\n\n.mj-media-waveform[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n gap: 1px;\n width: 100%;\n box-sizing: border-box;\n height: 96px;\n padding: 0.75rem 1rem;\n overflow: hidden;\n cursor: pointer;\n touch-action: none;\n outline: none;\n}\n\n.mj-media-waveform[_ngcontent-%COMP%]:focus-visible {\n box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform__bar[_ngcontent-%COMP%] {\n \n\n\n\n\n\n flex: 1 1 0;\n min-width: 0;\n min-height: 2px;\n align-self: center;\n background: var(--mj-border-strong);\n border-radius: 1px;\n pointer-events: none;\n transform-origin: center;\n transition: background-color 0.1s ease, transform 0.18s ease;\n}\n\n.mj-media-waveform__bar--played[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n\n.mj-media-waveform__progress[_ngcontent-%COMP%] {\n position: absolute;\n top: 0.5rem;\n bottom: 0.5rem;\n width: 2px;\n margin-left: -1px;\n background: var(--mj-brand-primary);\n opacity: 0.85;\n pointer-events: none;\n}\n\n\n.mj-media-waveform-fallback[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n height: 96px;\n padding: 0 1rem;\n cursor: pointer;\n touch-action: none;\n outline: none;\n}\n\n.mj-media-waveform-fallback[_ngcontent-%COMP%]:focus-visible {\n box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform-fallback__rail[_ngcontent-%COMP%] {\n position: relative;\n flex: 1 1 auto;\n height: 5px;\n background: var(--mj-border-strong);\n border-radius: var(--mj-radius-full, 999px);\n overflow: hidden;\n}\n\n.mj-media-waveform-fallback__fill[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0 auto 0 0;\n background: var(--mj-brand-primary);\n}\n\n\n.mj-media-video-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr;\n gap: 4px;\n flex: 1 1 auto;\n min-height: 0;\n width: 100%;\n background: var(--mj-bg-surface-sunken);\n}\n\n.mj-media-video-grid--multi[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n}\n\n.mj-media-video-cell[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n min-height: 0;\n}\n\n.mj-media-video-cell__label[_ngcontent-%COMP%] {\n position: absolute;\n top: 0.5rem;\n left: 0.5rem;\n z-index: 1;\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem;\n border-radius: var(--mj-radius-sm, 4px);\n color: var(--mj-text-inverse);\n background: rgba(0, 0, 0, 0.55);\n}\n\n.mj-media-video[_ngcontent-%COMP%] {\n width: 100%;\n height: auto;\n display: block;\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n.mj-media-video-grid[_ngcontent-%COMP%]:not(.mj-media-video-grid--multi) .mj-media-video[_ngcontent-%COMP%] {\n height: 100%;\n min-height: 0;\n object-fit: contain;\n}\n\n\n\n.mj-media-busy[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.625rem;\n pointer-events: none;\n color: var(--mj-text-inverse);\n background: color-mix(in srgb, var(--mj-bg-overlay) 55%, transparent);\n}\n\n.mj-media-busy__spinner[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 3px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n border-top-color: var(--mj-text-inverse);\n animation: _ngcontent-%COMP%_mj-media-spin 0.8s linear infinite;\n}\n\n.mj-media-busy__label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n font-weight: 600;\n letter-spacing: 0.01em;\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n\n.mj-media-busy--static[_ngcontent-%COMP%] .mj-media-busy__spinner[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.4s ease-in-out infinite;\n border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-busy-pulse {\n 0%,\n 100% {\n opacity: 0.45;\n }\n 50% {\n opacity: 1;\n }\n}\n\n\n\n.mj-media-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n align-self: flex-start;\n min-height: 1rem;\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--mj-text-muted);\n}\n\n.mj-media-status--busy[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.mj-media-status__dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-brand-primary);\n animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.2s ease-in-out infinite;\n}\n\n\n\n.mj-media-transport[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.625rem 0.75rem 0.75rem;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.mj-media-scrubber-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n}\n\n.mj-media-time[_ngcontent-%COMP%] {\n font-variant-numeric: tabular-nums;\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n min-width: 3.25rem;\n}\n\n.mj-media-time--total[_ngcontent-%COMP%] {\n text-align: right;\n}\n\n.mj-media-scrubber[_ngcontent-%COMP%] {\n position: relative;\n flex: 1 1 auto;\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n touch-action: none;\n outline: none;\n}\n\n.mj-media-scrubber[_ngcontent-%COMP%]:focus-visible {\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-full, 999px);\n}\n\n.mj-media-scrubber__rail[_ngcontent-%COMP%] {\n position: relative;\n flex: 1 1 auto;\n height: 5px;\n background: var(--mj-border-strong);\n border-radius: var(--mj-radius-full, 999px);\n overflow: hidden;\n}\n\n.mj-media-scrubber__fill[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0 auto 0 0;\n background: var(--mj-brand-primary);\n}\n\n.mj-media-scrubber__handle[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n width: 13px;\n height: 13px;\n margin-left: -6.5px;\n transform: translateY(-50%);\n background: var(--mj-brand-primary);\n border: 2px solid var(--mj-bg-surface);\n border-radius: 50%;\n pointer-events: none;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mj-media-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.mj-media-controls__left[_ngcontent-%COMP%], \n.mj-media-controls__right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n\n.mj-media-btn[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n min-width: 32px;\n height: 32px;\n padding: 0 0.5rem;\n font-size: 0.875rem;\n color: var(--mj-text-primary);\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--mj-radius-sm, 4px);\n cursor: pointer;\n transition: background-color 0.12s ease, color 0.12s ease;\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:active {\n background: var(--mj-bg-surface-active);\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n background: var(--mj-brand-primary);\n min-width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%]:active {\n background: var(--mj-brand-primary-active);\n}\n\n\n.mj-media-btn--active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.mj-media-btn--active[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n.mj-media-btn__skip-label[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n font-variant-numeric: tabular-nums;\n}\n\n\n.mj-media-volume[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.mj-media-volume__slider[_ngcontent-%COMP%] {\n width: 80px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.mj-media-volume__slider[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n border-radius: var(--mj-radius-full, 999px);\n}\n\n\n.mj-media-rate[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.mj-media-rate__toggle[_ngcontent-%COMP%] {\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n}\n\n.mj-media-rate__menu[_ngcontent-%COMP%] {\n position: absolute;\n bottom: calc(100% + 4px);\n right: 0;\n z-index: 10;\n margin: 0;\n padding: 0.25rem;\n list-style: none;\n min-width: 4rem;\n background: var(--mj-bg-surface-elevated);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%] {\n display: block;\n width: 100%;\n text-align: left;\n padding: 0.375rem 0.625rem;\n font-size: 0.8125rem;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-radius: var(--mj-radius-sm, 4px);\n cursor: pointer;\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-rate__item--active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n\n\n.mj-media-transcript[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1px;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-subtle);\n max-height: 480px;\n width: 340px;\n flex: 0 0 auto;\n padding: 0.5rem;\n}\n\n\n\n\n\n\n.mj-media-player--bottom-transcript[_ngcontent-%COMP%] .mj-media-transcript[_ngcontent-%COMP%] {\n width: auto;\n border-left: none;\n border-top: 1px solid var(--mj-border-subtle);\n flex: 1 1 auto;\n min-height: 0;\n max-height: none;\n}\n\n.mj-media-cue[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.625rem;\n align-items: flex-start;\n width: 100%;\n text-align: left;\n padding: 0.5rem 0.625rem;\n background: transparent;\n border: none;\n border-left: 3px solid transparent;\n border-radius: var(--mj-radius-sm, 4px);\n cursor: pointer;\n color: var(--mj-text-primary);\n font: inherit;\n transition: background-color 0.12s ease;\n}\n\n.mj-media-cue[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-cue[_ngcontent-%COMP%]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-cue--active[_ngcontent-%COMP%] {\n border-left-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-media-cue__time[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n font-variant-numeric: tabular-nums;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n padding-top: 0.125rem;\n}\n\n.mj-media-cue__body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n min-width: 0;\n}\n\n.mj-media-cue__speaker[_ngcontent-%COMP%] {\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.mj-media-cue__text[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n line-height: 1.4;\n}\n\n\n\n\n.mj-media-waveform[_ngcontent-%COMP%]:not(.mj-media-waveform--static) .mj-media-waveform__bar[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-media-bar-in 0.25s ease both;\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-bar-in {\n from {\n transform: scaleY(0.15);\n opacity: 0.4;\n }\n to {\n transform: scaleY(1);\n opacity: 1;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mj-media-btn[_ngcontent-%COMP%], \n .mj-media-cue[_ngcontent-%COMP%], \n .mj-media-waveform__bar[_ngcontent-%COMP%], \n .mj-media-scrubber__fill[_ngcontent-%COMP%] {\n transition: none;\n animation: none;\n }\n\n \n .mj-media-busy__spinner[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.4s ease-in-out infinite;\n border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n }\n\n .mj-media-status__dot[_ngcontent-%COMP%] {\n animation: none;\n }\n}"], changeDetection: 0 });
|
|
1466
1466
|
}
|
|
1467
1467
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJMediaPlayerComponent, [{
|
|
1468
1468
|
type: Component,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-media-player",
|
|
3
|
-
"version": "6.1.0-edge.
|
|
3
|
+
"version": "6.1.0-edge.6",
|
|
4
4
|
"description": "World-class generic media (audio/video) player with transcript sync, plus an MJStorage-bound wrapper.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -11,20 +11,20 @@
|
|
|
11
11
|
"author": "",
|
|
12
12
|
"license": "BUSL-1.1",
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@angular/compiler": "21.
|
|
15
|
-
"@angular/compiler-cli": "21.
|
|
16
|
-
"@memberjunction/ng-test-utils": "6.1.0-edge.
|
|
14
|
+
"@angular/compiler": "21.2.22",
|
|
15
|
+
"@angular/compiler-cli": "21.2.22",
|
|
16
|
+
"@memberjunction/ng-test-utils": "6.1.0-edge.6",
|
|
17
17
|
"vitest": "^4.0.18"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@angular/common": "^21.
|
|
21
|
-
"@angular/core": "^21.
|
|
20
|
+
"@angular/common": "^21.2.22",
|
|
21
|
+
"@angular/core": "^21.2.22"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"tslib": "^2.8.1",
|
|
25
|
-
"@memberjunction/core": "6.1.0-edge.
|
|
26
|
-
"@memberjunction/graphql-dataprovider": "6.1.0-edge.
|
|
27
|
-
"@memberjunction/ng-base-types": "6.1.0-edge.
|
|
25
|
+
"@memberjunction/core": "6.1.0-edge.6",
|
|
26
|
+
"@memberjunction/graphql-dataprovider": "6.1.0-edge.6",
|
|
27
|
+
"@memberjunction/ng-base-types": "6.1.0-edge.6"
|
|
28
28
|
},
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"repository": {
|