taon-ui 21.0.74 → 21.0.76

package/ts-source/websql-code-prod/ui/taon-theme/taon-theme.service.ts

@@ -0,0 +1,84 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { isPlatformBrowser } from '@angular/common';
+import { Injectable, signal, effect, inject, PLATFORM_ID } from '@angular/core';
+export enum TaonThemeMode {
+    AUTO = 'auto',
+    LIGHT = 'light',
+    DARK = 'dark'
+}
+@Injectable({ providedIn: 'root' })
+export class TaonThemeService {
+    private readonly TAON_THEME_KEY = 'taon-theme-mode';
+    private platformId = inject(PLATFORM_ID);
+    private isBrowser = isPlatformBrowser(this.platformId);
+    private mediaQuery: MediaQueryList | null = null;
+    public pernamentMode = false;
+    mode = signal<TaonThemeMode>(TaonThemeMode.AUTO);
+    isDark = signal<boolean>(false);
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const saved = localStorage.getItem(this.TAON_THEME_KEY) as TaonThemeMode | null;
+        if (saved) {
+            this.mode.set(saved);
+        }
+        this.mediaQuery.addEventListener('change', e => {
+            if (this.pernamentMode) {
+                return;
+            }
+            if (this.mode() === TaonThemeMode.AUTO) {
+                this.apply(e.matches);
+            }
+        });
+        effect(() => {
+            const currentMode = this.mode();
+            localStorage.setItem(this.TAON_THEME_KEY, currentMode);
+            const dark = currentMode === TaonThemeMode.AUTO
+                ? (this.mediaQuery?.matches ?? false)
+                : currentMode === TaonThemeMode.DARK;
+            this.apply(dark);
+        });
+    }
+    private apply(dark: boolean): void {
+        this.isDark.set(dark);
+        const root = document.documentElement;
+        root.classList.toggle('dark-taon-theme', dark);
+        root.classList.toggle('light-taon-theme', !dark);
+    }
+    setMode(mode: TaonThemeMode, options?: {
+        pernamentMode?: boolean;
+    }): void {
+        options = options || {};
+        this.pernamentMode = options.pernamentMode ?? false;
+        this.mode.set(mode);
+    }
+    toogleAuto(auto: boolean): void {
+        if (auto) {
+            this.mode.set(TaonThemeMode.AUTO);
+        }
+        else {
+            this.mode.set(TaonThemeMode.LIGHT);
+        }
+    }
+    setDark(yes: boolean): void {
+        if (yes) {
+            this.mode.set(TaonThemeMode.DARK);
+        }
+        else {
+            this.mode.set(TaonThemeMode.LIGHT);
+        }
+    }
+    toggle(): void {
+        this.setMode(this.isDark() ? TaonThemeMode.LIGHT : TaonThemeMode.DARK);
+    }
+    isAuto(): boolean {
+        return this.mode() === TaonThemeMode.AUTO;
+    }
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.html

@@ -0,0 +1,77 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+<div
+  class="yt-container"
+  [ngClass]="state"
+  [ngStyle]="containerStyle">
+  
+  <div
+    *ngIf="!videoActivated()"
+    class="yt-preview"
+    (click)="onPreviewClick()">
+    
+    <img
+      class="yt-media"
+      [src]="previewImage()"
+      [alt]="displayTitle || 'YouTube video'"
+      decoding="async"
+      draggable="false"
+      (error)="onThumbnailError($event)" />
+    
+
+    
+    <div
+      *ngIf="state !== 'preview-picture-locked'"
+      class="yt-play-button">
+      <mat-icon>play_arrow</mat-icon>
+    </div>
+
+    
+    <div
+      *ngIf="state === 'preview-picture-locked'"
+      class="yt-overlay yt-lock"
+      (click)="onLockClick($event)">
+      <mat-icon>lock</mat-icon>
+    </div>
+  </div>
+
+  
+  <iframe
+    #ytFrame
+    *ngIf="videoActivated()"
+    class="yt-media"
+    [src]="embedUrl()"
+    frameborder="0"
+    allow="autoplay; encrypted-media; picture-in-picture; web-share"
+    allowfullscreen>
+  </iframe>
+
+  
+  <div
+    *ngIf="
+      videoActivated() &&
+      state === 'video-preview-private' &&
+      allowedToBeDisplayedVideoOveraly()
+    "
+    class="yt-overlay-video"
+    (contextmenu)="onRightClick($event)"
+    (dblclick)="clicked($event)"
+    (click)="clicked($event)">
+    <h1 class="text-center">
+      Thanks for buying<br />
+      this video
+    </h1>
+  </div>
+</div>
+
+<div
+  class="yt-title"
+  *ngIf="displayTitle">
+  {{ displayTitle }}
+</div>

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.scss

