Adding feature star rating to top ribbon #562

package.json

@@ -48,7 +48,7 @@
     "trash": "6.1.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1000.0",
+    "@angular-devkit/build-angular": "^0.1100.0",
     "@angular/animations": "10.0.9",
     "@angular/cdk": "10.1.3",
     "@angular/cli": "10.0.0",

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { ShortcutsService } from './components/shortcuts/shortcuts.service';
 import { SimilarityService } from './pipes/similarity.service';
 import { SourceFolderService } from './components/statistics/source-folder.service';
 import { StarFilterService } from './pipes/star-filter.service';
+import { StarRatingService } from './pipes/star-rating.service';
 import { WordFrequencyService } from './pipes/word-frequency.service';
 
 // Components
@@ -58,6 +59,7 @@ import { SimilarTrayComponent } from './components/similar-tray/similar-tray.com
 import { SliderFilterComponent } from './components/slider-filter/slider-filter.component';
 import { SortOrderComponent } from './components/sort-order/sort-order.component';
 import { StarFilterComponent } from './components/star-filter/star-filter.component';
+import { StarRatingComponent } from './components/star-rating/star-rating.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
 import { SvgDefinitionsComponent } from './components/icon/svg-definitions.component';
 import { TagTrayComponent } from './components/tag-tray/tag-tray.component';
@@ -151,6 +153,7 @@ import { WrapperPipe } from './pipes/wrapper.pipe';
     SortingPipe,
     StarFilterComponent,
     StarFilterPipe,
+    StarRatingComponent,
     StatisticsComponent,
     SvgDefinitionsComponent,
     TagFilterPipe,
@@ -193,6 +196,7 @@ import { WrapperPipe } from './pipes/wrapper.pipe';
     SortingPipe,
     SourceFolderService,
     StarFilterService,
+    StarRatingService,
     WordFrequencyService,
     ImageElementService
   ],

src/app/components/home.component.html

@@ -282,6 +282,8 @@
       [darkMode]="settingsButtons['darkMode'].toggled"
       [fileString]="currentClickedItemName"
       [folderString]="currentPlayingFolder"
+      [starRating]="currentStarRating"
+      [index]="currentIndex"
       (onFileWordClicked)="handleFileWordClicked($event)"
       (onFolderWordClicked)="handleFolderWordClicked($event)"
       (onOpenInExplorer)="openInExplorer()"

src/app/components/home.component.ts

@@ -19,13 +19,14 @@ import { ResolutionFilterService } from '../pipes/resolution-filter.service';
 import { ShortcutsService, CustomShortcutAction } from './shortcuts/shortcuts.service';
 import { SourceFolderService } from './statistics/source-folder.service';
 import { StarFilterService } from '../pipes/star-filter.service';
+import { StarRatingService } from '../pipes/star-rating.service';
 import { WordFrequencyService, WordFreqAndHeight } from '../pipes/word-frequency.service';
 
 // Components
 import { SortOrderComponent } from './sort-order/sort-order.component';
 
 // Interfaces
-import { FinalObject, ImageElement, ScreenshotSettings, ResolutionString } from '../../../interfaces/final-object.interface';
+import { FinalObject, ImageElement, ScreenshotSettings, ResolutionString, StarRating } from '../../../interfaces/final-object.interface';
 import { ImportStage } from '../../../node/main-support';
 import { SettingsObject } from '../../../interfaces/settings-object.interface';
 import { SortType } from '../pipes/sorting.pipe';
@@ -101,7 +102,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
   @ViewChild('magicSearch', { static: false }) magicSearch: ElementRef;
   @ViewChild('searchRef', { static: false }) searchRef: ElementRef;
 
-  @ViewChild(SortOrderComponent) sortOrderRef:SortOrderComponent;
+  @ViewChild(SortOrderComponent) sortOrderRef: SortOrderComponent;
 
   @ViewChild(VirtualScrollerComponent, { static: false }) virtualScroller: VirtualScrollerComponent;
 
@@ -251,6 +252,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
   currentClickedItemName = '';
   currentPlayingFolder = '';
+  currentStarRating: StarRating;
+  currentIndex = 0;
   fullPathToCurrentFile = '';
 
   fuzzySearchString = '';
@@ -358,6 +361,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     public shortcutService: ShortcutsService,
     public sourceFolderService: SourceFolderService,
     public starFilterService: StarFilterService,
+    public starRatingService: StarRatingService,
     public translate: TranslateService,
     public wordFrequencyService: WordFrequencyService,
     public zone: NgZone,
