Polish previews

Author: kirjs

apps/codelab/src/app/admin/content/presentation-editor/content.component.ts

@@ -23,14 +23,14 @@ export class ContentComponent {
     })
   );
 
-  currentSlideIndex$ = this.contentService.currentSlideIndex$;
+  currentSlideIndex$ = this.navigationService.currentSlideIndex$;
 
   currentSlide$ = combineLatest([
     this.navigationService.currentSlideIndex$,
     this.presentation$
   ]).pipe(
-    map(([slide, presentation]) => {
-      return presentation.slides[slide || 0];
+    map(([slideIndex, presentation]) => {
+      return presentation.slides[slideIndex || 0];
     })
   );
 

apps/codelab/src/app/admin/content/presentation-editor/preview/preview.module.ts

@@ -15,6 +15,7 @@ import { FormsModule } from '@angular/forms';
     BlankComponent,
   ],
   exports: [PreviewComponent, SlidePreviewComponent, DynamicRendererComponent],
-  imports: [CommonModule, NgxdModule, FormsModule],
+  imports: [CommonModule, NgxdModule, FormsModule,],
 })
-export class PreviewModule {}
+export class PreviewModule {
+}

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/small-slide-preview/small-slide-preview/small-slide-preview.component.css

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+  width: 200px;
+  position: relative;
+  padding: 4px;
+
+}
+
+:host-context(.small) :host {
+  width: 100px;
+}
+
+:host-context(.small)  slides-slide-preview {
+  width: 500px;
+  height: 410px;
+}
+
+:host-context(.medium) {
+  width: 208px;
+  height: 150px;
+  overflow: hidden;
+}
+
+:host-context(.medium)  slides-slide-preview {
+  width: 1050px;
+  height: 780px;
+}
+
+slides-slide-preview {
+  display: block;
+  transform: scale(0.2);
+  position: absolute;
+  transform-origin: 0 0;
+  width: 500px;
+}

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/small-slide-preview/small-slide-preview/small-slide-preview.component.html