@@ -0,0 +1,106 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+.yt-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid var(--surface-border);
+
+  &: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;
+  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: rgba(255, 0, 0, 0.9);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  pointer-events: none;
+
+  mat-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    color: white;
+  }
+}
+
+.yt-preview:hover .yt-play-button {
+  transform: translate(-50%, -50%) scale(1.08);
+}
+
+.yt-lock {
+  background: rgba(0, 0, 0, 0.55);
+
+  mat-icon {
+    width: 60px;
+    height: 60px;
+    font-size: 56px;
+    color: white;
+  }
+}
+
+.yt-overlay-video {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: rgba(200, 200, 200, 0.5);
+}
+
+.yt-title {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.ts

@@ -0,0 +1,144 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { NgIf, NgStyle, CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, computed, signal, OnChanges, AfterViewInit, ViewChild, ElementRef, effect, ChangeDetectorRef, inject, OnInit, OnDestroy, } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { TaonYoutubeState } from './taon-youtube.models';
+import { TaonYouTubeUtils__NS__extractPlaylistId, TaonYouTubeUtils__NS__getVidesIdsOfPlaylist, TaonYouTubeUtils__NS__loadYoutubeApi } from './taon-youtube.utils';
+@Component({
+    selector: 'taon-youtube-video',
+    standalone: true,
+    imports: [NgIf, NgStyle, MatIconModule, CommonModule],
+    templateUrl: './taon-youtube-video.component.html',
+    styleUrls: ['./taon-youtube-video.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TaonYoutubeVideoComponent implements OnChanges, AfterViewInit, OnInit, OnDestroy {
+    @Input({ required: true })
+    videoId!: string;
+    @Input()
+    title?: string;
+    @Input()
+    height?: string;
+    @Input()
+    state: TaonYoutubeState = 'preview-picture';
+    @Output()
+    paddlockClicked = new EventEmitter<void>();
+    @Output()
+    previewClicked = new EventEmitter<void>();
+    @ViewChild('ytFrame')
+    iframeRef?: ElementRef<HTMLIFrameElement>;
+    embedUrl = computed<SafeResourceUrl>(() => this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${this.videoIdSignal()}` +
+        `?enablejsapi=1` +
+        `&autoplay=1` +
+        `&playsinline=1` +
+        `&rel=0` +
+        `&origin=${encodeURIComponent(window.location.origin)}`));
+    private readonly PS = {
+        UNSTARTED: -1,
+        ENDED: 0,
+        PLAYING: 1,
+        PAUSED: 2,
+        BUFFERING: 3,
+        CUED: 5,
+    };
+    currentVideoState: keyof typeof this.PS;
+    videoActivated = signal(false);
+    isInViewport = signal(false);
+    previewImage = computed(() => `https://img.youtube.com/vi/${this.videoIdSignal()}/0.jpg`);
+    cdr = inject(ChangeDetectorRef);
+    allowedToBeDisplayedVideoOveraly = signal(true);
+    private player!: any;
+    private readonly el = inject(ElementRef<HTMLElement>);
+    private observer?: IntersectionObserver;
+    private videoIdSignal = signal<string>('');
+    get containerStyle() {
+        return this.height ? { height: this.height } : null;
+    }
+    get displayTitle() {
+        return this.title;
+    }
+    constructor(private sanitizer: DomSanitizer) {
+        effect(() => { });
+    }
+    onRightClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onThumbnailError(event: Event): void {
+        const img = event.target as HTMLImageElement;
+        const fallback = `https://img.youtube.com/vi/${this.videoIdSignal()}/hqdefault.jpg`;
+        if (img.src !== fallback) {
+            img.src = fallback;
+        }
+    }
+    clicked(event) {
+        event.stopPropagation();
+        this.allowedToBeDisplayedVideoOveraly.set(false);
+        this.cdr.detectChanges();
+    }
+    restart() {
+        this.postCommand('seekTo', [0, true]);
+        this.postCommand('playVideo');
+    }
+    ngOnInit(): void {
+    }
+    ngOnDestroy(): void {
+        this.observer?.disconnect();
+    }
+    async ngAfterViewInit() {
+        if (this.state !== 'video-preview-private') {
+            return;
+        }
+        await TaonYouTubeUtils__NS__loadYoutubeApi();
+        this.player = new window.YT.Player(this.iframeRef.nativeElement, {
+            videoId: this.videoId,
+            playerVars: {
+                origin: window.location.origin,
+            },
+            events: {
+                onStateChange: (event: any) => {
+                    this.handleStateChange(event.data);
+                },
+            },
+        });
+    }
+    private handleStateChange(state: number) {
+    }
+    ngOnChanges() {
+        this.videoIdSignal.set(this.videoId);
+    }
+    onLockClick(event: MouseEvent) {
+        event.stopPropagation();
+        this.paddlockClicked.emit();
+    }
+    onPreviewClick(): void {
+        if (this.state === 'preview-picture-locked') {
+            return;
+        }
+        this.videoActivated.set(true);
+        this.previewClicked.emit();
+    }
+    play() {
+        this.postCommand('playVideo');
+    }
+    pause() {
+        this.postCommand('pauseVideo');
+    }
+    private postCommand(command: string, args: any[] = []) {
+        const iframe = this.iframeRef?.nativeElement;
+        if (!iframe)
+            return;
+        iframe.contentWindow?.postMessage(JSON.stringify({
+            event: 'command',
+            func: command,
+            args: args,
+        }), 'https://www.youtube.com');
+    }
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube.models.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube.models.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export type TaonYoutubeState = 'preview-picture' | 'preview-picture-locked' | 'video-preview-open' | 'video-preview-private';

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube.utils.split-namespaces.json

@@ -0,0 +1,14 @@
+{
+  "namespacesMapObj": {
+    "TaonYouTubeUtils.loadYoutubeApi": "TaonYouTubeUtils__NS__loadYoutubeApi",
+    "TaonYouTubeUtils.getVidesIdsOfPlaylist": "TaonYouTubeUtils__NS__getVidesIdsOfPlaylist",
+    "TaonYouTubeUtils.extractPlaylistId": "TaonYouTubeUtils__NS__extractPlaylistId"
+  },
+  "namespacesReplace": {
+    "TaonYouTubeUtils": [
+      "TaonYouTubeUtils__NS__extractPlaylistId",
+      "TaonYouTubeUtils__NS__getVidesIdsOfPlaylist",
+      "TaonYouTubeUtils__NS__loadYoutubeApi"
+    ]
+  }
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube.utils.ts

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export function TaonYouTubeUtils__NS__loadYoutubeApi(): Promise<void> {
+    return new Promise(resolve => {
+        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);
+        window.onYouTubeIframeAPIReady = () => {
+            resolve();
+        };
+    });
+}
+export async function TaonYouTubeUtils__NS__getVidesIdsOfPlaylist(ytplaylistId: string): Promise<string[]> {
+    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)];
+}
+export function TaonYouTubeUtils__NS__extractPlaylistId(input: string): string {
+    if (!input.includes('http')) {
+        return input.split('&')[0].trim();
+    }
+    const url = new URL(input);
+    return (url.searchParams.get('list') || '').trim();
+}

package/ts-source/websql-code-prod/ui/taon.scss

@@ -0,0 +1,21 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+@mixin section {
+  section {
+    display: block;
+    padding: 10px;
+
+    > * {
+      margin-top: 0px !important;
+      margin-bottom: 10px !important;
+
+      &:last-child {
+        margin-bottom: 0px !important;
+      }
+    }
+  }
+}

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

@@ -67,7 +67,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.74';
+const CURRENT_PACKAGE_VERSION = '21.0.76';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 function myOrgProj() { }