taon-ui 21.0.61 → 21.0.63

package/VERIFIED-BUILD-DATA.jsonc

@@ -1,5 +1,5 @@
-{
-  "commitHash": "1037839d18a36c02b54e9ed2b5c7a6f93594a088",
-  "commitName": "chore: update",
-  "commitDate": "30-07-2026 09:35:19"
-}
+{
+  "commitHash": "5f57c69aa8a3e265e31fa1746a703aa93c4da4c6",
+  "commitName": "chore: update",
+  "commitDate": "22-08-2026 00:28:48"
+}

package/bin/start.js

@@ -1,4 +1,4 @@
-global.frameworkName = 'taon-ui';
+global.frameworkName = 'taon-ui';
 Error.stackTraceLimit = 100;
 global.i0 = {
   defineInjectable: function () { }

package/browser/fesm2022/{taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-B4ZzYnfR.mjs → taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-Cd9FbUj8.mjs}

@@ -14,13 +14,13 @@ var taonKvAuthorization_component_html_deDE_i18n_data = {
             "translation": "Du hast es gekauft."
         },
         {
-            "gettextString": "products",
+            "gettextString": "product(s)",
             "lineNumber": 13,
-            "translation": "Produkte"
+            "translation": "Produkt (s)"
         }
     ]
 };
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 export { taonKvAuthorization_component_html_deDE_i18n_data as default };
-//# sourceMappingURL=taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-B4ZzYnfR.mjs.map
+//# sourceMappingURL=taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-Cd9FbUj8.mjs.map

package/browser/fesm2022/taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-Cd9FbUj8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-Cd9FbUj8.mjs","sources":["../../../tmp-libs-for-dist/taon-ui/projects/taon-ui/src/lib/ui/taon-kv-authorization/i18n/taon-kv-authorization.component.html.de-DE.i18n.data.ts"],"sourcesContent":["// THIS FILE IS GENERATED - DO NOT MODIFY\n\nexport interface DeDeTraslationOverrideSrcLibUiTaonKvAuthorizationTaonKvAuthorizationComponentHtml {\n  \"de-DE\": {\n  \"\": {\n    \"You did not purchase any products\"?: string;\n    \"You purchased\"?: string;\n    \"product(s)\"?: string;\n  };\n\n  };\n}\n// THIS FILE IS GENERATED - DO NOT MODIFY\nexport default {\n  \"fileRelativePath\": \"src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html\",\n  \"tags\": [\n    {\n      \"gettextString\": \"You did not purchase any products\",\n      \"lineNumber\": 5,\n      \"translation\": \"Sie haben keine Produkte gekauft.\"\n    },\n    {\n      \"gettextString\": \"You purchased\",\n      \"lineNumber\": 12,\n      \"translation\": \"Du hast es gekauft.\"\n    },\n    {\n      \"gettextString\": \"product(s)\",\n      \"lineNumber\": 13,\n      \"translation\": \"Produkt (s)\"\n    }\n  ]\n};\n// THIS FILE IS GENERATED - DO NOT MODIFY\n"],"names":[],"mappings":"AAAA;AAYA;AACA,wDAAe;AACb,IAAA,kBAAkB,EAAE,uEAAuE;AAC3F,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,eAAe;AAChC,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB;AACF;CACF;AACD;;;;"}

package/browser/fesm2022/{taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-C8oLV101.mjs → taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-L4Myx3Qy.mjs}

@@ -12,7 +12,7 @@ var taonKvAuthorization_component_html_enUS_i18n_data = {
             "lineNumber": 12
         },
         {
-            "gettextString": "products",
+            "gettextString": "product(s)",
             "lineNumber": 13
         }
     ]
