import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'; import { DiscoveryEvent } from '../../base/elements'; import { VdsEvent } from '../../base/events'; import { ElementLogger } from '../../base/logger'; export declare const SCRUBBER_PREVIEW_ELEMENT_TAG_NAME = "vds-scrubber-preview"; /** * Fired when the scrubber preview element connects to the DOM. * * @event * @bubbles * @composed */ export declare type ScrubberPreviewConnectEvent = DiscoveryEvent; /** * Plugs in to the `` component to enable media previews. A preview is essentially * a sneak peek of a certain time the user is interacting with on the time slider. You might * be familiar with this on YouTube when hovering over the scrubber, and seeing a square preview * above the timeline displaying an frame/image of the video at that hovered time. * * This element renders a track for the preview element to run along. There's a track fill * element that will fill the track up to the part of the track being interacted with. You can * turn this off by setting the `noTrackFill` property or `no-track-fill` attribute. * * 💡 See the `` element if you'd like to include preview timestamps. * 💡 See the `` element if you'd like to include low-res video previews. * * ## Previews * * You can pass in a preview to be shown while the user is interacting (hover/drag) with the * scrubber by passing an element into the default `slot`. * * You need to do the following on your root preview element: * * - Expect that your root preview element will be positioned absolutely. * - Set the `bottom` CSS property on it to adjust it to the desired position above the slider. * - Create CSS styles for when it has a hidden attribute (`.preview[hidden] {}`). * * The Scrubber will automatically do the following to the root preview element passed in: * * - Set the `position` to `absolute`. * - Set a `hidden` attribute when it should be hidden (it's left to you to hide it with CSS). * - Update the `translateX()` CSS property to position the preview accordingly. * * ### How do I get the current preview time? * * You can either listen to `vds-scrubber-preview-time-update` event on this component, or you can * use the `scrubberPreviewContext`. * * For styling you have access to the `--vds-scrubber-preview-time` CSS property which contains * the current time in seconds the user is previewing. There's also the `--vds-media-duration` * property if needed. * * @tagname vds-scrubber-preview * @cssprop --vds-scrubber-preview-track-height - The height of the preview track (defaults to `--vds-slider-track-height`). * @cssprop --vds-scrubber-preview-track-fill-bg - The background color of the track fill (defaults to `#212121`). * @csspart track - The element that acts as a path that the preview travels along. * @csspart track-fill - The element that fills the track up to the point being previewed. * @slot Used to pass in the element that will be displayed on preview. * @slot track - Used to pass content into the track element. * @slot track-fill - Used to pass content into the track fill element. * @example * ```html * * *
* * * ``` * @example * ```css * .preview { * bottom: 24px; * opacity: 1; * transition: opacity 0.2s ease-in; * } * * .preview[hidden] { * display: block; * opacity: 0; * } * ``` */ export declare class ScrubberPreviewElement extends LitElement { static get styles(): CSSResultGroup; static get parts(): string[]; protected readonly _logger: ElementLogger; /** @internal */ readonly ctx: import("../../base/context").ContextProviderRecord<{ time: import("../../base/context").Context; showing: import("../../base/context").Context; }>; /** * Whether the preview is hidden. */ hidden: boolean; /** * Whether the preview is disabled. */ disabled: boolean; /** * Whether the preview track fill should be NOT be rendered. */ noTrackFill: boolean; /** * Whether the preview passed in should NOT be clamped to the host element edges. */ noClamp: boolean; protected _mediaDuration: number; protected _isDragging: boolean; protected _isInteracting: boolean; connectedCallback(): void; protected update(changedProperties: PropertyValues): void; protected render(): TemplateResult; protected readonly _trackRef: import("lit-html/directives/ref").Ref; /** * Returns the underlying track element (`
`). */ get trackElement(): HTMLDivElement | undefined; protected _renderTrack(): TemplateResult; protected _renderTrackSlot(): TemplateResult; protected readonly _trackFillRef: import("lit-html/directives/ref").Ref; /** * Returns the underlying track fill element (`
`). This will be `undefined` if the * `noTrackFill` property or `no-track-fill` attribute is `true`. */ get trackFillElement(): HTMLDivElement | undefined; protected _renderTrackFill(): TemplateResult; protected _renderTrackFillSlot(): TemplateResult; protected _previewSlotElement: HTMLElement | undefined; /** * The element passed in to the `preview` slot. */ get previewSlotElement(): HTMLElement | undefined; /** * Whether the current slotted preview element is hidden. */ get isPreviewHidden(): boolean; protected _renderPreviewSlot(): TemplateResult; protected _handlePreviewSlotChange(): void; protected _showPreviewTimeout: number | undefined; /** * Show the slotted preview element. * * @param event Original event that triggered this action (if any). */ showPreview(event?: Event): void; /** * Hide the slotted preview element. * * @param event - Original event that triggered this action (if any). */ hidePreview(event?: Event): Promise; protected readonly _dispatchPreviewTimeUpdate: import("../../utils/timing").RafThrottledFunction<(originalEvent: Event) => void>; protected _updatePreviewTime(time: number, event: Event): void; /** * @param thumbPosition - `pointerEvent.clientX` */ protected _calcPercentageOfTrackAtThumbPosition(thumbPosition: number): number; /** * @param percentage - the percentage of the track to position the preview at. */ protected _calcPreviewXPosition(percentage: number): number; protected _previewPositionRafId: number; /** * Updates the slotted preview element position given a `PointerEvent`, or `VdsCustomEvent` with * an `originalEvent` property referencing a `PointerEvent`. * * @param event */ updatePreviewPosition(event: PointerEvent | VdsEvent): Promise; }