@internetarchive/elements 0.2.14-webdev-9022.0 → 0.3.0
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.
- package/dist/src/elements/ia-audio-element/ia-audio-element.d.ts +72 -0
- package/dist/src/elements/ia-audio-element/ia-audio-element.d.ts.map +1 -0
- package/dist/src/elements/ia-audio-element/ia-audio-element.js +173 -0
- package/dist/src/elements/ia-audio-element/ia-audio-element.js.map +1 -0
- package/dist/src/elements/ia-audio-element/models.d.ts +13 -0
- package/dist/src/elements/ia-audio-element/models.d.ts.map +1 -0
- package/dist/src/elements/ia-audio-element/models.js.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/clear-results.d.ts +3 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/clear-results.d.ts.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/clear-results.js +28 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/clear-results.js.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/disclosure.d.ts +3 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/disclosure.d.ts.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/disclosure.js +26 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/disclosure.js.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/magnifying-glass.d.ts +3 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/magnifying-glass.d.ts.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/magnifying-glass.js +22 -0
- package/dist/src/elements/ia-expandable-search-bar/assets/magnifying-glass.js.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.d.ts +53 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.d.ts.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.js +352 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.js.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.d.ts +19 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.d.ts.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.js +115 -0
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.js.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/models.d.ts +13 -0
- package/dist/src/elements/ia-expandable-search-bar/models.d.ts.map +1 -0
- package/dist/src/elements/ia-expandable-search-bar/models.js +2 -0
- package/dist/src/elements/ia-expandable-search-bar/models.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/next-section.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/next-section.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/next-section.js +16 -0
- package/dist/src/elements/ia-playback-controls/assets/next-section.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/pause.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/pause.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/pause.js +17 -0
- package/dist/src/elements/ia-playback-controls/assets/pause.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/play.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/play.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/play.js +18 -0
- package/dist/src/elements/ia-playback-controls/assets/play.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/playback-speed.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/playback-speed.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/playback-speed.js +28 -0
- package/dist/src/elements/ia-playback-controls/assets/playback-speed.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/previous-section.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/previous-section.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/previous-section.js +16 -0
- package/dist/src/elements/ia-playback-controls/assets/previous-section.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/replay.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/replay.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/replay.js +28 -0
- package/dist/src/elements/ia-playback-controls/assets/replay.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/skip-ahead.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/skip-ahead.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/skip-ahead.js +29 -0
- package/dist/src/elements/ia-playback-controls/assets/skip-ahead.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-full.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-full.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-full.js +19 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-full.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-medium.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-medium.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-medium.js +24 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-medium.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-mute.d.ts +3 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-mute.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-mute.js +35 -0
- package/dist/src/elements/ia-playback-controls/assets/volume-mute.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts +66 -0
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js +337 -0
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/models.d.ts +13 -0
- package/dist/src/elements/ia-playback-controls/models.d.ts.map +1 -0
- package/dist/src/elements/ia-playback-controls/models.js +12 -0
- package/dist/src/elements/ia-playback-controls/models.js.map +1 -0
- package/dist/src/elements/ia-radio-player/assets/next-result.d.ts +3 -0
- package/dist/src/elements/ia-radio-player/assets/next-result.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/assets/next-result.js +27 -0
- package/dist/src/elements/ia-radio-player/assets/next-result.js.map +1 -0
- package/dist/src/elements/ia-radio-player/assets/previous-result.d.ts +3 -0
- package/dist/src/elements/ia-radio-player/assets/previous-result.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/assets/previous-result.js +27 -0
- package/dist/src/elements/ia-radio-player/assets/previous-result.js.map +1 -0
- package/dist/src/elements/ia-radio-player/ia-radio-player.d.ts +130 -0
- package/dist/src/elements/ia-radio-player/ia-radio-player.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/ia-radio-player.js +748 -0
- package/dist/src/elements/ia-radio-player/ia-radio-player.js.map +1 -0
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.d.ts +22 -0
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.js +137 -0
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.js.map +1 -0
- package/dist/src/elements/ia-radio-player/models.d.ts +29 -0
- package/dist/src/elements/ia-radio-player/models.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/models.js +2 -0
- package/dist/src/elements/ia-radio-player/models.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-backend.d.ts +38 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-backend.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-backend.js +64 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-backend.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-response.d.ts +94 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-response.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-response.js +56 -0
- package/dist/src/elements/ia-radio-player/search/backends/full-text-search-response.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/local-search-backend.d.ts +15 -0
- package/dist/src/elements/ia-radio-player/search/backends/local-search-backend.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/local-search-backend.js +26 -0
- package/dist/src/elements/ia-radio-player/search/backends/local-search-backend.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/search-backend.d.ts +12 -0
- package/dist/src/elements/ia-radio-player/search/backends/search-backend.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/backends/search-backend.js +2 -0
- package/dist/src/elements/ia-radio-player/search/backends/search-backend.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/models.d.ts +38 -0
- package/dist/src/elements/ia-radio-player/search/models.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/models.js +17 -0
- package/dist/src/elements/ia-radio-player/search/models.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/search-handler.d.ts +49 -0
- package/dist/src/elements/ia-radio-player/search/search-handler.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/search-handler.js +128 -0
- package/dist/src/elements/ia-radio-player/search/search-handler.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/search-helper.d.ts +9 -0
- package/dist/src/elements/ia-radio-player/search/search-helper.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/search-helper.js +15 -0
- package/dist/src/elements/ia-radio-player/search/search-helper.js.map +1 -0
- package/dist/src/elements/ia-radio-player/search/transcript-index.d.ts +45 -0
- package/dist/src/elements/ia-radio-player/search/transcript-index.d.ts.map +1 -0
- package/dist/src/elements/ia-radio-player/search/transcript-index.js +48 -0
- package/dist/src/elements/ia-radio-player/search/transcript-index.js.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/assets/next-section-marker.d.ts +3 -0
- package/dist/src/elements/ia-scrubber-bar/assets/next-section-marker.d.ts.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/assets/next-section-marker.js +18 -0
- package/dist/src/elements/ia-scrubber-bar/assets/next-section-marker.js.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/assets/previous-section-marker.d.ts +3 -0
- package/dist/src/elements/ia-scrubber-bar/assets/previous-section-marker.d.ts.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/assets/previous-section-marker.js +18 -0
- package/dist/src/elements/ia-scrubber-bar/assets/previous-section-marker.js.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts +82 -0
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.js +387 -0
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.js.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.d.ts +16 -0
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.d.ts.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.js +109 -0
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.js.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/models.d.ts +21 -0
- package/dist/src/elements/ia-scrubber-bar/models.d.ts.map +1 -0
- package/dist/src/elements/ia-scrubber-bar/models.js +20 -0
- package/dist/src/elements/ia-scrubber-bar/models.js.map +1 -0
- package/dist/src/elements/ia-transcript-view/duration-formatter.d.ts +13 -0
- package/dist/src/elements/ia-transcript-view/duration-formatter.d.ts.map +1 -0
- package/dist/src/elements/ia-transcript-view/duration-formatter.js +25 -0
- package/dist/src/elements/ia-transcript-view/duration-formatter.js.map +1 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.d.ts +25 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.d.ts.map +1 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.js +51 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.js.map +1 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts +87 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts.map +1 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js +565 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js.map +1 -0
- package/dist/src/elements/ia-transcript-view/models.d.ts +34 -0
- package/dist/src/elements/ia-transcript-view/models.d.ts.map +1 -0
- package/dist/src/elements/ia-transcript-view/models.js +38 -0
- package/dist/src/elements/ia-transcript-view/models.js.map +1 -0
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.d.ts +62 -0
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.d.ts.map +1 -0
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js +217 -0
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js.map +1 -0
- package/dist/src/elements/ia-waveform-progress/models.d.ts +13 -0
- package/dist/src/elements/ia-waveform-progress/models.d.ts.map +1 -0
- package/dist/src/elements/ia-waveform-progress/models.js +2 -0
- package/dist/src/elements/ia-waveform-progress/models.js.map +1 -0
- package/dist/src/elements/index.d.ts +27 -1
- package/dist/src/elements/index.d.ts.map +1 -1
- package/dist/src/elements/index.js +27 -1
- package/dist/src/elements/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts +0 -147
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts.map +0 -1
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.js +0 -533
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.js.map +0 -1
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts +0 -22
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts.map +0 -1
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.js +0 -145
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.js.map +0 -1
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.d.ts +0 -44
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.d.ts.map +0 -1
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js +0 -213
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js.map +0 -1
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts +0 -79
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts.map +0 -1
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js +0 -254
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js.map +0 -1
- package/dist/src/elements/ia-image-viewer/models.d.ts +0 -20
- package/dist/src/elements/ia-image-viewer/models.d.ts.map +0 -1
- package/dist/src/elements/ia-image-viewer/models.js.map +0 -1
- package/dist/src/util/prefers-reduced-motion.d.ts +0 -10
- package/dist/src/util/prefers-reduced-motion.d.ts.map +0 -1
- package/dist/src/util/prefers-reduced-motion.js +0 -12
- package/dist/src/util/prefers-reduced-motion.js.map +0 -1
- /package/dist/src/elements/{ia-image-viewer → ia-audio-element}/models.js +0 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { msg } from '@lit/localize';
|
|
2
|
+
/**
|
|
3
|
+
* One line of a transcript: a stretch of time and the words spoken in it.
|
|
4
|
+
*/
|
|
5
|
+
export class TranscriptEntryConfig {
|
|
6
|
+
constructor(id, start, end, rawText, isMusic, searchMatchIndex) {
|
|
7
|
+
this.id = id;
|
|
8
|
+
this.start = start;
|
|
9
|
+
this.end = end;
|
|
10
|
+
this.rawText = rawText;
|
|
11
|
+
this.isMusic = isMusic;
|
|
12
|
+
this.searchMatchIndex = searchMatchIndex;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* What to show for this entry.
|
|
16
|
+
*
|
|
17
|
+
* Music stretches carry no words worth reading, so they say so instead.
|
|
18
|
+
*/
|
|
19
|
+
get displayText() {
|
|
20
|
+
if (this.isMusic)
|
|
21
|
+
return msg('[Transcript unavailable]');
|
|
22
|
+
return this.rawText;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* A whole transcript, as an ordered list of entries.
|
|
27
|
+
*/
|
|
28
|
+
export class TranscriptConfig {
|
|
29
|
+
constructor(entries) {
|
|
30
|
+
this.entries = [];
|
|
31
|
+
this.entries = entries;
|
|
32
|
+
}
|
|
33
|
+
/** Just the entries that matched the current search. */
|
|
34
|
+
get searchResults() {
|
|
35
|
+
return this.entries.filter((entry) => entry.searchMatchIndex !== undefined);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=models.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/models.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC;;GAEG;AACH,MAAM,OAAO,qBAAqB;IAmBhC,YACE,EAAU,EACV,KAAa,EACb,GAAW,EACX,OAAe,EACf,OAAgB,EAChB,gBAAyB;QAEzB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAC3C,CAAC;IAED;;;;OAIG;IACH,IAAI,WAAW;QACb,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,CAAC,0BAA0B,CAAC,CAAC;QAEzD,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAG3B,YAAY,OAAgC;QAF5C,YAAO,GAA4B,EAAE,CAAC;QAGpC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,wDAAwD;IACxD,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC;IAC9E,CAAC;CACF","sourcesContent":["import { msg } from '@lit/localize';\n\n/**\n * One line of a transcript: a stretch of time and the words spoken in it.\n */\nexport class TranscriptEntryConfig {\n /** Identifies this entry within its transcript. */\n id: number;\n\n /** When the entry starts, in seconds into the track. */\n start: number;\n\n /** When the entry ends, in seconds into the track. */\n end: number;\n\n /** Whether this stretch is music rather than speech. */\n isMusic: boolean;\n\n /** Where this entry falls in the search results, if it is one. */\n searchMatchIndex?: number;\n\n /** The transcribed words. */\n rawText: string;\n\n constructor(\n id: number,\n start: number,\n end: number,\n rawText: string,\n isMusic: boolean,\n searchMatchIndex?: number,\n ) {\n this.id = id;\n this.start = start;\n this.end = end;\n this.rawText = rawText;\n this.isMusic = isMusic;\n this.searchMatchIndex = searchMatchIndex;\n }\n\n /**\n * What to show for this entry.\n *\n * Music stretches carry no words worth reading, so they say so instead.\n */\n get displayText(): string {\n if (this.isMusic) return msg('[Transcript unavailable]');\n\n return this.rawText;\n }\n}\n\n/**\n * A whole transcript, as an ordered list of entries.\n */\nexport class TranscriptConfig {\n entries: TranscriptEntryConfig[] = [];\n\n constructor(entries: TranscriptEntryConfig[]) {\n this.entries = entries;\n }\n\n /** Just the entries that matched the current search. */\n get searchResults(): TranscriptEntryConfig[] {\n return this.entries.filter((entry) => entry.searchMatchIndex !== undefined);\n }\n}\n"]}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { LitElement, type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import type { ZoneOfSilence } from './models.js';
|
|
3
|
+
/**
|
|
4
|
+
* Renders a waveform image with a progress fill over it, optionally marking
|
|
5
|
+
* out the stretches of silence.
|
|
6
|
+
*
|
|
7
|
+
* When `interactive` is set, dragging anywhere across the waveform scrubs, and
|
|
8
|
+
* the element emits `valuechange` with the new percentage.
|
|
9
|
+
*/
|
|
10
|
+
export declare class IAWaveformProgress extends LitElement {
|
|
11
|
+
/** How far through the track playback is, as a percentage (0 to 100) */
|
|
12
|
+
percentComplete: number;
|
|
13
|
+
/** URL of the waveform image to render */
|
|
14
|
+
waveformUrl: string;
|
|
15
|
+
/** Whether dragging across the waveform scrubs the track */
|
|
16
|
+
interactive: boolean;
|
|
17
|
+
/** Stretches of the track with no audio, to mark on the waveform */
|
|
18
|
+
zonesOfSilence: ZoneOfSilence[];
|
|
19
|
+
/**
|
|
20
|
+
* The percentage actually rendered.
|
|
21
|
+
*
|
|
22
|
+
* `percentComplete` is driven from outside by whatever is playing the audio,
|
|
23
|
+
* but while the listener is dragging, their position wins. Keeping the two
|
|
24
|
+
* apart is what lets the drag survive the playback updates arriving
|
|
25
|
+
* underneath it.
|
|
26
|
+
*/
|
|
27
|
+
private displayedPercent;
|
|
28
|
+
private userIsInteracting;
|
|
29
|
+
private container?;
|
|
30
|
+
render(): TemplateResult;
|
|
31
|
+
private get zonesOfSilenceTemplate();
|
|
32
|
+
private get interactionCoverTemplate();
|
|
33
|
+
updated(changedProperties: PropertyValues): void;
|
|
34
|
+
private drag;
|
|
35
|
+
/**
|
|
36
|
+
* Only the primary mouse button scrubs.
|
|
37
|
+
*
|
|
38
|
+
* A right-click would otherwise seek the track on its way to opening the
|
|
39
|
+
* context menu, and the menu swallows the `mouseup`, so the drag would stay
|
|
40
|
+
* latched on afterwards.
|
|
41
|
+
*/
|
|
42
|
+
private dragStart;
|
|
43
|
+
/**
|
|
44
|
+
* Ends the drag.
|
|
45
|
+
*
|
|
46
|
+
* Bound to `touchcancel` as well as `touchend`, because a touch taken over by
|
|
47
|
+
* the system (an incoming call, a browser gesture) never delivers `touchend`,
|
|
48
|
+
* and a drag left latched on would ignore playback updates from then on.
|
|
49
|
+
*/
|
|
50
|
+
private dragEnd;
|
|
51
|
+
private updateDisplayedPercent;
|
|
52
|
+
/**
|
|
53
|
+
* The horizontal page position of a pointer, from either flavour of event.
|
|
54
|
+
*
|
|
55
|
+
* A `TouchEvent` carries no `pageX` of its own, so the first touch supplies
|
|
56
|
+
* it. A `touchend` has no touches left to read, which is why this can come
|
|
57
|
+
* back undefined.
|
|
58
|
+
*/
|
|
59
|
+
private static pageXFrom;
|
|
60
|
+
static get styles(): CSSResultGroup;
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=ia-waveform-progress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-waveform-progress.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/ia-waveform-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAS9C;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,wEAAwE;IAC5C,eAAe,SAAK;IAEhD,0CAA0C;IACd,WAAW,SAAM;IAE7C,4DAA4D;IAC/B,WAAW,UAAS;IAEjD,oEAAoE;IACzC,cAAc,EAAE,aAAa,EAAE,CAAM;IAEhE;;;;;;;OAOG;IACM,OAAO,CAAC,gBAAgB,CAAK;IAEtC,OAAO,CAAC,iBAAiB,CAAS;IAEb,OAAO,CAAC,SAAS,CAAC,CAAqB;IAE5D,MAAM,IAAI,cAAc;IAWxB,OAAO,KAAK,sBAAsB,GAYjC;IAED,OAAO,KAAK,wBAAwB,GAcnC;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAQhD,OAAO,CAAC,IAAI;IAKZ;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IAOjB;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,sBAAsB;IAqB9B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,SAAS;IAKxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAsDlC;CACF"}
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
var IAWaveformProgress_1;
|
|
2
|
+
import { __decorate } from "tslib";
|
|
3
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
4
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
5
|
+
/**
|
|
6
|
+
* Event names emitted by this component
|
|
7
|
+
*/
|
|
8
|
+
const Events = {
|
|
9
|
+
ValueChange: 'valuechange',
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Renders a waveform image with a progress fill over it, optionally marking
|
|
13
|
+
* out the stretches of silence.
|
|
14
|
+
*
|
|
15
|
+
* When `interactive` is set, dragging anywhere across the waveform scrubs, and
|
|
16
|
+
* the element emits `valuechange` with the new percentage.
|
|
17
|
+
*/
|
|
18
|
+
let IAWaveformProgress = IAWaveformProgress_1 = class IAWaveformProgress extends LitElement {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments);
|
|
21
|
+
/** How far through the track playback is, as a percentage (0 to 100) */
|
|
22
|
+
this.percentComplete = 0;
|
|
23
|
+
/** URL of the waveform image to render */
|
|
24
|
+
this.waveformUrl = '';
|
|
25
|
+
/** Whether dragging across the waveform scrubs the track */
|
|
26
|
+
this.interactive = false;
|
|
27
|
+
/** Stretches of the track with no audio, to mark on the waveform */
|
|
28
|
+
this.zonesOfSilence = [];
|
|
29
|
+
/**
|
|
30
|
+
* The percentage actually rendered.
|
|
31
|
+
*
|
|
32
|
+
* `percentComplete` is driven from outside by whatever is playing the audio,
|
|
33
|
+
* but while the listener is dragging, their position wins. Keeping the two
|
|
34
|
+
* apart is what lets the drag survive the playback updates arriving
|
|
35
|
+
* underneath it.
|
|
36
|
+
*/
|
|
37
|
+
this.displayedPercent = 0;
|
|
38
|
+
this.userIsInteracting = false;
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
return html `
|
|
42
|
+
<div class="container">
|
|
43
|
+
<div id="fill" style="width: ${this.displayedPercent}%"></div>
|
|
44
|
+
<img class="waveform-image" src=${this.waveformUrl} alt="" />
|
|
45
|
+
${this.zonesOfSilenceTemplate}
|
|
46
|
+
${this.interactive ? this.interactionCoverTemplate : nothing}
|
|
47
|
+
</div>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
get zonesOfSilenceTemplate() {
|
|
51
|
+
return html `
|
|
52
|
+
${this.zonesOfSilence.map((zone) => html `
|
|
53
|
+
<div
|
|
54
|
+
class="zone-of-silence"
|
|
55
|
+
style="left: ${zone.startPercent}%; width: ${zone.endPercent -
|
|
56
|
+
zone.startPercent}%"
|
|
57
|
+
></div>
|
|
58
|
+
`)}
|
|
59
|
+
`;
|
|
60
|
+
}
|
|
61
|
+
get interactionCoverTemplate() {
|
|
62
|
+
return html `
|
|
63
|
+
<div
|
|
64
|
+
id="dragcover"
|
|
65
|
+
@mousedown=${this.dragStart}
|
|
66
|
+
@mouseup=${this.dragEnd}
|
|
67
|
+
@mouseleave=${this.dragEnd}
|
|
68
|
+
@mousemove=${this.drag}
|
|
69
|
+
@touchstart=${this.dragStart}
|
|
70
|
+
@touchend=${this.dragEnd}
|
|
71
|
+
@touchcancel=${this.dragEnd}
|
|
72
|
+
@touchmove=${this.drag}
|
|
73
|
+
></div>
|
|
74
|
+
`;
|
|
75
|
+
}
|
|
76
|
+
updated(changedProperties) {
|
|
77
|
+
if (!changedProperties.has('percentComplete') || this.userIsInteracting) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
this.displayedPercent = this.percentComplete;
|
|
81
|
+
}
|
|
82
|
+
drag(e) {
|
|
83
|
+
if (!this.userIsInteracting)
|
|
84
|
+
return;
|
|
85
|
+
this.updateDisplayedPercent(e);
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Only the primary mouse button scrubs.
|
|
89
|
+
*
|
|
90
|
+
* A right-click would otherwise seek the track on its way to opening the
|
|
91
|
+
* context menu, and the menu swallows the `mouseup`, so the drag would stay
|
|
92
|
+
* latched on afterwards.
|
|
93
|
+
*/
|
|
94
|
+
dragStart(e) {
|
|
95
|
+
if ('button' in e && e.button !== 0)
|
|
96
|
+
return;
|
|
97
|
+
this.userIsInteracting = true;
|
|
98
|
+
this.updateDisplayedPercent(e);
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Ends the drag.
|
|
102
|
+
*
|
|
103
|
+
* Bound to `touchcancel` as well as `touchend`, because a touch taken over by
|
|
104
|
+
* the system (an incoming call, a browser gesture) never delivers `touchend`,
|
|
105
|
+
* and a drag left latched on would ignore playback updates from then on.
|
|
106
|
+
*/
|
|
107
|
+
dragEnd() {
|
|
108
|
+
this.userIsInteracting = false;
|
|
109
|
+
}
|
|
110
|
+
updateDisplayedPercent(e) {
|
|
111
|
+
const pageX = IAWaveformProgress_1.pageXFrom(e);
|
|
112
|
+
if (pageX === undefined || !this.container)
|
|
113
|
+
return;
|
|
114
|
+
const bounds = this.container.getBoundingClientRect();
|
|
115
|
+
if (bounds.width === 0)
|
|
116
|
+
return;
|
|
117
|
+
// `pageX` is measured from the document origin, so the container's own
|
|
118
|
+
// viewport position has to be put back into document space before the two
|
|
119
|
+
// can be subtracted.
|
|
120
|
+
const offsetX = pageX - (bounds.left + window.scrollX);
|
|
121
|
+
const percent = (offsetX / bounds.width) * 100;
|
|
122
|
+
this.displayedPercent = Math.min(Math.max(percent, 0), 100);
|
|
123
|
+
this.dispatchEvent(new CustomEvent(Events.ValueChange, {
|
|
124
|
+
detail: { value: this.displayedPercent },
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* The horizontal page position of a pointer, from either flavour of event.
|
|
129
|
+
*
|
|
130
|
+
* A `TouchEvent` carries no `pageX` of its own, so the first touch supplies
|
|
131
|
+
* it. A `touchend` has no touches left to read, which is why this can come
|
|
132
|
+
* back undefined.
|
|
133
|
+
*/
|
|
134
|
+
static pageXFrom(e) {
|
|
135
|
+
if ('touches' in e)
|
|
136
|
+
return e.touches[0]?.pageX;
|
|
137
|
+
return e.pageX;
|
|
138
|
+
}
|
|
139
|
+
static get styles() {
|
|
140
|
+
return css `
|
|
141
|
+
:host {
|
|
142
|
+
--waveform-fill-color--: var(--ia-theme-waveform-fill-color, #3272b6);
|
|
143
|
+
--waveform-zone-of-silence-color--: var(
|
|
144
|
+
--ia-theme-waveform-zone-of-silence-color,
|
|
145
|
+
#f6e652
|
|
146
|
+
);
|
|
147
|
+
--waveform-side-margin--: var(--ia-theme-waveform-side-margin, 10px);
|
|
148
|
+
|
|
149
|
+
display: inline-block;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
#dragcover {
|
|
153
|
+
width: 100%;
|
|
154
|
+
height: 100%;
|
|
155
|
+
position: absolute;
|
|
156
|
+
touch-action: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.container {
|
|
160
|
+
display: block;
|
|
161
|
+
position: relative;
|
|
162
|
+
background-color: white;
|
|
163
|
+
height: 100%;
|
|
164
|
+
margin-left: var(--waveform-side-margin--);
|
|
165
|
+
margin-right: var(--waveform-side-margin--);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.waveform-image {
|
|
169
|
+
width: 100%;
|
|
170
|
+
height: 100%;
|
|
171
|
+
position: absolute;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.zone-of-silence {
|
|
175
|
+
position: absolute;
|
|
176
|
+
top: 0;
|
|
177
|
+
bottom: 0;
|
|
178
|
+
background: linear-gradient(
|
|
179
|
+
#000,
|
|
180
|
+
#000 47%,
|
|
181
|
+
var(--waveform-zone-of-silence-color--) 50%,
|
|
182
|
+
#000 53%,
|
|
183
|
+
#000 100%
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
#fill {
|
|
188
|
+
position: absolute;
|
|
189
|
+
height: 100%;
|
|
190
|
+
background-color: var(--waveform-fill-color--);
|
|
191
|
+
}
|
|
192
|
+
`;
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
__decorate([
|
|
196
|
+
property({ type: Number })
|
|
197
|
+
], IAWaveformProgress.prototype, "percentComplete", void 0);
|
|
198
|
+
__decorate([
|
|
199
|
+
property({ type: String })
|
|
200
|
+
], IAWaveformProgress.prototype, "waveformUrl", void 0);
|
|
201
|
+
__decorate([
|
|
202
|
+
property({ type: Boolean })
|
|
203
|
+
], IAWaveformProgress.prototype, "interactive", void 0);
|
|
204
|
+
__decorate([
|
|
205
|
+
property({ type: Array })
|
|
206
|
+
], IAWaveformProgress.prototype, "zonesOfSilence", void 0);
|
|
207
|
+
__decorate([
|
|
208
|
+
state()
|
|
209
|
+
], IAWaveformProgress.prototype, "displayedPercent", void 0);
|
|
210
|
+
__decorate([
|
|
211
|
+
query('.container')
|
|
212
|
+
], IAWaveformProgress.prototype, "container", void 0);
|
|
213
|
+
IAWaveformProgress = IAWaveformProgress_1 = __decorate([
|
|
214
|
+
customElement('ia-waveform-progress')
|
|
215
|
+
], IAWaveformProgress);
|
|
216
|
+
export { IAWaveformProgress };
|
|
217
|
+
//# sourceMappingURL=ia-waveform-progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-waveform-progress.js","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/ia-waveform-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type CSSResultGroup,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\n\nimport type { ZoneOfSilence } from './models';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n ValueChange: 'valuechange',\n};\n\n/**\n * Renders a waveform image with a progress fill over it, optionally marking\n * out the stretches of silence.\n *\n * When `interactive` is set, dragging anywhere across the waveform scrubs, and\n * the element emits `valuechange` with the new percentage.\n */\n@customElement('ia-waveform-progress')\nexport class IAWaveformProgress extends LitElement {\n /** How far through the track playback is, as a percentage (0 to 100) */\n @property({ type: Number }) percentComplete = 0;\n\n /** URL of the waveform image to render */\n @property({ type: String }) waveformUrl = '';\n\n /** Whether dragging across the waveform scrubs the track */\n @property({ type: Boolean }) interactive = false;\n\n /** Stretches of the track with no audio, to mark on the waveform */\n @property({ type: Array }) zonesOfSilence: ZoneOfSilence[] = [];\n\n /**\n * The percentage actually rendered.\n *\n * `percentComplete` is driven from outside by whatever is playing the audio,\n * but while the listener is dragging, their position wins. Keeping the two\n * apart is what lets the drag survive the playback updates arriving\n * underneath it.\n */\n @state() private displayedPercent = 0;\n\n private userIsInteracting = false;\n\n @query('.container') private container?: HTMLElement | null;\n\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div id=\"fill\" style=\"width: ${this.displayedPercent}%\"></div>\n <img class=\"waveform-image\" src=${this.waveformUrl} alt=\"\" />\n ${this.zonesOfSilenceTemplate}\n ${this.interactive ? this.interactionCoverTemplate : nothing}\n </div>\n `;\n }\n\n private get zonesOfSilenceTemplate(): TemplateResult {\n return html`\n ${this.zonesOfSilence.map(\n (zone) => html`\n <div\n class=\"zone-of-silence\"\n style=\"left: ${zone.startPercent}%; width: ${zone.endPercent -\n zone.startPercent}%\"\n ></div>\n `,\n )}\n `;\n }\n\n private get interactionCoverTemplate(): TemplateResult {\n return html`\n <div\n id=\"dragcover\"\n @mousedown=${this.dragStart}\n @mouseup=${this.dragEnd}\n @mouseleave=${this.dragEnd}\n @mousemove=${this.drag}\n @touchstart=${this.dragStart}\n @touchend=${this.dragEnd}\n @touchcancel=${this.dragEnd}\n @touchmove=${this.drag}\n ></div>\n `;\n }\n\n updated(changedProperties: PropertyValues): void {\n if (!changedProperties.has('percentComplete') || this.userIsInteracting) {\n return;\n }\n\n this.displayedPercent = this.percentComplete;\n }\n\n private drag(e: MouseEvent | TouchEvent): void {\n if (!this.userIsInteracting) return;\n this.updateDisplayedPercent(e);\n }\n\n /**\n * Only the primary mouse button scrubs.\n *\n * A right-click would otherwise seek the track on its way to opening the\n * context menu, and the menu swallows the `mouseup`, so the drag would stay\n * latched on afterwards.\n */\n private dragStart(e: MouseEvent | TouchEvent): void {\n if ('button' in e && e.button !== 0) return;\n\n this.userIsInteracting = true;\n this.updateDisplayedPercent(e);\n }\n\n /**\n * Ends the drag.\n *\n * Bound to `touchcancel` as well as `touchend`, because a touch taken over by\n * the system (an incoming call, a browser gesture) never delivers `touchend`,\n * and a drag left latched on would ignore playback updates from then on.\n */\n private dragEnd(): void {\n this.userIsInteracting = false;\n }\n\n private updateDisplayedPercent(e: MouseEvent | TouchEvent): void {\n const pageX = IAWaveformProgress.pageXFrom(e);\n if (pageX === undefined || !this.container) return;\n\n const bounds = this.container.getBoundingClientRect();\n if (bounds.width === 0) return;\n\n // `pageX` is measured from the document origin, so the container's own\n // viewport position has to be put back into document space before the two\n // can be subtracted.\n const offsetX = pageX - (bounds.left + window.scrollX);\n const percent = (offsetX / bounds.width) * 100;\n\n this.displayedPercent = Math.min(Math.max(percent, 0), 100);\n this.dispatchEvent(\n new CustomEvent<{ value: number }>(Events.ValueChange, {\n detail: { value: this.displayedPercent },\n }),\n );\n }\n\n /**\n * The horizontal page position of a pointer, from either flavour of event.\n *\n * A `TouchEvent` carries no `pageX` of its own, so the first touch supplies\n * it. A `touchend` has no touches left to read, which is why this can come\n * back undefined.\n */\n private static pageXFrom(e: MouseEvent | TouchEvent): number | undefined {\n if ('touches' in e) return e.touches[0]?.pageX;\n return e.pageX;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --waveform-fill-color--: var(--ia-theme-waveform-fill-color, #3272b6);\n --waveform-zone-of-silence-color--: var(\n --ia-theme-waveform-zone-of-silence-color,\n #f6e652\n );\n --waveform-side-margin--: var(--ia-theme-waveform-side-margin, 10px);\n\n display: inline-block;\n }\n\n #dragcover {\n width: 100%;\n height: 100%;\n position: absolute;\n touch-action: none;\n }\n\n .container {\n display: block;\n position: relative;\n background-color: white;\n height: 100%;\n margin-left: var(--waveform-side-margin--);\n margin-right: var(--waveform-side-margin--);\n }\n\n .waveform-image {\n width: 100%;\n height: 100%;\n position: absolute;\n }\n\n .zone-of-silence {\n position: absolute;\n top: 0;\n bottom: 0;\n background: linear-gradient(\n #000,\n #000 47%,\n var(--waveform-zone-of-silence-color--) 50%,\n #000 53%,\n #000 100%\n );\n }\n\n #fill {\n position: absolute;\n height: 100%;\n background-color: var(--waveform-fill-color--);\n }\n `;\n }\n}\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A stretch of the waveform with no audio in it, marked out so listeners can
|
|
3
|
+
* see where the quiet parts are before they get there.
|
|
4
|
+
*
|
|
5
|
+
* Both bounds are percentages of the whole track, not seconds.
|
|
6
|
+
*/
|
|
7
|
+
export interface ZoneOfSilence {
|
|
8
|
+
/** Where the zone begins, as a percentage of the track (0 to 100). */
|
|
9
|
+
startPercent: number;
|
|
10
|
+
/** Where the zone ends, as a percentage of the track (0 to 100). */
|
|
11
|
+
endPercent: number;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=models.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/models.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;IAErB,oEAAoE;IACpE,UAAU,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/models.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * A stretch of the waveform with no audio in it, marked out so listeners can\n * see where the quiet parts are before they get there.\n *\n * Both bounds are percentages of the whole track, not seconds.\n */\nexport interface ZoneOfSilence {\n /** Where the zone begins, as a percentage of the track (0 to 100). */\n startPercent: number;\n\n /** Where the zone ends, as a percentage of the track (0 to 100). */\n endPercent: number;\n}\n"]}
|
|
@@ -1,9 +1,35 @@
|
|
|
1
|
+
export * from './ia-audio-element/ia-audio-element.js';
|
|
2
|
+
export * from './ia-audio-element/models.js';
|
|
1
3
|
export * from './ia-button/ia-button.js';
|
|
2
4
|
export * from './ia-combo-box/ia-combo-box.js';
|
|
3
5
|
export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
|
|
4
|
-
export * from './ia-
|
|
6
|
+
export * from './ia-expandable-search-bar/ia-expandable-search-bar.js';
|
|
7
|
+
export * from './ia-expandable-search-bar/ia-quick-search.js';
|
|
8
|
+
export * from './ia-expandable-search-bar/models.js';
|
|
5
9
|
export * from './ia-item-navigator/ia-item-navigator.js';
|
|
6
10
|
export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
|
|
7
11
|
export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
|
|
8
12
|
export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
|
|
13
|
+
export * from './ia-playback-controls/ia-playback-controls.js';
|
|
14
|
+
export * from './ia-playback-controls/models.js';
|
|
15
|
+
export * from './ia-radio-player/ia-radio-player.js';
|
|
16
|
+
export * from './ia-radio-player/ia-search-results-switcher.js';
|
|
17
|
+
export * from './ia-radio-player/models.js';
|
|
18
|
+
export * from './ia-radio-player/search/backends/full-text-search-backend.js';
|
|
19
|
+
export * from './ia-radio-player/search/backends/full-text-search-response.js';
|
|
20
|
+
export * from './ia-radio-player/search/backends/local-search-backend.js';
|
|
21
|
+
export * from './ia-radio-player/search/backends/search-backend.js';
|
|
22
|
+
export * from './ia-radio-player/search/models.js';
|
|
23
|
+
export * from './ia-radio-player/search/search-handler.js';
|
|
24
|
+
export * from './ia-radio-player/search/search-helper.js';
|
|
25
|
+
export * from './ia-radio-player/search/transcript-index.js';
|
|
26
|
+
export * from './ia-scrubber-bar/ia-scrubber-bar.js';
|
|
27
|
+
export * from './ia-scrubber-bar/ia-section-marker.js';
|
|
28
|
+
export * from './ia-scrubber-bar/models.js';
|
|
29
|
+
export * from './ia-transcript-view/duration-formatter.js';
|
|
30
|
+
export * from './ia-transcript-view/ia-transcript-entry.js';
|
|
31
|
+
export * from './ia-transcript-view/ia-transcript-view.js';
|
|
32
|
+
export * from './ia-transcript-view/models.js';
|
|
33
|
+
export * from './ia-waveform-progress/ia-waveform-progress.js';
|
|
34
|
+
export * from './ia-waveform-progress/models.js';
|
|
9
35
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC"}
|
|
@@ -1,9 +1,35 @@
|
|
|
1
|
+
export * from './ia-audio-element/ia-audio-element.js';
|
|
2
|
+
export * from './ia-audio-element/models.js';
|
|
1
3
|
export * from './ia-button/ia-button.js';
|
|
2
4
|
export * from './ia-combo-box/ia-combo-box.js';
|
|
3
5
|
export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
|
|
4
|
-
export * from './ia-
|
|
6
|
+
export * from './ia-expandable-search-bar/ia-expandable-search-bar.js';
|
|
7
|
+
export * from './ia-expandable-search-bar/ia-quick-search.js';
|
|
8
|
+
export * from './ia-expandable-search-bar/models.js';
|
|
5
9
|
export * from './ia-item-navigator/ia-item-navigator.js';
|
|
6
10
|
export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
|
|
7
11
|
export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
|
|
8
12
|
export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
|
|
13
|
+
export * from './ia-playback-controls/ia-playback-controls.js';
|
|
14
|
+
export * from './ia-playback-controls/models.js';
|
|
15
|
+
export * from './ia-radio-player/ia-radio-player.js';
|
|
16
|
+
export * from './ia-radio-player/ia-search-results-switcher.js';
|
|
17
|
+
export * from './ia-radio-player/models.js';
|
|
18
|
+
export * from './ia-radio-player/search/backends/full-text-search-backend.js';
|
|
19
|
+
export * from './ia-radio-player/search/backends/full-text-search-response.js';
|
|
20
|
+
export * from './ia-radio-player/search/backends/local-search-backend.js';
|
|
21
|
+
export * from './ia-radio-player/search/backends/search-backend.js';
|
|
22
|
+
export * from './ia-radio-player/search/models.js';
|
|
23
|
+
export * from './ia-radio-player/search/search-handler.js';
|
|
24
|
+
export * from './ia-radio-player/search/search-helper.js';
|
|
25
|
+
export * from './ia-radio-player/search/transcript-index.js';
|
|
26
|
+
export * from './ia-scrubber-bar/ia-scrubber-bar.js';
|
|
27
|
+
export * from './ia-scrubber-bar/ia-section-marker.js';
|
|
28
|
+
export * from './ia-scrubber-bar/models.js';
|
|
29
|
+
export * from './ia-transcript-view/duration-formatter.js';
|
|
30
|
+
export * from './ia-transcript-view/ia-transcript-entry.js';
|
|
31
|
+
export * from './ia-transcript-view/ia-transcript-view.js';
|
|
32
|
+
export * from './ia-transcript-view/models.js';
|
|
33
|
+
export * from './ia-waveform-progress/ia-waveform-progress.js';
|
|
34
|
+
export * from './ia-waveform-progress/models.js';
|
|
9
35
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './ia-audio-element/ia-audio-element';\nexport * from './ia-audio-element/models';\nexport * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-expandable-search-bar/ia-expandable-search-bar';\nexport * from './ia-expandable-search-bar/ia-quick-search';\nexport * from './ia-expandable-search-bar/models';\nexport * from './ia-item-navigator/ia-item-navigator';\nexport * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel';\nexport * from './ia-item-navigator/menus/ia-itemnav-sort-files-button';\nexport * from './ia-item-navigator/menus/ia-itemnav-share-panel';\nexport * from './ia-playback-controls/ia-playback-controls';\nexport * from './ia-playback-controls/models';\nexport * from './ia-radio-player/ia-radio-player';\nexport * from './ia-radio-player/ia-search-results-switcher';\nexport * from './ia-radio-player/models';\nexport * from './ia-radio-player/search/backends/full-text-search-backend';\nexport * from './ia-radio-player/search/backends/full-text-search-response';\nexport * from './ia-radio-player/search/backends/local-search-backend';\nexport * from './ia-radio-player/search/backends/search-backend';\nexport * from './ia-radio-player/search/models';\nexport * from './ia-radio-player/search/search-handler';\nexport * from './ia-radio-player/search/search-helper';\nexport * from './ia-radio-player/search/transcript-index';\nexport * from './ia-scrubber-bar/ia-scrubber-bar';\nexport * from './ia-scrubber-bar/ia-section-marker';\nexport * from './ia-scrubber-bar/models';\nexport * from './ia-transcript-view/duration-formatter';\nexport * from './ia-transcript-view/ia-transcript-entry';\nexport * from './ia-transcript-view/ia-transcript-view';\nexport * from './ia-transcript-view/models';\nexport * from './ia-waveform-progress/ia-waveform-progress';\nexport * from './ia-waveform-progress/models';\n"]}
|
package/package.json
CHANGED
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import { type CSSResultGroup, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
-
import type { ImageViewerImage, SlideDirection } from './models.js';
|
|
3
|
-
import './ia-imgview-slide.js';
|
|
4
|
-
import './ia-imgview-controls.js';
|
|
5
|
-
/**
|
|
6
|
-
* A swipeable image carousel.
|
|
7
|
-
*
|
|
8
|
-
* Shows one image at a time from a list, with previous/next buttons, a
|
|
9
|
-
* counter, keyboard arrows, horizontal wheel scrolling and touch swipes.
|
|
10
|
-
* Clicking an image opens it in a new tab.
|
|
11
|
-
*
|
|
12
|
-
* The viewer holds no opinion about where the images came from: it takes a
|
|
13
|
-
* plain list of names and URLs, and reports the image it lands on through
|
|
14
|
-
* `imageChanged` so a host can mirror that into its own URL or analytics.
|
|
15
|
-
*
|
|
16
|
-
* @fires imageChanged - The viewer settled on a new image.
|
|
17
|
-
* @fires imageLoaded - An image the viewer showed finished loading.
|
|
18
|
-
* @fires imageLoadFailed - An image the viewer showed could not be loaded.
|
|
19
|
-
* Fires once per image until it loads successfully or the set changes.
|
|
20
|
-
* @fires imageActivated - An image was clicked. Cancelable: preventing it
|
|
21
|
-
* stops the default of opening the image in a new tab.
|
|
22
|
-
*/
|
|
23
|
-
export declare class IAImageViewer extends LitElement {
|
|
24
|
-
images: ImageViewerImage[];
|
|
25
|
-
/**
|
|
26
|
-
* Name of the image to show. Changing it jumps straight to that image
|
|
27
|
-
* without animating. An unknown name shows the first image.
|
|
28
|
-
*/
|
|
29
|
-
currentImageName?: string;
|
|
30
|
-
/** Read by the gesture controller, which tracks touches against it. */
|
|
31
|
-
imageArea?: HTMLElement;
|
|
32
|
-
/** Read by the gesture controller, which translates it during a drag. */
|
|
33
|
-
slideTrack?: HTMLElement;
|
|
34
|
-
/** Read by the gesture controller to navigate relative to the current image. */
|
|
35
|
-
currentIndex: number;
|
|
36
|
-
private animating;
|
|
37
|
-
/**
|
|
38
|
-
* Incremented when an animation is interrupted to force the track element to
|
|
39
|
-
* be recreated via the `keyed()` directive, which guarantees the CSS
|
|
40
|
-
* animation restarts even if the direction is the same.
|
|
41
|
-
*/
|
|
42
|
-
private slideGeneration;
|
|
43
|
-
/** Which edge just wrapped, if any. Drives the glow indicator. */
|
|
44
|
-
private wrapEdge;
|
|
45
|
-
/**
|
|
46
|
-
* Images already reported as failed, so a broken image isn't counted again
|
|
47
|
-
* every time the viewer passes over it. Navigating back re-fires `error` on
|
|
48
|
-
* the recreated element, and the neighbouring slides staged during an
|
|
49
|
-
* animation or a drag load the same image too, so without this a single
|
|
50
|
-
* broken derivative reports several times a session.
|
|
51
|
-
*
|
|
52
|
-
* Cleared when the image set changes, which is the point a name stops
|
|
53
|
-
* standing for the same file.
|
|
54
|
-
*/
|
|
55
|
-
private reportedFailures;
|
|
56
|
-
private slideTarget;
|
|
57
|
-
private slideDirection;
|
|
58
|
-
private gestures;
|
|
59
|
-
get imageCount(): number;
|
|
60
|
-
/** The image currently on screen, if there is one. */
|
|
61
|
-
get currentImage(): ImageViewerImage | undefined;
|
|
62
|
-
protected willUpdate(changed: PropertyValues): void;
|
|
63
|
-
/**
|
|
64
|
-
* Where to land when the images or the requested name change.
|
|
65
|
-
*
|
|
66
|
-
* A new `currentImageName` is the host asking for a particular image, so it
|
|
67
|
-
* wins. A new `images` array on its own isn't: a host that builds its list
|
|
68
|
-
* in a getter hands over a fresh array on every render, which says nothing
|
|
69
|
-
* about the images having changed. So the viewer holds its place by name and
|
|
70
|
-
* only goes back to the start when the image it was showing is really gone.
|
|
71
|
-
*/
|
|
72
|
-
private indexToShow;
|
|
73
|
-
render(): TemplateResult | typeof nothing;
|
|
74
|
-
private slideTemplate;
|
|
75
|
-
/**
|
|
76
|
-
* Announces the image to a screen reader, which otherwise gets nothing when
|
|
77
|
-
* the counter and the picture change under it.
|
|
78
|
-
*/
|
|
79
|
-
private get announcementTemplate();
|
|
80
|
-
/**
|
|
81
|
-
* Passes a slide's load result on to the host, which is where reporting
|
|
82
|
-
* belongs. The slide's own events stop at this shadow root, so they're
|
|
83
|
-
* re-dispatched rather than allowed to escape.
|
|
84
|
-
*/
|
|
85
|
-
private onImageLoaded;
|
|
86
|
-
private onImageFailed;
|
|
87
|
-
/**
|
|
88
|
-
* Decides whether a click on a slide opens the image.
|
|
89
|
-
*
|
|
90
|
-
* Two things can stop it: the click is the tail end of a swipe, or the host
|
|
91
|
-
* cancels the event to show the image its own way. The slide's event doesn't
|
|
92
|
-
* cross this shadow root, so it's re-raised here for the host to see, and a
|
|
93
|
-
* veto is passed back down to cancel the click.
|
|
94
|
-
*/
|
|
95
|
-
private onImageActivated;
|
|
96
|
-
/**
|
|
97
|
-
* Inserts the neighbouring slides around the current one so the touch target
|
|
98
|
-
* element stays in the DOM (avoiding touchcancel). These aren't rendered
|
|
99
|
-
* from the template, so they're marked for the gesture controller to clean
|
|
100
|
-
* up. The dragging class shifts the track to centre on the middle slide.
|
|
101
|
-
*/
|
|
102
|
-
insertDragSlides(): void;
|
|
103
|
-
removeDragSlides(): void;
|
|
104
|
-
private createDragSlide;
|
|
105
|
-
showNext(): void;
|
|
106
|
-
showPrevious(): void;
|
|
107
|
-
/**
|
|
108
|
-
* Starts the move to another image. With reduced motion there's no animation
|
|
109
|
-
* to wait on, so the move lands immediately: nothing would fire the
|
|
110
|
-
* `animationend` that otherwise commits it.
|
|
111
|
-
*/
|
|
112
|
-
private moveTo;
|
|
113
|
-
/**
|
|
114
|
-
* Moves to the image a completed drag landed on. The drag has already
|
|
115
|
-
* animated the track there, so this only updates state.
|
|
116
|
-
*/
|
|
117
|
-
commitDrag(direction: SlideDirection): void;
|
|
118
|
-
/**
|
|
119
|
-
* If an animation is in progress, immediately commit its target so the next
|
|
120
|
-
* animation starts from the right position. Bumps the generation key to
|
|
121
|
-
* force the track element to be recreated, which restarts the CSS animation.
|
|
122
|
-
*/
|
|
123
|
-
settleIfAnimating(): void;
|
|
124
|
-
private onWrapGlowEnd;
|
|
125
|
-
private onSlideEnd;
|
|
126
|
-
/** Finishes a move, however it was driven. */
|
|
127
|
-
private settleAtCurrentIndex;
|
|
128
|
-
private emitImageChanged;
|
|
129
|
-
/**
|
|
130
|
-
* Preloads the next and previous images around `currentIndex` so the first
|
|
131
|
-
* navigation feels instant.
|
|
132
|
-
*/
|
|
133
|
-
private preloadAdjacentImages;
|
|
134
|
-
/**
|
|
135
|
-
* Preloads images adjacent to the given index. Called both at rest (around
|
|
136
|
-
* `currentIndex`) and at the start of a move (around the target) so rapid
|
|
137
|
-
* navigation stays ahead of the browser cache.
|
|
138
|
-
*
|
|
139
|
-
* A preload that fails is deliberately not reported. These requests are
|
|
140
|
-
* speculative and the viewer may never show them, so counting them would
|
|
141
|
-
* inflate the failure rate with images nobody looked at. Navigating to a
|
|
142
|
-
* broken image renders a real slide, whose `error` reports it then.
|
|
143
|
-
*/
|
|
144
|
-
preloadAroundIndex(index: number): void;
|
|
145
|
-
static get styles(): CSSResultGroup;
|
|
146
|
-
}
|
|
147
|
-
//# sourceMappingURL=ia-image-viewer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ia-image-viewer.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAY,MAAM,UAAU,CAAC;AAE3E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAChB,MAAM,EAAE,gBAAgB,EAAE,CAAM;IAE3D;;;OAGG;IACyB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,uEAAuE;IACjD,SAAS,CAAC,EAAE,WAAW,CAAC;IAE9C,yEAAyE;IAClD,UAAU,CAAC,EAAE,WAAW,CAAC;IAEhD,gFAAgF;IACvE,YAAY,SAAK;IAEjB,OAAO,CAAC,SAAS,CAAS;IAEnC;;;;OAIG;IACM,OAAO,CAAC,eAAe,CAAK;IAErC,kEAAkE;IACzD,OAAO,CAAC,QAAQ,CAAyB;IAElD;;;;;;;;;OASG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,QAAQ,CAAiC;IAEjD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,sDAAsD;IACtD,IAAI,YAAY,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAyBnB,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IA6EzC,OAAO,CAAC,aAAa;IAIrB;;;OAGG;IACH,OAAO,KAAK,oBAAoB,GAW/B;IAED;;;;OAIG;IACH,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;IASrB;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAcxB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI;IAgBxB,gBAAgB,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IASvB,QAAQ,IAAI,IAAI;IAKhB,YAAY,IAAI,IAAI;IAQpB;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAmBd;;;OAGG;IACH,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI;IAc3C;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,UAAU;IAMlB,8CAA8C;IAC9C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;;;;;;;;OASG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUvC,MAAM,KAAK,MAAM,IAAI,cAAc,CAgJlC;CACF"}
|