@nylas/web-elements 0.0.0-test-20250321141510 → 0.0.0-test-20250327161320
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/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +10 -11
- package/dist/cjs/calendar-agenda-fill-icon_36.cjs.entry.js +6 -9
- package/dist/cjs/calendar-agenda-fill-icon_36.cjs.entry.js.map +1 -1
- package/dist/cjs/google-logo-icon_6.cjs.entry.js +5 -5
- package/dist/cjs/google-logo-icon_6.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-scheduling.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-transcript.cjs.entry.js +4 -4
- package/dist/cjs/nylas-transcript.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-video-player.cjs.entry.js +2 -2
- package/dist/cjs/nylas-video-player.cjs.entry.js.map +1 -1
- package/dist/cjs/scheduler-store-461fd2ff.js.map +1 -1
- package/dist/collection/components/nylas-notebook/nylas-transcript/nylas-transcript.css +5 -0
- package/dist/collection/components/nylas-notebook/nylas-transcript/nylas-transcript.js +3 -3
- package/dist/collection/components/nylas-notebook/nylas-transcript/nylas-transcript.js.map +1 -1
- package/dist/collection/components/nylas-notebook/nylas-video-player/nylas-video-player.css +0 -3
- package/dist/collection/components/nylas-notebook/nylas-video-player/nylas-video-player.js +1 -1
- package/dist/collection/components/nylas-notebook/nylas-video-player/nylas-video-player.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js +1 -1
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.js +3 -5
- package/dist/collection/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs-group/nylas-editor-tabs-group.js +5 -5
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs-group/nylas-editor-tabs-group.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration-with-config-2.spec.js +58 -0
- package/dist/collection/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration-with-config-2.spec.js.map +1 -0
- package/dist/collection/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration-with-config.spec.js +0 -32
- package/dist/collection/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration-with-config.spec.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.js +3 -4
- package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/test/nylas-participants-custom-availability.spec.js +12 -0
- package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/test/nylas-participants-custom-availability.spec.js.map +1 -1
- package/dist/collection/types/index.js.map +1 -1
- package/dist/components/nylas-booking-form-config2.js +3 -5
- package/dist/components/nylas-booking-form-config2.js.map +1 -1
- package/dist/components/nylas-editor-tabs-group2.js +5 -5
- package/dist/components/nylas-editor-tabs-group2.js.map +1 -1
- package/dist/components/nylas-participants-custom-availability2.js +3 -4
- package/dist/components/nylas-participants-custom-availability2.js.map +1 -1
- package/dist/components/nylas-scheduling.js.map +1 -1
- package/dist/components/nylas-transcript.js +4 -4
- package/dist/components/nylas-transcript.js.map +1 -1
- package/dist/components/nylas-video-player.js +2 -2
- package/dist/components/nylas-video-player.js.map +1 -1
- package/dist/components/scheduler-store.js.map +1 -1
- package/dist/esm/calendar-agenda-fill-icon_36.entry.js +6 -9
- package/dist/esm/calendar-agenda-fill-icon_36.entry.js.map +1 -1
- package/dist/esm/google-logo-icon_6.entry.js +5 -5
- package/dist/esm/google-logo-icon_6.entry.js.map +1 -1
- package/dist/esm/nylas-scheduling.entry.js.map +1 -1
- package/dist/esm/nylas-transcript.entry.js +4 -4
- package/dist/esm/nylas-transcript.entry.js.map +1 -1
- package/dist/esm/nylas-video-player.entry.js +2 -2
- package/dist/esm/nylas-video-player.entry.js.map +1 -1
- package/dist/esm/scheduler-store-755ced0b.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/p-4b48f29a.entry.js.map +1 -1
- package/dist/nylas-web-elements/{p-f12cd991.entry.js → p-7fcdad32.entry.js} +2 -2
- package/dist/nylas-web-elements/p-7fcdad32.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-b1c57792.entry.js → p-c3f848d7.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-b1c57792.entry.js.map → p-c3f848d7.entry.js.map} +1 -1
- package/dist/nylas-web-elements/p-d1053aa8.entry.js +2 -0
- package/dist/nylas-web-elements/p-d1053aa8.entry.js.map +1 -0
- package/dist/nylas-web-elements/p-d36ad6ef.js.map +1 -1
- package/dist/nylas-web-elements/{p-11d7062d.entry.js → p-f4881c71.entry.js} +2 -2
- package/dist/nylas-web-elements/p-f4881c71.entry.js.map +1 -0
- package/package.json +3 -3
- package/dist/nylas-web-elements/p-11d7062d.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-3d93df74.entry.js +0 -2
- package/dist/nylas-web-elements/p-3d93df74.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-f12cd991.entry.js.map +0 -1
|
@@ -59,7 +59,7 @@ function Toolbar({ transcripts }) {
|
|
|
59
59
|
h("button", { class: "clear", onClick: handleClearSearch }, "Done")))));
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
const nylasTranscriptCss = ":host{--background:white;--font-family:\"Inter\", sans-serif;--border-radius:8px}.nylas-transcript{background-color:var(--background);border-radius:var(--border-radius);border:1px solid #e0e6f9;font-size:14px;font-family:var(--font-family);font-optical-sizing:auto}.nylas-transcript .toolbar{padding:20px 20px}.nylas-transcript .toolbar input,.nylas-transcript .toolbar select{border:1px solid #4169e1;padding:10px 20px;border-radius:6px;width:100%}.nylas-transcript .toolbar button.clear{background:none;border:none;cursor:pointer;font-size:14px;font-family:var(--font-family)}.nylas-transcript .toolbar .controls{display:flex;align-items:center;justify-content:stretch;gap:6px}.nylas-transcript .toolbar .controls button{font-family:var(--font-family);cursor:pointer;background-color:white;border:1px solid #c7dbf9;border-radius:8px;padding-top:12px;padding-bottom:12px;flex-grow:1;letter-spacing:-4%;display:flex;align-items:center;justify-content:center}.nylas-transcript .toolbar .controls button svg{margin-right:6px}.nylas-transcript .toolbar .controls button:active{background-color:#f0f4f9}.nylas-transcript .toolbar .search,.nylas-transcript .toolbar .language{display:flex;align-items:center;justify-content:space-between;gap:20px}.nylas-transcript .language button.regenerate{width:93px;border-radius:8px;padding:12px 8px;text-align:center;outline:0;border:none;background-color:#4169e1;color:white}.nylas-transcript .transcripts{max-height:50vh;overflow-y:auto;border-top:1px solid #ebeff6}.nylas-transcript .transcripts .transcripts-item{padding:16px 18px;gap:20px;display:flex;line-height:24px;border-bottom:1px solid #ebeff6;transition:0.5s background-color ease-in-out;font-size:14px}.nylas-transcript .transcripts .transcripts-item .highlight{background-color:yellow}.nylas-transcript .transcripts .transcripts-item .copy-btn{fill:#4b4b4b;cursor:pointer;width:24px;transition:0.3s transform ease-in-out}.nylas-transcript .transcripts .transcripts-item .copy-btn:active{fill:#9747ff;transform:scale(2)}.nylas-transcript .transcripts .transcripts-item .speaker{font-weight:500;font-size:16px;margin-bottom:0.5rem}.nylas-transcript .transcripts .transcripts-item.active{background-color:#ebeff6}.nylas-transcript .transcripts .transcripts-item .time{color:#9747ff;font-weight:600;min-width:60px}";
|
|
62
|
+
const nylasTranscriptCss = ":host{--background:white;--font-family:\"Inter\", sans-serif;--border-radius:8px}.nylas-transcript{background-color:var(--background);border-radius:var(--border-radius);border:1px solid #e0e6f9;font-size:14px;font-family:var(--font-family);font-optical-sizing:auto}.nylas-transcript .toolbar{padding:20px 20px}.nylas-transcript .toolbar input,.nylas-transcript .toolbar select{border:1px solid #4169e1;padding:10px 20px;border-radius:6px;width:100%}.nylas-transcript .toolbar button.clear{background:none;border:none;cursor:pointer;font-size:14px;font-family:var(--font-family)}.nylas-transcript .toolbar .controls{display:flex;align-items:center;justify-content:stretch;gap:6px}.nylas-transcript .toolbar .controls button{font-family:var(--font-family);cursor:pointer;background-color:white;border:1px solid #c7dbf9;border-radius:8px;padding-top:12px;padding-bottom:12px;flex-grow:1;letter-spacing:-4%;display:flex;align-items:center;justify-content:center}.nylas-transcript .toolbar .controls button svg{margin-right:6px}.nylas-transcript .toolbar .controls button:active{background-color:#f0f4f9}.nylas-transcript .toolbar .search,.nylas-transcript .toolbar .language{display:flex;align-items:center;justify-content:space-between;gap:20px}.nylas-transcript .language button.regenerate{width:93px;border-radius:8px;padding:12px 8px;text-align:center;outline:0;border:none;background-color:#4169e1;color:white}.nylas-transcript .transcripts{max-height:50vh;overflow-y:auto;border-top:1px solid #ebeff6}.nylas-transcript .transcripts .no-results{padding:20px;text-align:center;color:rgba(0, 0, 0, 0.6)}.nylas-transcript .transcripts .transcripts-item{padding:16px 18px;gap:20px;display:flex;line-height:24px;border-bottom:1px solid #ebeff6;transition:0.5s background-color ease-in-out;font-size:14px}.nylas-transcript .transcripts .transcripts-item .highlight{background-color:yellow}.nylas-transcript .transcripts .transcripts-item .copy-btn{fill:#4b4b4b;cursor:pointer;width:24px;transition:0.3s transform ease-in-out}.nylas-transcript .transcripts .transcripts-item .copy-btn:active{fill:#9747ff;transform:scale(2)}.nylas-transcript .transcripts .transcripts-item .speaker{font-weight:500;font-size:16px;margin-bottom:0.5rem}.nylas-transcript .transcripts .transcripts-item.active{background-color:#ebeff6}.nylas-transcript .transcripts .transcripts-item .time{color:#9747ff;font-weight:600;min-width:60px}";
|
|
63
63
|
const NylasTranscriptStyle0 = nylasTranscriptCss;
|
|
64
64
|
|
|
65
65
|
dayjs.extend(utc);
|
|
@@ -98,7 +98,7 @@ const NylasTranscript$1 = proxyCustomElement(class NylasTranscript extends HTMLE
|
|
|
98
98
|
let res = this.transcript.map((item, index) => ({
|
|
99
99
|
...item,
|
|
100
100
|
active: index === candidateIndex,
|
|
101
|
-
ts: this.secondsToStr(item.start),
|
|
101
|
+
ts: item.start ? this.secondsToStr(item.start) : null,
|
|
102
102
|
}));
|
|
103
103
|
if (searchTerm) {
|
|
104
104
|
res = res.filter(x => x.text.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -117,11 +117,11 @@ const NylasTranscript$1 = proxyCustomElement(class NylasTranscript extends HTMLE
|
|
|
117
117
|
navigator.clipboard.writeText(`${item.ts} ${item.speaker}: ${item.text}`);
|
|
118
118
|
}
|
|
119
119
|
render() {
|
|
120
|
-
return (h("div", { key: '
|
|
120
|
+
return (h("div", { key: '690629131ffa02c83db097568bcb9d983934a52d', class: "nylas-transcript" }, h(Toolbar, { key: 'e259b18c6f56c48881b305e87540ccf8752299ad', transcripts: this.transcripts }), h("div", { key: 'e9fd658295e29bf38877e3bf30c324710e732b8a', class: "transcripts", ref: el => (this.transcriptContainer = el) }, !this.transcripts.length && h("div", { class: "no-results" }, "Transcript not available."), this.transcripts.map((item, idx) => {
|
|
121
121
|
return (h("div", { class: {
|
|
122
122
|
'transcripts-item': true,
|
|
123
123
|
'active': item.active,
|
|
124
|
-
}, onPointerEnter: () => (this.focusedIndex = idx), onPointerLeave: () => (this.focusedIndex = -1) }, h("div", { class: "time" }, this.focusedIndex === idx ? (h("span", { onClick: () => this.handleCopy(item) }, h(CopyIcon, { className: "copy-btn" }))) : (item.ts)), h("div", { class: "message" }, h("div", { class: "speaker" }, item.speaker), h(Text, { text: item.text, highlight: transcriptStore.get('searchTerm') }))));
|
|
124
|
+
}, onPointerEnter: () => (this.focusedIndex = idx), onPointerLeave: () => (this.focusedIndex = -1) }, item.ts && (h("div", { class: "time" }, this.focusedIndex === idx ? (h("span", { onClick: () => this.handleCopy(item) }, h(CopyIcon, { className: "copy-btn" }))) : (item.ts))), h("div", { class: "message" }, h("div", { class: "speaker" }, item.speaker), h(Text, { text: item.text, highlight: transcriptStore.get('searchTerm') }))));
|
|
125
125
|
}))));
|
|
126
126
|
}
|
|
127
127
|
get el() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-transcript.js","mappings":"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","names":["NylasTranscript","store"],"sources":["src/components/nylas-notebook/store/transcript-store.ts","src/components/nylas-notebook/icons.tsx","src/components/nylas-notebook/nylas-transcript/transcript-toolbar.tsx","src/components/nylas-notebook/nylas-transcript/nylas-transcript.scss?tag=nylas-transcript&encapsulation=shadow","src/components/nylas-notebook/nylas-transcript/nylas-transcript.tsx"],"sourcesContent":["import { createStore } from '@stencil/store';\n\nconst styleSheet = new CSSStyleSheet();\nstyleSheet.replaceSync(`\n :host {\n font-family: Arial, sans-serif;\n }\n`);\n\n// Map each key to its respective type\nexport interface TranscriptStore {\n toolbarState: 'default' | 'search' | 'language';\n style?: CSSStyleSheet;\n searchTerm: string;\n}\n\n// nylas-video-player store\nexport const transcriptStore = createStore<TranscriptStore>({\n style: styleSheet,\n toolbarState: 'default',\n searchTerm: '',\n});\n","import { FunctionalComponent, h } from '@stencil/core';\n\ninterface IconProps {\n width?: string | number;\n height?: string | number;\n className?: string;\n fill?: string;\n stroke?: string;\n}\n\nexport const SearchIcon: FunctionalComponent<IconProps> = ({ width, height, fill }) => (\n <svg viewBox=\"0 0 16 16\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.30887 10.016C8.53903 10.6318 7.56252 11 6.5 11C4.01472 11 2 8.98531 2 6.50002C2 4.01473 4.01472 2 6.5 2C8.98528 2 11 4.01473 11 6.50002C11 7.56252 10.6318 8.53901 10.016 9.30885L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.6583 14.0488 13.3417 14.0488 13.1464 13.8536L9.30887 10.016ZM10 6.50002C10 4.56701 8.433 3 6.5 3C4.567 3 3 4.56701 3 6.50002C3 8.43302 4.567 10 6.5 10C8.433 10 10 8.43302 10 6.50002Z\"\n fill={fill}\n />\n </svg>\n);\n\nexport const CopyIcon: FunctionalComponent<IconProps> = ({ width, height, fill, className }) => (\n <svg width={width} height={height} class={className} viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.00029 4.08525L4 10.5C4 11.8255 5.03154 12.91 6.33562 12.9947L6.5 13L10.9144 13.0007C10.7083 13.5829 10.1528 14 9.5 14H6C4.34315 14 3 12.6569 3 11V5.5C3 4.84678 3.41754 4.29109 4.00029 4.08525ZM11.5 2C12.3284 2 13 2.67157 13 3.5V10.5C13 11.3284 12.3284 12 11.5 12H6.5C5.67157 12 5 11.3284 5 10.5V3.5C5 2.67157 5.67157 2 6.5 2H11.5ZM11.5 3H6.5C6.22386 3 6 3.22386 6 3.5V10.5C6 10.7761 6.22386 11 6.5 11H11.5C11.7761 11 12 10.7761 12 10.5V3.5C12 3.22386 11.7761 3 11.5 3Z\"\n fill={fill}\n />\n </svg>\n);\nexport const LangIcon: FunctionalComponent<IconProps> = ({ width, height, fill }) => (\n <svg width={width} height={height} viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 3C8.37372 3 8.87543 3.35608 9.31258 4.31781C9.4073 4.52619 9.49448 4.75446 9.57265 5H6.42735C6.50552 4.75446 6.5927 4.52619 6.68742 4.31781C7.12457 3.35608 7.62628 3 8 3ZM5.77705 3.90401C5.62614 4.23601 5.49428 4.6038 5.38411 5H3.99963C4.52341 4.30269 5.22525 3.74677 6.03766 3.39978C5.94287 3.56117 5.85596 3.7304 5.77705 3.90401ZM5.16299 6C5.05694 6.6275 5 7.30146 5 8C5 8.69854 5.05694 9.3725 5.16299 10H3.41604C3.14845 9.38754 3 8.7111 3 8C3 7.2889 3.14845 6.61246 3.41604 6H5.16299ZM5.38411 11C5.49428 11.3962 5.62614 11.764 5.77705 12.096C5.85596 12.2696 5.94287 12.4388 6.03766 12.6002C5.22525 12.2532 4.52341 11.6973 3.99963 11H5.38411ZM6.42735 11H9.57265C9.49448 11.2455 9.4073 11.4738 9.31258 11.6822C8.87543 12.6439 8.37372 13 8 13C7.62628 13 7.12457 12.6439 6.68742 11.6822C6.5927 11.4738 6.50552 11.2455 6.42735 11ZM9.82134 10H6.17866C6.06438 9.3892 6 8.71396 6 8C6 7.28604 6.06438 6.6108 6.17866 6H9.82134C9.93562 6.6108 10 7.28604 10 8C10 8.71396 9.93562 9.3892 9.82134 10ZM10.6159 11H12.0004C11.4766 11.6973 10.7747 12.2532 9.96234 12.6002C10.0571 12.4388 10.144 12.2696 10.2229 12.096C10.3739 11.764 10.5057 11.3962 10.6159 11ZM12.584 10H10.837C10.9431 9.3725 11 8.69854 11 8C11 7.30146 10.9431 6.6275 10.837 6H12.584C12.8516 6.61246 13 7.2889 13 8C13 8.7111 12.8516 9.38754 12.584 10ZM9.96234 3.39978C10.7747 3.74677 11.4766 4.30269 12.0004 5H10.6159C10.5057 4.6038 10.3739 4.23601 10.2229 3.90401C10.144 3.7304 10.0571 3.56117 9.96234 3.39978Z\"\n fill={fill}\n />\n </svg>\n);\n\nexport const EditIcon: FunctionalComponent<IconProps> = ({ width, height, fill }) => (\n <svg width={width} height={height} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.6569 2.3436C14.4379 3.12465 14.4379 4.39098 13.6569 5.17203L6.27044 12.5585C5.95004 12.8789 5.54859 13.1062 5.10901 13.2161L2.81801 13.7888C2.45182 13.8804 2.12013 13.5487 2.21167 13.1825L2.78442 10.8915C2.89432 10.4519 3.12161 10.0505 3.44201 9.73006L10.8285 2.3436C11.6095 1.56255 12.8759 1.56255 13.6569 2.3436ZM10.1213 4.46481L4.14912 10.4372C3.95688 10.6294 3.8205 10.8703 3.75457 11.134L3.38393 12.6166L4.86648 12.2459C5.13022 12.18 5.37109 12.0436 5.56333 11.8514L11.5353 5.87881L10.1213 4.46481ZM11.5356 3.05071L10.8283 3.75781L12.2423 5.17181L12.9498 4.46492C13.3403 4.07439 13.3403 3.44123 12.9498 3.05071C12.5593 2.66018 11.9261 2.66018 11.5356 3.05071Z\"\n fill={fill}\n />\n </svg>\n);\n","import { h } from '@stencil/core';\nimport { transcriptStore, TranscriptStore } from './../store/transcript-store';\nimport { SearchIcon, CopyIcon, LangIcon } from '../icons';\n\nconst get = transcriptStore.get;\nconst set = transcriptStore.set;\nconst is = <K extends keyof TranscriptStore>(a: K, b: TranscriptStore[K]) => get(a) === b;\n\nexport default function Toolbar({ transcripts }) {\n const handleClearSearch = () => {\n set('searchTerm', '');\n set('toolbarState', 'default');\n };\n\n const handleCopy = async () => {\n const clipboardItemData = {\n 'text/plain': transcripts.map(t => `${t.ts} ${t.speaker}: ${t.text}`).join('\\n'),\n };\n const clipboardItem = new ClipboardItem(clipboardItemData);\n await navigator.clipboard.write([clipboardItem]);\n };\n\n return (\n <div class=\"toolbar\">\n {/* Default State */}\n {is('toolbarState', 'default') && (\n <div class=\"controls\">\n <button onClick={() => set('toolbarState', 'search')}>\n <SearchIcon height={16} fill=\"#2C2C2C\" />\n Search\n </button>\n\n <button onClick={handleCopy}>\n <CopyIcon height={16} fill=\"#2C2C2C\" />\n Copy\n </button>\n\n <button onClick={() => set('toolbarState', 'language')}>\n <LangIcon height={16} fill=\"#2C2C2C\" />\n Language\n </button>\n </div>\n )}\n {/* Search */}\n {is('toolbarState', 'search') && (\n <div class=\"search\">\n <input\n type=\"text\"\n value={get('searchTerm')}\n onInput={e => set('searchTerm', (e.target as HTMLInputElement).value)}\n onKeyDown={e => e.key === 'Escape' && handleClearSearch()}\n placeholder=\"Search transcript\"\n autoFocus\n />\n <button class=\"clear\" onClick={handleClearSearch}>\n Cancel\n </button>\n </div>\n )}\n {/* Language */}\n {is('toolbarState', 'language') && (\n <div class=\"language\">\n <select>\n <option value=\"en\">English</option>\n <option value=\"fr\">French</option>\n </select>\n <button class=\"regenerate\">Regenerate</button>\n <button class=\"clear\" onClick={handleClearSearch}>\n Done\n </button>\n </div>\n )}\n </div>\n );\n}\n",":host {\n --background: white;\n --font-family: 'Inter', sans-serif;\n --border-radius: 8px;\n}\n\n.nylas-transcript {\n background-color: var(--background);\n border-radius: var(--border-radius);\n border: 1px solid #e0e6f9;\n font-size: 14px;\n font-family: var(--font-family);\n font-optical-sizing: auto;\n\n .toolbar {\n padding: 20px 20px;\n\n input,\n select {\n border: 1px solid #4169e1;\n padding: 10px 20px;\n border-radius: 6px;\n width: 100%;\n }\n\n button.clear {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 14px;\n font-family: var(--font-family);\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: stretch;\n gap: 6px;\n\n button {\n font-family: var(--font-family);\n cursor: pointer;\n background-color: white;\n border: 1px solid #c7dbf9;\n border-radius: 8px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n letter-spacing: -4%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n margin-right: 6px;\n }\n\n &:active {\n background-color: #f0f4f9;\n }\n }\n }\n\n .search,\n .language {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n }\n }\n\n .language {\n button.regenerate {\n width: 93px;\n border-radius: 8px;\n padding: 12px 8px;\n text-align: center;\n outline: 0;\n border: none;\n background-color: #4169e1;\n color: white;\n }\n }\n\n .transcripts {\n max-height: 50vh;\n overflow-y: auto;\n border-top: 1px solid #ebeff6;\n\n .transcripts-item {\n padding: 16px 18px;\n gap: 20px;\n display: flex;\n line-height: 24px;\n border-bottom: 1px solid #ebeff6;\n transition: 0.5s background-color ease-in-out;\n font-size: 14px;\n\n .highlight {\n background-color: yellow;\n }\n\n .copy-btn {\n fill: #4b4b4b;\n cursor: pointer;\n width: 24px;\n transition: 0.3s transform ease-in-out;\n\n &:active {\n fill: #9747ff;\n transform: scale(2);\n }\n }\n\n .speaker {\n font-weight: 500;\n font-size: 16px;\n margin-bottom: 0.5rem;\n }\n\n &.active {\n background-color: #ebeff6;\n }\n\n .time {\n color: #9747ff;\n font-weight: 600;\n min-width: 60px;\n }\n }\n }\n}\n","import { Component, h, Element, Prop, State } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport { videoStore as store } from '../store/notebook-store';\nimport Toolbar from './transcript-toolbar';\nimport { transcriptStore } from '../store/transcript-store';\nimport { CopyIcon } from '../icons';\n\ndayjs.extend(utc); // needed as utc is a separate plugin\n\nconst Text = ({ text, highlight }) => {\n if (highlight) {\n text = text.replace(new RegExp(highlight, 'gi'), `<span class=\"highlight\">${highlight}</span>`);\n }\n return <div innerHTML={text}></div>;\n};\n\n@Component({\n tag: 'nylas-transcript',\n styleUrl: 'nylas-transcript.scss',\n shadow: true,\n})\nexport class NylasTranscript {\n @Element() el!: HTMLElement;\n transcriptContainer!: HTMLDivElement;\n @State() focusedIndex: number = -1;\n\n @Prop() autoscroll: boolean = true;\n @Prop() transcript!: any;\n\n componentDidLoad() {\n transcriptStore.onChange('style', val => {\n console.log('Style change', val);\n if (this.el.shadowRoot && val) {\n this.el.shadowRoot.adoptedStyleSheets = [val];\n }\n });\n }\n\n get transcripts() {\n const time = store.get('videoTime');\n const searchTerm = transcriptStore.get('searchTerm');\n if (!this.transcript) return [];\n const candidateIndex = this.transcript.findIndex(item => item.start / 1000 >= time) - 1;\n // Scroll to proper video time\n if (candidateIndex >= 0 && this.autoscroll) {\n this.transcriptContainer.querySelector('.active')?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n // TODO: map different providers\n let res = this.transcript.map((item, index) => ({\n ...item,\n active: index === candidateIndex,\n ts: this.secondsToStr(item.start),\n }));\n if (searchTerm) {\n res = res.filter(x => x.text.toLowerCase().includes(searchTerm.toLowerCase()));\n }\n return res;\n }\n\n secondsToStr(milliseconds: number) {\n if (milliseconds < 3600000) {\n return dayjs.utc(milliseconds).format('mm:ss');\n } else {\n return dayjs.utc(milliseconds).format('HH:mm:ss');\n }\n }\n\n private handleCopy(item) {\n navigator.clipboard.writeText(`${item.ts} ${item.speaker}: ${item.text}`);\n }\n\n render() {\n return (\n <div class=\"nylas-transcript\">\n {/* <Tabs /> */}\n <Toolbar transcripts={this.transcripts} />\n <div class=\"transcripts\" ref={el => (this.transcriptContainer = el as HTMLDivElement)}>\n {this.transcripts.map((item, idx) => {\n return (\n <div\n class={{\n 'transcripts-item': true,\n 'active': item.active,\n }}\n onPointerEnter={() => (this.focusedIndex = idx)}\n onPointerLeave={() => (this.focusedIndex = -1)}\n >\n <div class=\"time\">\n {this.focusedIndex === idx ? (\n <span onClick={() => this.handleCopy(item)}>\n <CopyIcon className=\"copy-btn\" />\n </span>\n ) : (\n item.ts\n )}\n </div>\n {/* Message Part */}\n <div class=\"message\">\n <div class=\"speaker\">{item.speaker}</div>\n <Text text={item.text} highlight={transcriptStore.get('searchTerm')} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nylas-transcript.js","mappings":"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","names":["NylasTranscript","store"],"sources":["src/components/nylas-notebook/store/transcript-store.ts","src/components/nylas-notebook/icons.tsx","src/components/nylas-notebook/nylas-transcript/transcript-toolbar.tsx","src/components/nylas-notebook/nylas-transcript/nylas-transcript.scss?tag=nylas-transcript&encapsulation=shadow","src/components/nylas-notebook/nylas-transcript/nylas-transcript.tsx"],"sourcesContent":["import { createStore } from '@stencil/store';\n\nconst styleSheet = new CSSStyleSheet();\nstyleSheet.replaceSync(`\n :host {\n font-family: Arial, sans-serif;\n }\n`);\n\n// Map each key to its respective type\nexport interface TranscriptStore {\n toolbarState: 'default' | 'search' | 'language';\n style?: CSSStyleSheet;\n searchTerm: string;\n}\n\n// nylas-video-player store\nexport const transcriptStore = createStore<TranscriptStore>({\n style: styleSheet,\n toolbarState: 'default',\n searchTerm: '',\n});\n","import { FunctionalComponent, h } from '@stencil/core';\n\ninterface IconProps {\n width?: string | number;\n height?: string | number;\n className?: string;\n fill?: string;\n stroke?: string;\n}\n\nexport const SearchIcon: FunctionalComponent<IconProps> = ({ width, height, fill }) => (\n <svg viewBox=\"0 0 16 16\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.30887 10.016C8.53903 10.6318 7.56252 11 6.5 11C4.01472 11 2 8.98531 2 6.50002C2 4.01473 4.01472 2 6.5 2C8.98528 2 11 4.01473 11 6.50002C11 7.56252 10.6318 8.53901 10.016 9.30885L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.6583 14.0488 13.3417 14.0488 13.1464 13.8536L9.30887 10.016ZM10 6.50002C10 4.56701 8.433 3 6.5 3C4.567 3 3 4.56701 3 6.50002C3 8.43302 4.567 10 6.5 10C8.433 10 10 8.43302 10 6.50002Z\"\n fill={fill}\n />\n </svg>\n);\n\nexport const CopyIcon: FunctionalComponent<IconProps> = ({ width, height, fill, className }) => (\n <svg width={width} height={height} class={className} viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.00029 4.08525L4 10.5C4 11.8255 5.03154 12.91 6.33562 12.9947L6.5 13L10.9144 13.0007C10.7083 13.5829 10.1528 14 9.5 14H6C4.34315 14 3 12.6569 3 11V5.5C3 4.84678 3.41754 4.29109 4.00029 4.08525ZM11.5 2C12.3284 2 13 2.67157 13 3.5V10.5C13 11.3284 12.3284 12 11.5 12H6.5C5.67157 12 5 11.3284 5 10.5V3.5C5 2.67157 5.67157 2 6.5 2H11.5ZM11.5 3H6.5C6.22386 3 6 3.22386 6 3.5V10.5C6 10.7761 6.22386 11 6.5 11H11.5C11.7761 11 12 10.7761 12 10.5V3.5C12 3.22386 11.7761 3 11.5 3Z\"\n fill={fill}\n />\n </svg>\n);\nexport const LangIcon: FunctionalComponent<IconProps> = ({ width, height, fill }) => (\n <svg width={width} height={height} viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 3C8.37372 3 8.87543 3.35608 9.31258 4.31781C9.4073 4.52619 9.49448 4.75446 9.57265 5H6.42735C6.50552 4.75446 6.5927 4.52619 6.68742 4.31781C7.12457 3.35608 7.62628 3 8 3ZM5.77705 3.90401C5.62614 4.23601 5.49428 4.6038 5.38411 5H3.99963C4.52341 4.30269 5.22525 3.74677 6.03766 3.39978C5.94287 3.56117 5.85596 3.7304 5.77705 3.90401ZM5.16299 6C5.05694 6.6275 5 7.30146 5 8C5 8.69854 5.05694 9.3725 5.16299 10H3.41604C3.14845 9.38754 3 8.7111 3 8C3 7.2889 3.14845 6.61246 3.41604 6H5.16299ZM5.38411 11C5.49428 11.3962 5.62614 11.764 5.77705 12.096C5.85596 12.2696 5.94287 12.4388 6.03766 12.6002C5.22525 12.2532 4.52341 11.6973 3.99963 11H5.38411ZM6.42735 11H9.57265C9.49448 11.2455 9.4073 11.4738 9.31258 11.6822C8.87543 12.6439 8.37372 13 8 13C7.62628 13 7.12457 12.6439 6.68742 11.6822C6.5927 11.4738 6.50552 11.2455 6.42735 11ZM9.82134 10H6.17866C6.06438 9.3892 6 8.71396 6 8C6 7.28604 6.06438 6.6108 6.17866 6H9.82134C9.93562 6.6108 10 7.28604 10 8C10 8.71396 9.93562 9.3892 9.82134 10ZM10.6159 11H12.0004C11.4766 11.6973 10.7747 12.2532 9.96234 12.6002C10.0571 12.4388 10.144 12.2696 10.2229 12.096C10.3739 11.764 10.5057 11.3962 10.6159 11ZM12.584 10H10.837C10.9431 9.3725 11 8.69854 11 8C11 7.30146 10.9431 6.6275 10.837 6H12.584C12.8516 6.61246 13 7.2889 13 8C13 8.7111 12.8516 9.38754 12.584 10ZM9.96234 3.39978C10.7747 3.74677 11.4766 4.30269 12.0004 5H10.6159C10.5057 4.6038 10.3739 4.23601 10.2229 3.90401C10.144 3.7304 10.0571 3.56117 9.96234 3.39978Z\"\n fill={fill}\n />\n </svg>\n);\n\nexport const EditIcon: FunctionalComponent<IconProps> = ({ width, height, fill }) => (\n <svg width={width} height={height} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.6569 2.3436C14.4379 3.12465 14.4379 4.39098 13.6569 5.17203L6.27044 12.5585C5.95004 12.8789 5.54859 13.1062 5.10901 13.2161L2.81801 13.7888C2.45182 13.8804 2.12013 13.5487 2.21167 13.1825L2.78442 10.8915C2.89432 10.4519 3.12161 10.0505 3.44201 9.73006L10.8285 2.3436C11.6095 1.56255 12.8759 1.56255 13.6569 2.3436ZM10.1213 4.46481L4.14912 10.4372C3.95688 10.6294 3.8205 10.8703 3.75457 11.134L3.38393 12.6166L4.86648 12.2459C5.13022 12.18 5.37109 12.0436 5.56333 11.8514L11.5353 5.87881L10.1213 4.46481ZM11.5356 3.05071L10.8283 3.75781L12.2423 5.17181L12.9498 4.46492C13.3403 4.07439 13.3403 3.44123 12.9498 3.05071C12.5593 2.66018 11.9261 2.66018 11.5356 3.05071Z\"\n fill={fill}\n />\n </svg>\n);\n","import { h } from '@stencil/core';\nimport { transcriptStore, TranscriptStore } from './../store/transcript-store';\nimport { SearchIcon, CopyIcon, LangIcon } from '../icons';\n\nconst get = transcriptStore.get;\nconst set = transcriptStore.set;\nconst is = <K extends keyof TranscriptStore>(a: K, b: TranscriptStore[K]) => get(a) === b;\n\nexport default function Toolbar({ transcripts }) {\n const handleClearSearch = () => {\n set('searchTerm', '');\n set('toolbarState', 'default');\n };\n\n const handleCopy = async () => {\n const clipboardItemData = {\n 'text/plain': transcripts.map(t => `${t.ts} ${t.speaker}: ${t.text}`).join('\\n'),\n };\n const clipboardItem = new ClipboardItem(clipboardItemData);\n await navigator.clipboard.write([clipboardItem]);\n };\n\n return (\n <div class=\"toolbar\">\n {/* Default State */}\n {is('toolbarState', 'default') && (\n <div class=\"controls\">\n <button onClick={() => set('toolbarState', 'search')}>\n <SearchIcon height={16} fill=\"#2C2C2C\" />\n Search\n </button>\n\n <button onClick={handleCopy}>\n <CopyIcon height={16} fill=\"#2C2C2C\" />\n Copy\n </button>\n\n <button onClick={() => set('toolbarState', 'language')}>\n <LangIcon height={16} fill=\"#2C2C2C\" />\n Language\n </button>\n </div>\n )}\n {/* Search */}\n {is('toolbarState', 'search') && (\n <div class=\"search\">\n <input\n type=\"text\"\n value={get('searchTerm')}\n onInput={e => set('searchTerm', (e.target as HTMLInputElement).value)}\n onKeyDown={e => e.key === 'Escape' && handleClearSearch()}\n placeholder=\"Search transcript\"\n autoFocus\n />\n <button class=\"clear\" onClick={handleClearSearch}>\n Cancel\n </button>\n </div>\n )}\n {/* Language */}\n {is('toolbarState', 'language') && (\n <div class=\"language\">\n <select>\n <option value=\"en\">English</option>\n <option value=\"fr\">French</option>\n </select>\n <button class=\"regenerate\">Regenerate</button>\n <button class=\"clear\" onClick={handleClearSearch}>\n Done\n </button>\n </div>\n )}\n </div>\n );\n}\n",":host {\n --background: white;\n --font-family: 'Inter', sans-serif;\n --border-radius: 8px;\n}\n\n.nylas-transcript {\n background-color: var(--background);\n border-radius: var(--border-radius);\n border: 1px solid #e0e6f9;\n font-size: 14px;\n font-family: var(--font-family);\n font-optical-sizing: auto;\n\n .toolbar {\n padding: 20px 20px;\n\n input,\n select {\n border: 1px solid #4169e1;\n padding: 10px 20px;\n border-radius: 6px;\n width: 100%;\n }\n\n button.clear {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 14px;\n font-family: var(--font-family);\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: stretch;\n gap: 6px;\n\n button {\n font-family: var(--font-family);\n cursor: pointer;\n background-color: white;\n border: 1px solid #c7dbf9;\n border-radius: 8px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n letter-spacing: -4%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n margin-right: 6px;\n }\n\n &:active {\n background-color: #f0f4f9;\n }\n }\n }\n\n .search,\n .language {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n }\n }\n\n .language {\n button.regenerate {\n width: 93px;\n border-radius: 8px;\n padding: 12px 8px;\n text-align: center;\n outline: 0;\n border: none;\n background-color: #4169e1;\n color: white;\n }\n }\n\n .transcripts {\n max-height: 50vh;\n overflow-y: auto;\n border-top: 1px solid #ebeff6;\n\n .no-results {\n padding: 20px;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n }\n\n .transcripts-item {\n padding: 16px 18px;\n gap: 20px;\n display: flex;\n line-height: 24px;\n border-bottom: 1px solid #ebeff6;\n transition: 0.5s background-color ease-in-out;\n font-size: 14px;\n\n .highlight {\n background-color: yellow;\n }\n\n .copy-btn {\n fill: #4b4b4b;\n cursor: pointer;\n width: 24px;\n transition: 0.3s transform ease-in-out;\n\n &:active {\n fill: #9747ff;\n transform: scale(2);\n }\n }\n\n .speaker {\n font-weight: 500;\n font-size: 16px;\n margin-bottom: 0.5rem;\n }\n\n &.active {\n background-color: #ebeff6;\n }\n\n .time {\n color: #9747ff;\n font-weight: 600;\n min-width: 60px;\n }\n }\n }\n}\n","import { Component, h, Element, Prop, State } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport { videoStore as store } from '../store/notebook-store';\nimport Toolbar from './transcript-toolbar';\nimport { transcriptStore } from '../store/transcript-store';\nimport { CopyIcon } from '../icons';\n\ndayjs.extend(utc); // needed as utc is a separate plugin\n\nconst Text = ({ text, highlight }) => {\n if (highlight) {\n text = text.replace(new RegExp(highlight, 'gi'), `<span class=\"highlight\">${highlight}</span>`);\n }\n return <div innerHTML={text}></div>;\n};\n\n@Component({\n tag: 'nylas-transcript',\n styleUrl: 'nylas-transcript.scss',\n shadow: true,\n})\nexport class NylasTranscript {\n @Element() el!: HTMLElement;\n transcriptContainer!: HTMLDivElement;\n @State() focusedIndex: number = -1;\n\n @Prop() autoscroll: boolean = true;\n @Prop() transcript!: any;\n\n componentDidLoad() {\n transcriptStore.onChange('style', val => {\n console.log('Style change', val);\n if (this.el.shadowRoot && val) {\n this.el.shadowRoot.adoptedStyleSheets = [val];\n }\n });\n }\n\n get transcripts() {\n const time = store.get('videoTime');\n const searchTerm = transcriptStore.get('searchTerm');\n if (!this.transcript) return [];\n const candidateIndex = this.transcript.findIndex(item => item.start / 1000 >= time) - 1;\n // Scroll to proper video time\n if (candidateIndex >= 0 && this.autoscroll) {\n this.transcriptContainer.querySelector('.active')?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n // TODO: map different providers\n let res = this.transcript.map((item, index) => ({\n ...item,\n active: index === candidateIndex,\n ts: item.start ? this.secondsToStr(item.start) : null,\n }));\n if (searchTerm) {\n res = res.filter(x => x.text.toLowerCase().includes(searchTerm.toLowerCase()));\n }\n return res;\n }\n\n secondsToStr(milliseconds: number) {\n if (milliseconds < 3600000) {\n return dayjs.utc(milliseconds).format('mm:ss');\n } else {\n return dayjs.utc(milliseconds).format('HH:mm:ss');\n }\n }\n\n private handleCopy(item) {\n navigator.clipboard.writeText(`${item.ts} ${item.speaker}: ${item.text}`);\n }\n\n render() {\n return (\n <div class=\"nylas-transcript\">\n {/* <Tabs /> */}\n <Toolbar transcripts={this.transcripts} />\n <div class=\"transcripts\" ref={el => (this.transcriptContainer = el as HTMLDivElement)}>\n {!this.transcripts.length && <div class=\"no-results\">Transcript not available.</div>}\n {this.transcripts.map((item, idx) => {\n return (\n <div\n class={{\n 'transcripts-item': true,\n 'active': item.active,\n }}\n onPointerEnter={() => (this.focusedIndex = idx)}\n onPointerLeave={() => (this.focusedIndex = -1)}\n >\n {item.ts && (\n <div class=\"time\">\n {this.focusedIndex === idx ? (\n <span onClick={() => this.handleCopy(item)}>\n <CopyIcon className=\"copy-btn\" />\n </span>\n ) : (\n item.ts\n )}\n </div>\n )}\n {/* Message Part */}\n <div class=\"message\">\n <div class=\"speaker\">{item.speaker}</div>\n <Text text={item.text} highlight={transcriptStore.get('searchTerm')} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { v as videoStore } from './notebook-store.js';
|
|
3
3
|
|
|
4
|
-
const nylasVideoPlayerCss = ".video-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;position:relative;box-sizing:border-box;border-radius:8px;font-family:\"Inter\", serif;font-optical-sizing:auto}.video-container video{width:100%;border-radius:8px}.video-container .
|
|
4
|
+
const nylasVideoPlayerCss = ".video-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;position:relative;box-sizing:border-box;border-radius:8px;font-family:\"Inter\", serif;font-optical-sizing:auto}.video-container video{width:100%;border-radius:8px}.video-container .controls-overlay{color:white;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));position:absolute;bottom:0;left:0;right:0;padding:30px 20px;padding-bottom:10px;opacity:1;transition:opacity 0.3s;border-bottom-right-radius:8px;border-bottom-left-radius:8px;display:none;}.video-container .controls-overlay .seek{width:100%}.video-container .controls-overlay input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.video-container .controls-overlay .info{padding-bottom:20px}.video-container .controls-overlay .info .title{font-size:20px}.video-container .controls-overlay .info .description{color:#bbbbbb;font-weight:400;font-size:14px}.video-container .controls-overlay .progress-bar{background-color:rgba(255, 255, 255, 0.5);height:2px;margin:10px 0;transition:width 0.1s}.video-container .controls-overlay .progress-bar .progress{background:white;height:2px}.video-container .controls-overlay .controls{display:flex;align-items:center;justify-content:space-between}.video-container .controls-overlay .controls button{background:none;border:none}.video-container .controls-overlay input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;width:15rem}.video-container .controls-overlay input[type=range]:focus{outline:none}.video-container .controls-overlay input[type=range]::-webkit-slider-runnable-track{background-color:#053a5f;border-radius:0.5rem;height:0.5rem}.video-container .controls-overlay input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-12px;background-color:#5cd5eb;height:2rem;width:1rem}.video-container .controls-overlay input[type=range]:focus::-webkit-slider-thumb{border:1px solid #053a5f;outline:3px solid #053a5f;outline-offset:0.125rem}.video-container .controls-overlay input[type=range]::-moz-range-track{background-color:#053a5f;border-radius:0.5rem;height:0.5rem}.video-container .controls-overlay input[type=range]::-moz-range-thumb{border:none;border-radius:0;background-color:#5cd5eb;height:2rem;width:1rem}.video-container .controls-overlay input[type=range]:focus::-moz-range-thumb{border:1px solid #053a5f;outline:3px solid #053a5f;outline-offset:0.125rem}";
|
|
5
5
|
const NylasVideoPlayerStyle0 = nylasVideoPlayerCss;
|
|
6
6
|
|
|
7
7
|
const NylasVideoPlayer$1 = proxyCustomElement(class NylasVideoPlayer extends HTMLElement {
|
|
@@ -47,7 +47,7 @@ const NylasVideoPlayer$1 = proxyCustomElement(class NylasVideoPlayer extends HTM
|
|
|
47
47
|
return (currentTime / this.videoElement.duration) * 100;
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
|
-
return (h("div", { key: '98a898e225274dac6fda72126de7eb3fbe3b73b0', class: "video-container" }, h("video", { key: '
|
|
50
|
+
return (h("div", { key: '98a898e225274dac6fda72126de7eb3fbe3b73b0', class: "video-container" }, h("video", { key: '6ff6bd22efd243b45f7ee92a8f01b4fbe392d4b1', ref: el => (this.videoElement = el), onPlay: this.handlePlay, onPause: this.handlePause, onTimeUpdate: this.handleTimeUpdate, controls: true }, this.videoUrl && h("source", { src: this.videoUrl, type: "video/mp4" })), h("div", { key: '2297c46d4b6d7803a884bbcf7c157573702880ed', class: "controls-overlay" }, h("div", { key: '5207532096947074e5906edddab4e4c573d69795', class: "info" }, h("div", { key: 'f0f27ec9f18528ecae5cb705dcdd8579aee92f50', class: "title" }, "Ad Video from Google"), h("div", { key: 'b6c13515720c5706f6f30d588df1371ef1d435ae', class: "description" }, "Found on the web...")), h("div", { key: '677f8ea6cbac199f4c5a3452e597dc0991c79d7a', class: "progress-bar" }, h("input", { key: 'e31aa4501345fb0eb2f6bbb1ebdad5317d8bface', type: "range", ref: el => (this.seekElement = el), min: "0", max: "100", class: "seek", value: this.progressPercent, onChange: e => this.handleSeek(e), onClickCapture: e => this.inputSeek(e) })), h("div", { key: 'bdca2a6746d05ac8bc42feaf8a30029fb00c6cf4', class: "controls" }, h("div", { key: '6c9d084306cb984770b28dce6d31cf268b62073e', class: "left" }, h("button", { key: '6d128a31878bf394103bfcfb75c194d5733b5b6a', onClick: () => this.handlePlay() }), h("button", { key: 'cc3d3a8fb98b3c74bb8536f43726f71255045d24', onClick: () => this.handlePause() })), h("div", { key: 'e940328caf2215b148b97de6d0770d49f3621a5d', class: "right" }, h("button", { key: '7feb3b396dc1463945ab6e44b6bfbcfe8c0e0e48', onClick: () => this.handlePause() }))))));
|
|
51
51
|
}
|
|
52
52
|
get el() { return this; }
|
|
53
53
|
static get style() { return NylasVideoPlayerStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-video-player.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"nylas-video-player.js","mappings":"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","names":["NylasVideoPlayer","store"],"sources":["src/components/nylas-notebook/nylas-video-player/nylas-video-player.scss?tag=nylas-video-player&encapsulation=shadow","src/components/nylas-notebook/nylas-video-player/nylas-video-player.tsx"],"sourcesContent":[".video-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #000;\n position: relative;\n box-sizing: border-box;\n border-radius: 8px;\n font-family: 'Inter', serif;\n font-optical-sizing: auto;\n\n video {\n width: 100%;\n border-radius: 8px;\n }\n\n .controls-overlay {\n color: white;\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 30px 20px;\n padding-bottom: 10px;\n opacity: 1;\n transition: opacity 0.3s;\n border-bottom-right-radius: 8px;\n border-bottom-left-radius: 8px;\n display: none;\n\n .seek {\n width: 100%;\n }\n\n input[type='range'] {\n -webkit-appearance: none;\n appearance: none;\n background: transparent;\n cursor: pointer;\n }\n\n .info {\n padding-bottom: 20px;\n\n .title {\n font-size: 20px;\n }\n\n .description {\n color: #bbbbbb;\n font-weight: 400;\n font-size: 14px;\n }\n }\n\n .progress-bar {\n background-color: rgba(255, 255, 255, 0.5);\n height: 2px;\n margin: 10px 0;\n transition: width 0.1s;\n\n .progress {\n background: white;\n height: 2px;\n }\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n button {\n background: none;\n border: none;\n }\n }\n\n /********** Range Input Styles **********/\n /*Range Reset*/\n input[type='range'] {\n -webkit-appearance: none;\n appearance: none;\n background: transparent;\n cursor: pointer;\n width: 15rem;\n }\n\n /* Removes default focus */\n input[type='range']:focus {\n outline: none;\n }\n\n /***** Chrome, Safari, Opera and Edge Chromium styles *****/\n /* slider track */\n input[type='range']::-webkit-slider-runnable-track {\n background-color: #053a5f;\n border-radius: 0.5rem;\n height: 0.5rem;\n }\n\n /* slider thumb */\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n /* Override default look */\n appearance: none;\n margin-top: -12px;\n /* Centers thumb on the track */\n\n /*custom styles*/\n background-color: #5cd5eb;\n height: 2rem;\n width: 1rem;\n }\n\n input[type='range']:focus::-webkit-slider-thumb {\n border: 1px solid #053a5f;\n outline: 3px solid #053a5f;\n outline-offset: 0.125rem;\n }\n\n /******** Firefox styles ********/\n /* slider track */\n input[type='range']::-moz-range-track {\n background-color: #053a5f;\n border-radius: 0.5rem;\n height: 0.5rem;\n }\n\n /* slider thumb */\n input[type='range']::-moz-range-thumb {\n border: none;\n /*Removes extra border that FF applies*/\n border-radius: 0;\n /*Removes default border-radius that FF applies*/\n\n /*custom styles*/\n background-color: #5cd5eb;\n height: 2rem;\n width: 1rem;\n }\n\n input[type='range']:focus::-moz-range-thumb {\n border: 1px solid #053a5f;\n outline: 3px solid #053a5f;\n outline-offset: 0.125rem;\n }\n }\n}\n","import { Component, h, Element, State, Prop } from '@stencil/core';\nimport { videoStore as store } from '../store/notebook-store';\n\n@Component({\n tag: 'nylas-video-player',\n shadow: true,\n styleUrl: './nylas-video-player.scss',\n})\nexport class NylasVideoPlayer {\n @Element() el!: HTMLElement;\n @Prop() videoUrl!: string;\n @State() isSeeking: boolean = false;\n @State() isPlaying: boolean = false;\n private videoElement!: HTMLVideoElement;\n private seekElement!: HTMLInputElement;\n\n handleTimeUpdate = () => {\n const videoElement = this.videoElement;\n store.set('videoTime', this.videoElement.currentTime);\n if (!this.isSeeking) {\n this.seekElement.value = ((videoElement.currentTime / videoElement.duration) * 100).toString();\n }\n };\n\n handlePlay = () => {\n this.isPlaying = true;\n this.videoElement.play();\n };\n\n handlePause = () => {\n this.isPlaying = false;\n this.videoElement.pause();\n };\n\n private inputSeek(_e: Event) {\n if (!this.isSeeking) this.isSeeking = true;\n }\n\n private handleSeek(e: Event) {\n this.isSeeking = false;\n if (!this.videoElement) return;\n const target = e.target as HTMLInputElement;\n this.videoElement.currentTime = (parseFloat(target.value) / 100) * this.videoElement.duration;\n this.videoElement.play();\n }\n\n get progressPercent() {\n if (!this.videoElement) return 0;\n const currentTime = store.get('videoTime');\n return (currentTime / this.videoElement.duration) * 100;\n }\n\n render() {\n return (\n <div class=\"video-container\">\n <video ref={el => (this.videoElement = el as HTMLVideoElement)} onPlay={this.handlePlay} onPause={this.handlePause} onTimeUpdate={this.handleTimeUpdate} controls>\n {this.videoUrl && <source src={this.videoUrl} type=\"video/mp4\" />}\n </video>\n <div class=\"controls-overlay\">\n <div class=\"info\">\n <div class=\"title\">Ad Video from Google</div>\n <div class=\"description\">Found on the web...</div>\n </div>\n <div class=\"progress-bar\">\n <input\n type=\"range\"\n ref={el => (this.seekElement = el as HTMLInputElement)}\n min=\"0\"\n max=\"100\"\n class=\"seek\"\n value={this.progressPercent}\n onChange={e => this.handleSeek(e)}\n onClickCapture={e => this.inputSeek(e)}\n />\n </div>\n <div class=\"controls\">\n <div class=\"left\">\n <button onClick={() => this.handlePlay()}>{/* <img src={playIcon} /> */}</button>\n <button onClick={() => this.handlePause()}>{/* <img src={volumeIcon} /> */}</button>\n </div>\n <div class=\"right\">\n <button onClick={() => this.handlePause()}>{/* <img src={fullScreenIcon} /> */}</button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|