fix video_url of iframe & add task count, module avatars

Author: Awakich

projects/social_platform/src/app/office/courses/lesson/lesson.component.html

@@ -15,7 +15,6 @@
           'progress__task--done': isDone(task),
           'progress__task--current': isCurrent(task.id)
         }"
-        (click)="selectTask(task)"
       >
         <p class="text-body-12">{{ task.order }}</p>
       </div>

projects/social_platform/src/app/office/courses/lesson/lesson.component.ts

@@ -143,14 +143,6 @@ export class LessonComponent implements OnInit {
     return task.isCompleted || this.completedTaskIds().has(task.id);
   }
 
-  selectTask(task: Task) {
-    if (!task.isAvailable) return;
-    this.currentTaskId.set(task.id);
-    this.success.set(false);
-    this.hasError.set(false);
-    this.answerBody.set("");
-  }
-
   onSubmitAnswer() {
     const task = this.currentTask();
     if (!task) return;

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

@@ -1,23 +1,16 @@
 <!-- @format -->
 
-<div class="exclude" [class.exclude--hasContent]="!!data.videoUrl || !!data.imageUrl">
+<div class="exclude" [class.exclude--hasContent]="hasVideoUrl() || !!data.imageUrl">
   <div class="exclude__body">
-    @if (!data.videoUrl && !data.imageUrl) {
+    @if (!hasVideoUrl() && !data.imageUrl) {
     <h2 class="exclude__title text-body-12-bold">{{ data.title | truncate: 110 }}</h2>
     }
     <div
       class="exclude__text text-body-12"
-      [class.exclude__text--hasContent]="!!data.videoUrl || !!data.imageUrl"
+      [class.exclude__text--hasContent]="hasVideoUrl() || !!data.imageUrl"
     >
-      @if (data.videoUrl) {
-      <iframe
-        [src]="getSafeVideoUrl()"
-        width="397px"
-        height="223px"
-        frameborder="0"
-        allowfullscreen
-        allowtransparency="true"
-      ></iframe>
+      @if (getSafeVideoUrl(); as videoUrl) {
+      <iframe [src]="videoUrl" frameborder="0" allowfullscreen allowtransparency="true"></iframe>
       } @else {
       <img alt="exclude-image" [src]="data.imageUrl" class="exclude__image" />
       <div [innerHTML]="data.bodyText | truncate: 700"></div>

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

@@ -26,6 +26,12 @@
       justify-content: center;
 
       iframe {
+        display: block;
+        width: 100%;
+        max-width: 400px;
+        aspect-ratio: 16 / 9;
+        height: auto;
+        border: 0;
         border-radius: var(--rounded-lg);
       }
     }

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

@@ -3,11 +3,10 @@
 import { Component, EventEmitter, inject, Input, type OnInit, Output, signal } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
-import { ParseBreaksPipe } from "@corelib";
 import { CheckboxComponent } from "@ui/components";
-import { TruncateHtmlPipe } from "projects/core/src/lib/pipes/truncate-html.pipe";
 import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 import { Task } from "@office/models/courses.model";
+import { resolveVideoUrlForIframe } from "@utils/video-url-embed";
 
 /**
  * Компо��ент задачи на исключение лишнего
@@ -65,10 +64,16 @@ export class ExcludeTaskComponent implements OnInit {
   _error = signal<boolean>(false);
 
   getSafeVideoUrl(): SafeResourceUrl | null {
-    if (!this.data?.videoUrl) {
+    const iframeUrl = resolveVideoUrlForIframe(this.data?.videoUrl);
+    if (!iframeUrl) {
       return null;
     }
-    return this.sanitizer.bypassSecurityTrustResourceUrl(this.data.videoUrl);
+
+    return this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl);
+  }
+
+  hasVideoUrl(): boolean {
+    return !!resolveVideoUrlForIframe(this.data?.videoUrl);
   }
 
   /**

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

@@ -1,18 +1,18 @@
 <!-- @format -->
 
-<div class="file-task" [class.file-task--hasVideo]="!!data.videoUrl">
+<div class="file-task" [class.file-task--hasVideo]="hasVideoUrl()">
   <div class="file-task__header">
     <p class="text-body-12 file-task__task">задание {{ data.order }}</p>
-    @if (!data.videoUrl && !data.imageUrl) {
+    @if (!hasVideoUrl() && !data.imageUrl) {
     <p class="file-task__text text-body-12-bold">{{ data.title | truncate: 80 }}</p>
     }
     <div
       class="file-task__description text-body-12"
-      [class.file-task__description--hasVideo]="!!data.videoUrl"
+      [class.file-task__description--hasVideo]="hasVideoUrl()"
     >
-      @if (data.videoUrl) {
+      @if (getSafeVideoUrl(); as videoUrl) {
       <iframe
-        [src]="getSafeVideoUrl()"
+        [src]="videoUrl"
         width="397px"
         height="223px"
         frameborder="0"

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

@@ -96,6 +96,16 @@
       align-self: center;
       justify-content: center;
     }
+
+    iframe {
+      display: block;
+      width: 100%;
+      max-width: 400px;
+      aspect-ratio: 16 / 9;
+      height: auto;
+      border: 0;
+      border-radius: var(--rounded-lg);
+    }
   }
 
   &__label {

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

@@ -11,6 +11,7 @@ import { FileItemComponent } from "@ui/components/file-item/file-item.component"
 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";
 
 @Component({
   selector: "app-file-task",
@@ -57,10 +58,16 @@ export class FileTaskComponent {
   uploadedFiles = signal<FileModel[]>([]);
 
   getSafeVideoUrl(): SafeResourceUrl | null {
-    if (!this.data?.videoUrl) {
+    const iframeUrl = resolveVideoUrlForIframe(this.data?.videoUrl);
+    if (!iframeUrl) {
       return null;
     }
-    return this.sanitizer.bypassSecurityTrustResourceUrl(this.data.videoUrl);
+
+    return this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl);
+  }
+
+  hasVideoUrl(): boolean {
+    return !!resolveVideoUrlForIframe(this.data?.videoUrl);
   }
 
   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,10 @@
 <!-- @format -->
 
-<div class="radio" [class.radio--hasContent]="!!data.videoUrl || !!data.imageUrl">
-  <div class="radio__body" [class.radio__body--hasContent]="!!data.imageUrl || !!data.videoUrl">
-    @if (data.videoUrl) {
+<div class="radio" [class.radio--hasContent]="hasVideoUrl() || !!data.imageUrl">
+  <div class="radio__body" [class.radio__body--hasContent]="!!data.imageUrl || hasVideoUrl()">
+    @if (getSafeVideoUrl(); as videoUrl) {
     <iframe
-      [src]="getSafeVideoUrl()"
+      [src]="videoUrl"
       width="283px"
       height="183px"
       frameborder="0"

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

@@ -109,6 +109,16 @@
       justify-content: center;
       max-width: 333px;
       text-align: center;
+
+      iframe {
+        display: block;
+        width: 100%;
+        max-width: 288px;
+        aspect-ratio: 16 / 9;
+        height: auto;
+        border: 0;
+        border-radius: var(--rounded-lg);
+      }
     }
   }