@@ -0,0 +1 @@
+<slides-slide-preview [slide]="slide" [mode]="mode"></slides-slide-preview>

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/small-slide-preview/small-slide-preview/small-slide-preview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SmallSlidePreviewComponent } from './small-slide-preview.component';
+
+describe('SmallSlidePreviewComponent', () => {
+  let component: SmallSlidePreviewComponent;
+  let fixture: ComponentFixture<SmallSlidePreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SmallSlidePreviewComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SmallSlidePreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/small-slide-preview/small-slide-preview/small-slide-preview.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { ContentSlide, SlideViewType } from "../../../../types";
+import { PreviewModule } from "../../../preview.module";
+
+@Component({
+  selector: 'slides-small-slide-preview',
+  templateUrl: './small-slide-preview.component.html',
+  styleUrls: ['./small-slide-preview.component.css'],
+  standalone: true,
+  imports: [PreviewModule]
+})
+export class SmallSlidePreviewComponent {
+  @Input() slide!: ContentSlide;
+  @Input() mode: SlideViewType = 'preview';
+}

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -1,28 +1,18 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { AngularFirestore } from '@angular/fire/compat/firestore';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, merge, Subject } from 'rxjs';
-import {
-  auditTime,
-  distinctUntilChanged,
-  map,
-  scan,
-  shareReplay,
-  takeUntil,
-  tap,
-} from 'rxjs/operators';
+import { merge, Subject } from 'rxjs';
+import { auditTime, distinctUntilChanged, map, scan, shareReplay, take, takeUntil, } from 'rxjs/operators';
 import { nanoid } from 'nanoid';
 import { ContentBlock, ContentPresentation } from '../types';
 import { reducer } from '../reducer';
 import { serverTimestamp } from '@angular/fire/database';
+import { NavigationService } from "./navigation.service";
 
 const DOC_KEY = 'presentations';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class ContentService implements OnDestroy {
-  private readonly currentSlideSubject = new BehaviorSubject(0);
-
-  public readonly currentSlideIndex$ = this.currentSlideSubject;
+  public readonly currentSlideIndex$ = this.navigationService.currentSlideIndex$;
 
   private readonly presentations = this.firestore.collection('presentations');
   private readonly presentations$ = this.presentations
@@ -63,16 +53,15 @@ export class ContentService implements OnDestroy {
   );
 
   constructor(
-    readonly firestore: AngularFirestore,
-    readonly route: ActivatedRoute,
-    readonly router: Router
+    private readonly firestore: AngularFirestore,
+    private readonly navigationService: NavigationService
   ) {
     // TODO: There should be a better way
-    // this.goToSlide(router.routerState.snapshot.root.firstChild.firstChild.params.id || 0);
+
     this.state$
       .pipe(auditTime(2000), takeUntil(this.onDestroy$))
       .subscribe((presentations) => {
-        this.presentations.doc('presentations').set({ presentations });
+        this.presentations.doc('presentations').set({presentations});
       });
   }
 
@@ -99,19 +88,21 @@ export class ContentService implements OnDestroy {
   }
 
   addSlide(presentationId: string) {
-    const index = this.currentSlideIndex$.value;
-    const action = {
-      type: 'addSlide',
-      payload: {
-        slide: {
-          id: this.uniqueId(),
-          title: 'New slide',
-          blocks: [],
+    this.currentSlideIndex$.pipe(take(1)).subscribe(index => {
+      const action = {
+        type: 'addSlide',
+        payload: {
+          slide: {
+            id: this.uniqueId(),
+            title: 'New slide',
+            blocks: [],
+          },
+          index,
         },
-        index,
-      },
-    };
-    this.dispatch(presentationId, action);
+      };
+      this.dispatch(presentationId, action);
+    });
+
   }
 
   updateSlideMeta(
@@ -247,7 +238,7 @@ export class ContentService implements OnDestroy {
   deletePresentation(presentationId: string) {
     const action = {
       type: 'deletePresentation',
-      payload: { presentationId },
+      payload: {presentationId},
     };
 
     this.dispatch(presentationId, action);

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -1,4 +1,4 @@
-<div class="slides-wrapper" tabindex="0">
+<mat-selection-list (selectionChange)="handleSelectionChange($event)" class="slides-wrapper" tabindex="0">
   <button (click)="addSlide()">Add</button>
 
   <div
@@ -23,19 +23,22 @@
       role="button"
     >
       <div *cdkDragPreview>
-        <div *ngFor="let selectedItem of selectionModel.selected"></div>
+        <div *ngFor="let selectedItem of selectionModel.selected">
+          {{selectedItem}}!
+        </div>
       </div>
       <div *cdkDragPlaceholder>
         <div class="drag-placeholder"></div>
       </div>
 
       <div class="slide">
-        <slides-slide-preview
+        <slides-small-slide-preview
+          class="small"
           inert
           [slide]="slide"
           mode="preview"
-        ></slides-slide-preview>
+        ></slides-small-slide-preview>
       </div>
     </div>
   </div>
-</div>
+</mat-selection-list>

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.scss

@@ -64,10 +64,6 @@
   pointer-events: none;
   text-decoration: none;
   color: inherit;
-
-  slides-slide-preview {
-    zoom: 0.2;
-  }
 }
 
 .dragging {

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -1,13 +1,4 @@
-import {
-  Component,
-  ElementRef,
-  HostListener,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges
-} from '@angular/core';
+import { Component, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Location } from '@angular/common';
 import { CdkDragDrop, CdkDragStart, DragRef } from '@angular/cdk/drag-drop';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -17,10 +8,8 @@ import { NavigationService } from '../services/navigation.service';
 import { ContentSlide } from '../types';
 
 import { MultiselectModel } from '../../../../multiselect/multiselect-model';
-import {
-  isFromContext,
-  KeyboardEventWithTarget
-} from '../../../../shared/helpers/helpers';
+import { isFromContext, KeyboardEventWithTarget } from '../../../../shared/helpers/helpers';
+import { MatSelectionListChange } from "@angular/material/list";
 
 function slideIdsMapper(slides: ContentSlide[]): string[] {
   return slides.map(slide => slide.id);
@@ -40,13 +29,14 @@ export class SidePanelComponent implements OnInit, OnChanges {
   public selectionModel: MultiselectModel<string> = new MultiselectModel();
 
   constructor(
-    readonly el: ElementRef,
-    readonly location: Location,
-    readonly route: ActivatedRoute,
-    readonly router: Router,
-    readonly contentService: ContentService,
-    readonly navigationService: NavigationService
-  ) {}
+    private readonly el: ElementRef,
+    private readonly location: Location,
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly contentService: ContentService,
+    private readonly navigationService: NavigationService
+  ) {
+  }
 
   ngOnInit() {
     this.resetSelected();
@@ -58,6 +48,12 @@ export class SidePanelComponent implements OnInit, OnChanges {
 
       this.selectionModel.setItems(slideIds);
     }
+
+    console.log(this.currentSlideIndex, '--');
+
+    if (changes.currentSlideIndex) {
+      console.log(this.currentSlideIndex);
+    }
   }
 
   trackBySlideId(index: number, slide: ContentSlide) {
@@ -70,9 +66,8 @@ export class SidePanelComponent implements OnInit, OnChanges {
 
   @HostListener('document:keydown.arrowdown', ['$event'])
   nextSlide(event: KeyboardEventWithTarget<HTMLElement>) {
-    if (this.isFromSidePanelContext(event.target)) {
+    if (this.isFromSidePanelContext(event.target) && this.currentSlideIndex + 1 < this.slides.length) {
       this.navigationService.nextSlide(this.presentationId);
-
       event.preventDefault();
     }
   }
@@ -170,4 +165,8 @@ export class SidePanelComponent implements OnInit, OnChanges {
       this.navigationService.goToSlide(this.presentationId, index);
     }
   }
+
+  handleSelectionChange($event: MatSelectionListChange) {
+    debugger;
+  }
 }