@@ -20,4 +20,4 @@ var taonKvAuthorization_component_html_enUS_i18n_data = {
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 export { taonKvAuthorization_component_html_enUS_i18n_data as default };
-//# sourceMappingURL=taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-C8oLV101.mjs.map
+//# sourceMappingURL=taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-L4Myx3Qy.mjs.map

package/browser/fesm2022/taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-L4Myx3Qy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-L4Myx3Qy.mjs","sources":["../../../tmp-libs-for-dist/taon-ui/projects/taon-ui/src/lib/ui/taon-kv-authorization/i18n/taon-kv-authorization.component.html.en-US.i18n.data.ts"],"sourcesContent":["// THIS FILE IS GENERATED - DO NOT MODIFY\n\nexport interface EnUsTraslationOverrideSrcLibUiTaonKvAuthorizationTaonKvAuthorizationComponentHtml {\n  \"en-US\": {\n  \"\": {\n    \"You did not purchase any products\"?: string;\n    \"You purchased\"?: string;\n    \"product(s)\"?: string;\n  };\n\n  };\n}\n// THIS FILE IS GENERATED - DO NOT MODIFY\nexport default {\n  \"fileRelativePath\": \"src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html\",\n  \"tags\": [\n    {\n      \"gettextString\": \"You did not purchase any products\",\n      \"lineNumber\": 5\n    },\n    {\n      \"gettextString\": \"You purchased\",\n      \"lineNumber\": 12\n    },\n    {\n      \"gettextString\": \"product(s)\",\n      \"lineNumber\": 13\n    }\n  ]\n};\n// THIS FILE IS GENERATED - DO NOT MODIFY\n"],"names":[],"mappings":"AAAA;AAYA;AACA,wDAAe;AACb,IAAA,kBAAkB,EAAE,uEAAuE;AAC3F,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,YAAY,EAAE;AACf,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,eAAe;AAChC,YAAA,YAAY,EAAE;AACf,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,YAAY,EAAE;AACf;AACF;CACF;AACD;;;;"}

package/browser/fesm2022/{taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-DIy8LL8b.mjs → taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-D2z4X4t3.mjs}

@@ -14,13 +14,13 @@ var taonKvAuthorization_component_html_plPL_i18n_data = {
             "translation": "Zakupiłeś"
         },
         {
-            "gettextString": "products",
+            "gettextString": "product(s)",
             "lineNumber": 13,
-            "translation": "produktów"
+            "translation": "produkt(ów)"
         }
     ]
 };
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 export { taonKvAuthorization_component_html_plPL_i18n_data as default };
-//# sourceMappingURL=taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-DIy8LL8b.mjs.map
+//# sourceMappingURL=taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-D2z4X4t3.mjs.map

package/browser/fesm2022/taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-D2z4X4t3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-D2z4X4t3.mjs","sources":["../../../tmp-libs-for-dist/taon-ui/projects/taon-ui/src/lib/ui/taon-kv-authorization/i18n/taon-kv-authorization.component.html.pl-PL.i18n.data.ts"],"sourcesContent":["// THIS FILE IS GENERATED - DO NOT MODIFY\n\nexport interface PlPlTraslationOverrideSrcLibUiTaonKvAuthorizationTaonKvAuthorizationComponentHtml {\n  \"pl-PL\": {\n  \"\": {\n    \"You did not purchase any products\"?: string;\n    \"You purchased\"?: string;\n    \"product(s)\"?: string;\n  };\n\n  };\n}\n// THIS FILE IS GENERATED - DO NOT MODIFY\nexport default {\n  \"fileRelativePath\": \"src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html\",\n  \"tags\": [\n    {\n      \"gettextString\": \"You did not purchase any products\",\n      \"lineNumber\": 5,\n      \"translation\": \"Nie kupiłeś jeszcze żadnego produktu\"\n    },\n    {\n      \"gettextString\": \"You purchased\",\n      \"lineNumber\": 12,\n      \"translation\": \"Zakupiłeś\"\n    },\n    {\n      \"gettextString\": \"product(s)\",\n      \"lineNumber\": 13,\n      \"translation\": \"produkt(ów)\"\n    }\n  ]\n};\n// THIS FILE IS GENERATED - DO NOT MODIFY\n"],"names":[],"mappings":"AAAA;AAYA;AACA,wDAAe;AACb,IAAA,kBAAkB,EAAE,uEAAuE;AAC3F,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,eAAe;AAChC,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB;AACF;CACF;AACD;;;;"}

package/browser/fesm2022/taon-ui-browser.mjs

