fix description expand & video relations

Author: Awakich

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.html

@@ -21,12 +21,15 @@
       <p class="exclude__text text-body-12-bold">{{ data.answerTitle | truncate: 110 }}</p>
       }
 
-      <p #descEl class="text-body-12 exclude__description">{{ data.bodyText | truncate: 700 }}</p>
+      <p
+        #descEl
+        class="text-body-12 exclude__description"
+        [innerHTML]="
+          readFullDescription ? data.bodyText : (data.bodyText | truncateHtml: truncateLimit)
+        "
+      ></p>
       @if (descriptionExpandable) {
-      <div
-        class="read-more text-body-10"
-        (click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
-      >
+      <div class="read-more text-body-10" (click)="onToggleDescription(descEl)">
         {{ readFullDescription ? "скрыть" : "подробнее" }}
       </div>
       }

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss

@@ -27,9 +27,10 @@
 
       iframe {
         display: block;
+        align-self: center;
         width: 100%;
-        max-width: 400px;
-        height: auto;
+        max-width: 295px;
+        height: 223px;
         aspect-ratio: 16 / 9;
         border: 0;
         border-radius: var(--rounded-lg);
@@ -76,19 +77,8 @@
   }
 
   &__description {
-    display: box;
-    overflow: hidden;
     text-align: justify;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
-    transition: all 0.7s ease-in-out;
-
-    &.expanded {
-      display: block;
-      max-height: 200px;
-      overflow-y: auto;
-      -webkit-line-clamp: unset;
-    }
+    white-space: pre-line;
   }
 
   .read-more {

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.ts

@@ -1,25 +1,24 @@
 /** @format */
 
 import {
-  AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   EventEmitter,
   inject,
   Input,
   type OnInit,
   Output,
   signal,
-  ViewChild,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 import { CheckboxComponent } from "@ui/components";
 import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
+import { TruncateHtmlPipe } from "projects/core/src/lib/pipes/truncate-html.pipe";
 import { Task } from "@office/models/courses.model";
 import { resolveVideoUrlForIframe } from "@utils/video-url-embed";
-import { expandElement } from "@utils/expand-element";
+import { animateContentHeight } from "@utils/animate-content-height";
+import { isHtmlTextTruncated } from "@utils/is-html-text-truncated";
 import { ImagePreviewDirective } from "../image-preview/image-preview.directive";
 
 /**
@@ -45,16 +44,14 @@ import { ImagePreviewDirective } from "../image-preview/image-preview.directive"
 @Component({
   selector: "app-exclude-task",
   standalone: true,
-  imports: [CommonModule, TruncatePipe, CheckboxComponent, ImagePreviewDirective],
+  imports: [CommonModule, TruncatePipe, TruncateHtmlPipe, CheckboxComponent, ImagePreviewDirective],
   templateUrl: "./exclude-task.component.html",
   styleUrl: "./exclude-task.component.scss",
 })
-export class ExcludeTaskComponent implements OnInit, AfterViewInit {
+export class ExcludeTaskComponent implements OnInit {
   private readonly sanitizer = inject(DomSanitizer);
   private readonly cdRef = inject(ChangeDetectorRef);
 
-  @ViewChild("descEl") descEl?: ElementRef<HTMLElement>;
-
   @Input({ required: true }) data!: Task; // Данные вопроса
   @Input() hint!: string; // Текст подсказки
   @Output() update = new EventEmitter<number[]>(); // Событие обновления выбранных ответов
@@ -79,9 +76,13 @@ export class ExcludeTaskComponent implements OnInit, AfterViewInit {
 
   result = signal<number[]>([]);
   _error = signal<boolean>(false);
-  descriptionExpandable = false;
   readFullDescription = false;
   cachedVideoUrl: SafeResourceUrl | null = null;
+  readonly truncateLimit = 700;
+
+  get descriptionExpandable(): boolean {
+    return isHtmlTextTruncated(this.data?.bodyText, this.truncateLimit);
+  }
 
   ngOnInit(): void {
     const iframeUrl = resolveVideoUrlForIframe(this.data?.videoUrl);
@@ -90,17 +91,11 @@ export class ExcludeTaskComponent implements OnInit, AfterViewInit {
       : null;
   }
 
-  ngAfterViewInit(): void {
-    const el = this.descEl?.nativeElement;
-    if (el) {
-      this.descriptionExpandable = el.scrollHeight > el.clientHeight;
+  onToggleDescription(elem: HTMLElement): void {
+    animateContentHeight(elem, () => {
+      this.readFullDescription = !this.readFullDescription;
       this.cdRef.detectChanges();
-    }
-  }
-
-  onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    expandElement(elem, expandedClass, isExpanded);
-    this.readFullDescription = !isExpanded;
+    });
   }
 
   /**

projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.html

@@ -29,14 +29,13 @@
         <div
           #descEl
           class="file-task__desc text-body-12"
-          [innerHTML]="data.bodyText | truncate: 700"
+          [innerHTML]="
+            readFullDescription ? data.bodyText : (data.bodyText | truncateHtml: truncateLimit)
+          "
         ></div>
 
         @if (descriptionExpandable) {
-        <div
-          class="read-more text-body-10"
-          (click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
-        >
+        <div class="read-more text-body-10" (click)="onToggleDescription(descEl)">
           {{ readFullDescription ? "скрыть" : "подробнее" }}
         </div>
         }

projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss

@@ -99,9 +99,10 @@
 
     iframe {
       display: block;
+      align-self: center;
       width: 100%;
-      max-width: 400px;
-      height: auto;
+      max-width: 295px;
+      height: 223px;
       aspect-ratio: 16 / 9;
       border: 0;
       border-radius: var(--rounded-lg);
@@ -137,19 +138,8 @@
   }
 
   &__desc {
-    display: box;
-    overflow: hidden;
     text-align: justify;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
-    transition: all 0.7s ease-in-out;
-
-    &.expanded {
-      display: block;
-      max-height: 200px;
-      overflow-y: auto;
-      -webkit-line-clamp: unset;
-    }
+    white-space: pre-line;
   }
 
   &__file {

projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.ts

@@ -1,17 +1,14 @@
 /** @format */
 
 import {
-  AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   EventEmitter,
   inject,
   Input,
   OnInit,
   Output,
   signal,
-  ViewChild,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
@@ -24,7 +21,8 @@ import { FileService } from "@core/services/file.service";
 import { Task } from "@office/models/courses.model";
 import { FileModel } from "@office/models/file.model";
 import { resolveVideoUrlForIframe } from "@utils/video-url-embed";
-import { expandElement } from "@utils/expand-element";
+import { animateContentHeight } from "@utils/animate-content-height";
+import { isHtmlTextTruncated } from "@utils/is-html-text-truncated";
 import { ImagePreviewDirective } from "../image-preview/image-preview.directive";
 
 @Component({
@@ -42,13 +40,11 @@ import { ImagePreviewDirective } from "../image-preview/image-preview.directive"
   templateUrl: "./file-task.component.html",
   styleUrl: "./file-task.component.scss",
 })
-export class FileTaskComponent implements OnInit, AfterViewInit {
+export class FileTaskComponent implements OnInit {
   private readonly fileService = inject(FileService);
   private readonly sanitizer = inject(DomSanitizer);
   private readonly cdRef = inject(ChangeDetectorRef);
 
-  @ViewChild("descEl") descEl?: ElementRef<HTMLElement>;
-
   @Input({ required: true }) data!: Task;
   @Input() success = false;
   @Input() hint = "";
@@ -74,9 +70,13 @@ export class FileTaskComponent implements OnInit, AfterViewInit {
 
   _error = signal<boolean>(false);
   uploadedFiles = signal<FileModel[]>([]);
-  descriptionExpandable = false;
   readFullDescription = false;
   cachedVideoUrl: SafeResourceUrl | null = null;
+  readonly truncateLimit = 700;
+
+  get descriptionExpandable(): boolean {
+    return isHtmlTextTruncated(this.data?.bodyText, this.truncateLimit);
+  }
 
   ngOnInit(): void {
     const iframeUrl = resolveVideoUrlForIframe(this.data?.videoUrl);
@@ -85,17 +85,11 @@ export class FileTaskComponent implements OnInit, AfterViewInit {
       : null;
   }
 
-  ngAfterViewInit(): void {
-    const el = this.descEl?.nativeElement;
-    if (el) {
-      this.descriptionExpandable = el.scrollHeight > el.clientHeight;
+  onToggleDescription(elem: HTMLElement): void {
+    animateContentHeight(elem, () => {
+      this.readFullDescription = !this.readFullDescription;
       this.cdRef.detectChanges();
-    }
-  }
-
-  onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    expandElement(elem, expandedClass, isExpanded);
-    this.readFullDescription = !isExpanded;
+    });
   }
 
   onFileUploaded(event: { url: string; name: string; size: number; mimeType: string }) {

projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.html

@@ -1,10 +1,15 @@
 <!-- @format -->
 
-<div class="radio" [class.radio--hasContent]="hasVideoUrl() || !!data.imageUrl">
-  <div class="radio__body" [class.radio__body--hasContent]="!!data.imageUrl || hasVideoUrl()">
+<div class="radio" [class.radio--hasContent]="cachedVideoUrl || !!data.imageUrl">
+  <div class="radio__body" [class.radio__body--hasContent]="!!data.imageUrl || cachedVideoUrl">
     <p class="text-body-12 radio__answer">задание {{ data.order }}</p>
-    @if (getSafeVideoUrl(); as videoUrl) {
-    <iframe [src]="videoUrl" frameborder="0" allowfullscreen allowtransparency="true"></iframe>
+    @if (cachedVideoUrl) {
+    <iframe
+      [src]="cachedVideoUrl"
+      frameborder="0"
+      allowfullscreen
+      allowtransparency="true"
+    ></iframe>
     } @if (data.imageUrl) {
     <div class="radio__block">
       <img appImagePreview class="radio__img" [src]="data.imageUrl" />
@@ -14,8 +19,18 @@
     <p class="radio__title text-body-12-bold">{{ data.title | truncate: 110 }}</p>
     }
 
-    <p class="text-body-12 radio__description">{{ data.bodyText | truncate: 700 }}</p>
-    @if (data.attachmentUrl) {
+    <p
+      #descEl
+      class="text-body-12 radio__description"
+      [innerHTML]="
+        readFullDescription ? data.bodyText : (data.bodyText | truncateHtml: truncateLimit)
+      "
+    ></p>
+    @if (descriptionExpandable) {
+    <div class="read-more text-body-10" (click)="onToggleDescription(descEl)">
+      {{ readFullDescription ? "скрыть" : "подробнее" }}
+    </div>
+    } @if (data.attachmentUrl) {
     <app-file-item
       mode="preview"
       [type]="'file'"
@@ -28,7 +43,10 @@
     }
   </div>
 
-  <div class="radio__content" [class.radio__content--hasContent]="!!data.imageUrl || hasVideoUrl()">
+  <div
+    class="radio__content"
+    [class.radio__content--hasContent]="!!data.imageUrl || cachedVideoUrl"
+  >
     <p class="radio__answer text-body-12">ответ</p>
     <ul class="radio__list">
       <p class="radio__title text-body-12-bold">{{ data.answerTitle | truncate: 110 }}</p>

projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.scss

@@ -29,6 +29,18 @@
 
   &__description {
     text-align: justify;
+    white-space: pre-line;
+  }
+
+  .read-more {
+    margin-top: 12px;
+    color: var(--accent);
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--accent-dark);
+    }
   }
 
   &__img {
@@ -119,9 +131,10 @@
 
       iframe {
         display: block;
+        align-self: center;
         width: 100%;
-        max-width: 288px;
-        height: auto;
+        max-width: 295px;
+        height: 223px;
         aspect-ratio: 16 / 9;
         border: 0;
         border-radius: var(--rounded-lg);