@@ -438,7 +442,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     this.electronService.ipcRenderer.on('file-not-found', (event) => {
       this.zone.run(() => {
         this.modalService.openSnackbar(this.translate.instant('SETTINGS.fileNotFound'));
-      })
+      });
     });
 
     // Closing of Window was issued by Electron
@@ -560,7 +564,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
       let somethingDeleted: boolean = false;
 
       this.imageElementService.imageElements
-        .filter((element: ImageElement) => { return element.inputSource == sourceIndex })
+        .filter((element: ImageElement) => { return element.inputSource == sourceIndex; })
         // notice the loosey-goosey comparison! this is because number  ^^  string comparison happening here!
         .forEach((element: ImageElement) => {
           console.log(element.fileName);
@@ -580,7 +584,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     // When `watch` folder and `chokidar` detects a file was deleted (can happen when renamed too!)
     this.electronService.ipcRenderer.on('single-file-deleted', (event, sourceIndex: number, partialPath: string) => {
       this.imageElementService.imageElements
-        .filter((element: ImageElement) => { return element.inputSource == sourceIndex })
+        .filter((element: ImageElement) => { return element.inputSource == sourceIndex; })
         // notice the loosey-goosey comparison! this is because number  ^^  string comparison happening here!
         .forEach((element: ImageElement) => {
           if (('\\' + partialPath) === path.join(element.partialPath, element.fileName)) {
@@ -810,7 +814,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
       this.resetFinalArrayRef();
     } else {
       this.newVideoImportTimeout = setTimeout(() => {
-        this.resetFinalArrayRef()
+        this.resetFinalArrayRef();
       }, 3000);
     }
   }
@@ -1017,7 +1021,6 @@ export class HomeComponent implements OnInit, AfterViewInit {
    * @param clickedThumbnailIndex an index of the thumbnail clicked
    */
   public openVideo(item: ImageElement, clickedThumbnailIndex?: number): void {
-
     if (!this.sourceFolderService.sourceFolderConnected[item.inputSource]) {
       console.log('not connected!');
       this.modalService.openSnackbar(this.translate.instant('SETTINGS.rootFolderNotLive'));
@@ -1029,6 +1032,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
     this.currentPlayingFolder = item.partialPath;
     this.currentClickedItemName = item.cleanName;
+    this.currentStarRating = item.stars;
+    this.currentIndex = item.index;
     const fullPath = this.filePathService.getPathFromImageElement(item);
     this.fullPathToCurrentFile = fullPath;
 
@@ -1044,6 +1049,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     } else {
       this.electronService.ipcRenderer.send('open-media-file', fullPath);
     }
+
   }
 
   /**

src/app/components/layout.scss

@@ -99,8 +99,9 @@
 }
 
 .top-content-position {
-  left: 10px;
+  padding-left: 10px;
   position: absolute;
+  width: 100%;
   top: 5px;
 }
 

src/app/components/meta/meta.component.html

@@ -77,48 +77,12 @@
   </ng-template>
 
 <!-- Star rating -->
-  <button
-    (click)="setStarRating(1.5)"
-    class="star-rating"
-    [ngClass]="{ 'star-lit': starRatingHack > 1 }"
-    tabindex="-1"
-  >
-    <app-icon [icon]="'icon-star'"></app-icon>
-  </button>
-  <button
-    (click)="setStarRating(2.5)"
-    class="star-rating"
-    [ngClass]="{ 'star-lit': starRatingHack > 2 }"
-    tabindex="-1"
-  >
-    <app-icon [icon]="'icon-star'"></app-icon>
-  </button>
-  <button
-    (click)="setStarRating(3.5)"
-    class="star-rating"
-    [ngClass]="{ 'star-lit': starRatingHack > 3 }"
-    tabindex="-1"
-  >
-    <app-icon [icon]="'icon-star'"></app-icon>
-  </button>
-  <button
-    (click)="setStarRating(4.5)"
-    class="star-rating"
-    [ngClass]="{ 'star-lit': starRatingHack > 4 }"
-    tabindex="-1"
-  >
-    <app-icon [icon]="'icon-star'"></app-icon>
-  </button>
-  <button
-    (click)="setStarRating(5.5)"
-    class="star-rating"
-    [ngClass]="{ 'star-lit': starRatingHack > 5 }"
-    tabindex="-1"
-  >
-    <app-icon [icon]="'icon-star'"></app-icon>
-  </button>
+  <app-star-rating
+    [starRating]="star"
+    [index]="video.index"
+  ></app-star-rating>
 
-  <!-- Times played -->
+<!-- Times played -->
   <span class="fileSize times-played" *ngIf="video.timesPlayed">
     {{ 'TAGS.timesPlayed' | translate }}: {{ video.timesPlayed }}
   </span>

src/app/components/meta/meta.component.scss

@@ -72,27 +72,6 @@
   margin-top: 4px;
 }
 
-.star-rating {
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-  fill: yellow;
-  height: 20px;
-  margin: 0;
-  opacity: 0.4;
-  outline: none;
-  padding: 0;
-  stroke: #000000;
-  stroke-linejoin: round;
-  stroke-width: 0.3px;
-  width: 20px;
-}
-
-.star-lit {
-  opacity: 1;
-  transform: scale(1.5);
-}
-
 .year {
   background-color: transparent;
   border: 0;

src/app/components/meta/meta.component.ts

@@ -7,6 +7,7 @@ import { Subscription, Observable } from 'rxjs';
 import { ElectronService } from '../../providers/electron.service';
 import { FilePathService } from '../views/file-path.service';
 import { ManualTagsService } from '../tags-manual/manual-tags.service';
+import { StarRatingService } from '../../pipes/star-rating.service';
 
 import { StarRating, ImageElement } from '../../../../interfaces/final-object.interface';
 import { TagEmit, RenameFileResponse } from '../../../../interfaces/shared-interfaces';
@@ -36,9 +37,8 @@ export class MetaComponent implements OnInit, OnDestroy {
   @Input() showVideoNotes: boolean;
   @Input() star: StarRating;
 
-  @Input() renameResponse: Observable<RenameFileResponse>
+  @Input() renameResponse: Observable<RenameFileResponse>;
 
-  starRatingHack: StarRating;
   yearHack: number;
 
   tagViewUpdateHack: boolean = false;
@@ -58,7 +58,6 @@ export class MetaComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.starRatingHack = this.star;
     this.yearHack = this.video.year;
 
     this.renamingWIP = this.video.cleanName; // or should this be video.fileName (without extension!?)
@@ -111,17 +110,6 @@ export class MetaComponent implements OnInit, OnDestroy {
     this.tagViewUpdateHack = !this.tagViewUpdateHack;
   }
 
-  setStarRating(rating: StarRating): void {
-    if (this.starRatingHack === rating) {
-      rating = 0.5; // reset to "N/A" (not rated)
-    }
-    this.starRatingHack = rating; // hack for getting star opacity updated instantly
-    this.imageElementService.HandleEmission({
-      index: this.video.index,
-      stars: rating
-    });
-  }
-
   /**
    * Update the FinalArray with the year!
    * @param year
@@ -213,7 +201,7 @@ export class MetaComponent implements OnInit, OnDestroy {
     event.target.blur();
     this.renamingWIP = this.video.cleanName;
     event.stopPropagation();
-    this.renameError = false
+    this.renameError = false;
   }
 
   /**

src/app/components/star-rating/star-rating.component.html

@@ -0,0 +1,40 @@
+<button
+  (click)="setStarRating(1.5)"
+  class="star-rating"
+  [ngClass]="{ 'star-lit': starRatingHack > 1 }"
+  tabindex="-1"
+>
+  <app-icon [icon]="'icon-star'"></app-icon>
+</button>
+<button
+  (click)="setStarRating(2.5)"
+  class="star-rating"
+  [ngClass]="{ 'star-lit': starRatingHack > 2 }"
+  tabindex="-1"
+>
+  <app-icon [icon]="'icon-star'"></app-icon>
+</button>
+<button
+  (click)="setStarRating(3.5)"
+  class="star-rating"
+  [ngClass]="{ 'star-lit': starRatingHack > 3 }"
+  tabindex="-1"
+>
+  <app-icon [icon]="'icon-star'"></app-icon>
+</button>
+<button
+  (click)="setStarRating(4.5)"
+  class="star-rating"
+  [ngClass]="{ 'star-lit': starRatingHack > 4 }"
+  tabindex="-1"
+>
+  <app-icon [icon]="'icon-star'"></app-icon>
+</button>
+<button
+  (click)="setStarRating(5.5)"
+  class="star-rating"
+  [ngClass]="{ 'star-lit': starRatingHack > 5 }"
+  tabindex="-1"
+>
+  <app-icon [icon]="'icon-star'"></app-icon>
+</button>

src/app/components/star-rating/star-rating.component.scss

@@ -0,0 +1,20 @@
+.star-rating {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  fill: yellow;
+  height: 20px;
+  margin: 0;
+  opacity: 0.4;
+  outline: none;
+  padding: 0;
+  stroke: #000000;
+  stroke-linejoin: round;
+  stroke-width: 0.3px;
+  width: 20px;
+}
+
+.star-lit {
+  opacity: 1;
+  transform: scale(1.5);
+}