@@ -59,7 +59,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Log, Level } from 'ng2-logger/browser';
-import { _, Helpers, json5 } from 'tnp-core/browser';
+import { _, axios, Helpers, json5 } from 'tnp-core/browser';
 import * as i2$1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import * as i3 from 'ngx-scrollbar';
@@ -71,7 +71,6 @@ import { TaonAdminPanelMode, TaonAdminService, Symbols } from 'taon/browser';
 import { TaonStor } from 'taon-storage/browser';
 import { Resource, getDefaultModel } from 'ng2-rest/browser';
 import * as i1$2 from '@ngneat/hot-toast';
-import axios from 'axios';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PasswordModule } from 'primeng/password';
 import * as i2$4 from '@angular/router';
@@ -110,7 +109,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.61';
+const CURRENT_PACKAGE_VERSION = '21.0.63';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 function myOrgProj() { }
@@ -1637,7 +1636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region import
 //#endregion
-const t$4 = Translation.for('src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts', { "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html": { "en-US": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-C8oLV101.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-DIy8LL8b.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-B4ZzYnfR.mjs')).default }, "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts": { "en-US": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.en-US.i18n.data-DN8soZSJ.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.pl-PL.i18n.data-BXH1x3RS.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.de-DE.i18n.data-UUFMWd9s.mjs')).default } }, {
+const t$4 = Translation.for('src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts', { "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html": { "en-US": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.en-US.i18n.data-L4Myx3Qy.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-D2z4X4t3.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.de-DE.i18n.data-Cd9FbUj8.mjs')).default }, "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts": { "en-US": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.en-US.i18n.data-DN8soZSJ.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.pl-PL.i18n.data-BXH1x3RS.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.de-DE.i18n.data-UUFMWd9s.mjs')).default } }, {
 // debug: true,
 });
 class TaonKvAuthorizationComponent {
@@ -1700,11 +1699,11 @@ class TaonKvAuthorizationComponent {
         return this.authorizedProductsData().filter(p => p.authorized).length;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonKvAuthorizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonKvAuthorizationComponent, isStandalone: true, selector: "taon-kv-authorization", inputs: { email: "email", url: "url", products: "products" }, outputs: { authorizedProducts: "authorizedProducts" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">products</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonKvAuthorizationComponent, isStandalone: true, selector: "taon-kv-authorization", inputs: { email: "email", url: "url", products: "products" }, outputs: { authorizedProducts: "authorizedProducts" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">product(s)</span>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonKvAuthorizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-kv-authorization', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateDirective], template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">products</span>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'taon-kv-authorization', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateDirective], template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">product(s)</span>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { email: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1802,11 +1801,11 @@ class TaonRumbleComponent {
         return this.state === 'video-preview-private';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonRumbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonRumbleComponent, isStandalone: true, selector: "taon-rumble", inputs: { title: "title", clipId: "clipId", picturePreviewUrl: "picturePreviewUrl", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, ngImport: i0, template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>\n", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonRumbleComponent, isStandalone: true, selector: "taon-rumble", inputs: { title: "title", clipId: "clipId", picturePreviewUrl: "picturePreviewUrl", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, ngImport: i0, template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonRumbleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-rumble', standalone: true, imports: [NgIf], template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>\n", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"] }]
+            args: [{ selector: 'taon-rumble', standalone: true, imports: [NgIf], template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"] }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{
@@ -2089,11 +2088,11 @@ class TaonStripeBuyButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 border-round white-space-nowrap\"\n    style=\"margin-top: -25px\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-stripe-buy-button', imports: [CommonModule, MatButtonModule], template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 border-round white-space-nowrap\"\n    style=\"margin-top: -25px\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n" }]
+            args: [{ selector: 'taon-stripe-buy-button', imports: [CommonModule, MatButtonModule], template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>" }]
         }], propDecorators: { priceId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2370,34 +2369,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
-// declare global {
-//   interface Window {
-//     YT: any;
-//     onYouTubeIframeAPIReady: () => void;
-//   }
-// }
-function loadYoutubeApi() {
-    return new Promise(resolve => {
-        // @ts-ignore
-        if (window.YT && window.YT.Player) {
-            resolve();
-            return;
+var TaonYouTubeUtils;
+(function (TaonYouTubeUtils) {
+    // declare global {
+    //   interface Window {
+    //     YT: any;
+    //     onYouTubeIframeAPIReady: () => void;
+    //   }
+    // }
+    function loadYoutubeApi() {
+        return new Promise(resolve => {
+            // @ts-ignore
+            if (window.YT && window.YT.Player) {
+                resolve();
+                return;
+            }
+            const tag = document.createElement('script');
+            tag.src = 'https://www.youtube.com/iframe_api';
+            document.body.appendChild(tag);
+            // @ts-ignore
+            window.onYouTubeIframeAPIReady = () => {
+                resolve();
+            };
+        });
+    }
+    TaonYouTubeUtils.loadYoutubeApi = loadYoutubeApi;
+    async function getVidesIdsOfPlaylist(ytplaylistId) {
+        const url = `https://www.youtube.com/playlist?list=${encodeURIComponent(ytplaylistId)}`;
+        const response = await fetch(url, {
+            headers: {
+                'accept-language': 'en-US,en;q=0.9',
+            },
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch playlist page: ${response.status} ${response.statusText}`);
         }
-        const tag = document.createElement('script');
-        tag.src = 'https://www.youtube.com/iframe_api';
-        document.body.appendChild(tag);
-        // @ts-ignore
-        window.onYouTubeIframeAPIReady = () => {
-            resolve();
-        };
-    });
-}
+        const html = await response.text();
+        const matches = [...html.matchAll(/"videoId":"([a-zA-Z0-9_-]{11})"/g)];
+        const ids = matches.map(match => match[1]);
+        return [...new Set(ids)];
+    }
+    TaonYouTubeUtils.getVidesIdsOfPlaylist = getVidesIdsOfPlaylist;
+    function extractPlaylistId(input) {
+        if (!input.includes('http')) {
+            return input.split('&')[0].trim();
+        }
+        const url = new URL(input);
+        return (url.searchParams.get('list') || '').trim();
+    }
+    TaonYouTubeUtils.extractPlaylistId = extractPlaylistId;
+})(TaonYouTubeUtils || (TaonYouTubeUtils = {}));
+
+//#region imports
+//#endregion
 class TaonYoutubeVideoComponent {
+    get containerStyle() {
+        return this.height ? { height: this.height } : null;
+    }
+    get displayTitle() {
+        return this.title;
+    }
+    //#endregion
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.state = 'preview-picture';
+        this.paddlockClicked = new EventEmitter();
+        this.previewClicked = new EventEmitter();
+        /**
+         * > controls=0	Hides bottom control bar
+         * > modestbranding=1	Reduces YouTube logo
+         * > rel=0	Disables related videos from other channels
+         * > disablekb=1	Disables keyboard controls
+         * > fs=0	Disables fullscreen button
+         * > playsinline=1	Prevents fullscreen auto behavior on iOS
+         */
+        this.embedUrl = computed(() => this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${this.videoIdSignal()}` +
+            `?enablejsapi=1` +
+            `&autoplay=1` +
+            `&playsinline=1` +
+            `&rel=0` +
+            `&origin=${encodeURIComponent(window.location.origin)}`), ...(ngDevMode ? [{ debugName: "embedUrl" }] : []));
+        this.PS = {
+            UNSTARTED: -1,
+            ENDED: 0,
+            PLAYING: 1,
+            PAUSED: 2,
+            BUFFERING: 3,
+            CUED: 5,
+        };
+        this.videoActivated = signal(false, ...(ngDevMode ? [{ debugName: "videoActivated" }] : []));
+        this.isInViewport = signal(false, ...(ngDevMode ? [{ debugName: "isInViewport" }] : []));
+        // previewImage = computed(
+        //   () =>
+        //     `https://img.youtube.com/vi/${this.videoIdSignal()}/maxresdefault.jpg`,
+        // );
+        this.previewImage = computed(() => `https://img.youtube.com/vi/${this.videoIdSignal()}/0.jpg`, ...(ngDevMode ? [{ debugName: "previewImage" }] : []));
+        this.cdr = inject(ChangeDetectorRef);
+        this.allowedToBeDisplayedVideoOveraly = signal(true, ...(ngDevMode ? [{ debugName: "allowedToBeDisplayedVideoOveraly" }] : []));
+        this.el = inject((ElementRef));
+        this.videoIdSignal = signal('', ...(ngDevMode ? [{ debugName: "videoIdSignal" }] : []));
+        effect(() => { });
+    }
+    //#region methods / right click
     onRightClick(event) {
         // console.log(event);
         event.preventDefault();
         event.stopPropagation();
     }
+    //#endregion
+    //#region  methods /  on thumbnail error
+    onThumbnailError(event) {
+        const img = event.target;
+        const fallback = `https://img.youtube.com/vi/${this.videoIdSignal()}/hqdefault.jpg`;
+        if (img.src !== fallback) {
+            img.src = fallback;
+        }
+    }
+    //#endregion
+    //#region methods / clicked
     clicked(event) {
         event.stopPropagation();
         this.allowedToBeDisplayedVideoOveraly.set(false);
@@ -2407,15 +2496,47 @@ class TaonYoutubeVideoComponent {
         //   this.cdr.detectChanges();
         // }, 200);
     }
+    //#endregion
+    //#region methods / restart
     restart() {
         this.postCommand('seekTo', [0, true]); // go to 0 seconds
         this.postCommand('playVideo');
     }
+    //#endregion
+    //#region on init
+    ngOnInit() {
+        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+        //Add 'implements OnInit' to the class.
+    }
+    //#endregion
+    //#region on destroy
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    //#endregion
+    //#region after view init
     async ngAfterViewInit() {
+        // this.observer = new IntersectionObserver(
+        //   entries => {
+        //     // console.log({ entries });
+        //     const entry = entries[0];
+        //     if (entry.isIntersecting) {
+        //       this.isInViewport.set(true);
+        //       // We don't need to watch this component anymore.
+        //       this.observer?.disconnect();
+        //     }
+        //   },
+        //   {
+        //     root: null,
+        //     rootMargin: '150px',
+        //     threshold: 0.01,
+        //   },
+        // );
+        // this.observer.observe(this.el.nativeElement);
         if (this.state !== 'video-preview-private') {
             return;
         }
-        await loadYoutubeApi();
+        await TaonYouTubeUtils.loadYoutubeApi();
         // @ts-ignore
         this.player = new window.YT.Player(this.iframeRef.nativeElement, {
             videoId: this.videoId,
@@ -2429,6 +2550,8 @@ class TaonYoutubeVideoComponent {
             },
         });
     }
+    //#endregion
+    //#region handle state change
     handleStateChange(state) {
         // @ts-ignore
         // const YT = window.YT;
@@ -2439,68 +2562,38 @@ class TaonYoutubeVideoComponent {
         // ) as any;
         // console.log('currentVideoState', this.currentVideoState);
     }
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.PS = {
-            UNSTARTED: -1,
-            ENDED: 0,
-            PLAYING: 1,
-            PAUSED: 2,
-            BUFFERING: 3,
-            CUED: 5,
-        };
-        this.state = 'preview-picture';
-        this.paddlockClicked = new EventEmitter();
-        this.previewClicked = new EventEmitter();
-        this.cdr = inject(ChangeDetectorRef);
-        this.allowedToBeDisplayedVideoOveraly = signal(true, ...(ngDevMode ? [{ debugName: "allowedToBeDisplayedVideoOveraly" }] : []));
-        this.videoIdSignal = signal('', ...(ngDevMode ? [{ debugName: "videoIdSignal" }] : []));
-        this.previewImage = computed(() => `https://img.youtube.com/vi/${this.videoIdSignal()}/0.jpg`, ...(ngDevMode ? [{ debugName: "previewImage" }] : []));
-        /**
-         * > controls=0	Hides bottom control bar
-         * > modestbranding=1	Reduces YouTube logo
-         * > rel=0	Disables related videos from other channels
-         * > disablekb=1	Disables keyboard controls
-         * > fs=0	Disables fullscreen button
-         * > playsinline=1	Prevents fullscreen auto behavior on iOS
-         */
-        this.embedUrl = computed(() => this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${this.videoIdSignal()}?enablejsapi=1` +
-            // (this.state === 'video-preview-private' ? `&controls=0` : '') +
-            (this.state === 'video-preview-private' ? `&modestbranding=1` : '') +
-            (this.state === 'video-preview-private' ? `&rel=0` : '') +
-            // (this.state === 'video-preview-private' ? `&fs=0` : '') +
-            // (this.state === 'video-preview-private' ? `&rel=0` : '') +
-            `&disablekb=1` +
-            `&playsinline=1` +
-            `&origin=${window.location.origin}`), ...(ngDevMode ? [{ debugName: "embedUrl" }] : []));
-        effect(() => { });
-    }
+    //#endregion
+    //#region on ng changes
     ngOnChanges() {
         this.videoIdSignal.set(this.videoId);
     }
-    get containerStyle() {
-        return this.height ? { height: this.height } : null;
-    }
-    get displayTitle() {
-        return this.title;
-    }
+    //#endregion
+    //#region on lock click
     onLockClick(event) {
         event.stopPropagation();
         this.paddlockClicked.emit();
     }
+    //#endregion
+    //#region on preview click
     onPreviewClick() {
+        if (this.state === 'preview-picture-locked') {
+            return;
+        }
+        this.videoActivated.set(true);
         this.previewClicked.emit();
     }
-    // private postCommand(command: string) {
-    //   this.iframeRef?.nativeElement.contentWindow?.postMessage(
-    //     JSON.stringify({
-    //       event: 'command',
-    //       func: command,
-    //       args: [],
-    //     }),
-    //     '*',
-    //   );
-    // }
+    //#endregion
+    //#region play
+    play() {
+        this.postCommand('playVideo');
+    }
+    //#endregion
+    //#region pause
+    pause() {
+        this.postCommand('pauseVideo');
+    }
+    //#endregion
+    //#region private methods
     postCommand(command, args = []) {
         const iframe = this.iframeRef?.nativeElement;
         if (!iframe)
@@ -2511,18 +2604,12 @@ class TaonYoutubeVideoComponent {
             args: args,
         }), 'https://www.youtube.com');
     }
-    play() {
-        this.postCommand('playVideo');
-    }
-    pause() {
-        this.postCommand('pauseVideo');
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1 class=\"text-center\" >Thanks for buying <br>this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || 'YouTube video'\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      Thanks for buying<br />\n      this video\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-youtube-video', standalone: true, imports: [NgIf, NgStyle, MatIconModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1 class=\"text-center\" >Thanks for buying <br>this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"] }]
+            args: [{ selector: 'taon-youtube-video', standalone: true, imports: [NgIf, NgStyle, MatIconModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || 'YouTube video'\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      Thanks for buying<br />\n      this video\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { videoId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2541,34 +2628,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['ytFrame']
             }] } });
 
-var TaonYouTubeUtils;
-(function (TaonYouTubeUtils) {
-    async function getVidesIdsOfPlaylist(ytplaylistId) {
-        const url = `https://www.youtube.com/playlist?list=${encodeURIComponent(ytplaylistId)}`;
-        const response = await fetch(url, {
-            headers: {
-                'accept-language': 'en-US,en;q=0.9',
-            },
-        });
-        if (!response.ok) {
-            throw new Error(`Failed to fetch playlist page: ${response.status} ${response.statusText}`);
-        }
-        const html = await response.text();
-        const matches = [...html.matchAll(/"videoId":"([a-zA-Z0-9_-]{11})"/g)];
-        const ids = matches.map(match => match[1]);
-        return [...new Set(ids)];
-    }
-    TaonYouTubeUtils.getVidesIdsOfPlaylist = getVidesIdsOfPlaylist;
-    function extractPlaylistId(input) {
-        if (!input.includes('http')) {
-            return input.split('&')[0].trim();
-        }
-        const url = new URL(input);
-        return (url.searchParams.get('list') || '').trim();
-    }
-    TaonYouTubeUtils.extractPlaylistId = extractPlaylistId;
-})(TaonYouTubeUtils || (TaonYouTubeUtils = {}));
-
 ;
 // THIS FILE IS GENERATED - DO NOT MODIFY