Add hyshare integration to file info sheet

floogulinc · Sep 17, 2022 · 6dda34f · 6dda34f
1 parent 7bb2141
commit 6dda34f
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 49 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -40,6 +40,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 import {PortalModule} from '@angular/cdk/portal';
 import {ScrollingModule} from '@angular/cdk/scrolling';
+import {ClipboardModule} from '@angular/cdk/clipboard';
 
 import { ReactiveFormsModule } from '@angular/forms';
 
@@ -125,7 +126,8 @@ const MAT_MODULES = [
         LayoutModule,
         ReactiveFormsModule,
         VirtualScrollerModule,
-        NgPipesModule
+        NgPipesModule,
+        ClipboardModule
     ],
     providers: [],
     bootstrap: [AppComponent]

diff --git a/src/app/file-info-sheet/file-info-sheet.component.html b/src/app/file-info-sheet/file-info-sheet.component.html
@@ -1,54 +1,74 @@
-<h2 mat-dialog-title>File Info</h2>
-<mat-list role="list">
-  <mat-list-item role="listitem">
-    <mat-icon mat-list-icon>{{fileIcon}}</mat-icon>
-    <div mat-line>{{data.file.file_id}}</div>
-    <div mat-line class="metadata-line"><span>{{data.file.mime}}</span> <span *ngIf="data.file.width && data.file.height">{{data.file.width}}x{{data.file.height}}</span> <span>{{data.file.size | bytes: 2}}</span></div>
-  </mat-list-item>
-  <mat-list-item role="listitem">
-    <mat-icon mat-list-icon>{{data.file.is_inbox ? "inbox" : data.file.is_trashed ? "delete" : "archive"}}</mat-icon>
-    <div mat-line>{{data.file.is_inbox ? "In Inbox" : data.file.is_trashed ? "In Trash" : "Archived"}}</div>
-    <a mat-icon-button rel="noopener noreferrer" target="_blank" href="{{data.file.file_url}}" title="Open file in new tab">
-      <mat-icon>open_in_new</mat-icon>
-    </a>
+<div fxLayout="row" fxLayoutAlign="space-between center" class="title-row">
+  <h2 mat-dialog-title class="sheet-title">File Info</h2>
+  <div>
     <button mat-icon-button (click)="saveFile()" title="Download file">
       <mat-icon>get_app</mat-icon>
     </button>
     <button mat-icon-button *ngIf="navigatorShare && navigatorCanShare" (click)="shareFile()" title="Share file">
       <mat-icon>share</mat-icon>
     </button>
-  </mat-list-item>
-</mat-list>
-<mat-expansion-panel *ngIf="data.file.known_urls?.length > 0">
-  <mat-expansion-panel-header>
-    Known URLs ({{data.file.known_urls.length}})
-  </mat-expansion-panel-header>
-
-  <mat-nav-list>
-    <mat-list-item *ngFor="let url of data.file.known_urls">
-      <a matLine [href]="url" target="_blank" rel="noopener noreferrer">{{ url }}</a>
-      <button mat-icon-button *ngIf="navigatorShare" (click)="shareUrl(url)">
-        <mat-icon>share</mat-icon>
+    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="More options">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <a mat-menu-item rel="noopener noreferrer" target="_blank" href="{{data.file.file_url}}">
+        <mat-icon>open_in_new</mat-icon>
+        <span>Open file in new tab</span>
+      </a>
+      <button mat-menu-item [cdkCopyToClipboard]="data.file.hash">
+        <mat-icon>content_copy</mat-icon>
+        <span>Copy SHA256 hash</span>
       </button>
+      <button mat-menu-item *ngIf="hyshareUrl" [cdkCopyToClipboard]="hyshareUrl + 'view/' + data.file.hash">
+        <mat-icon>link</mat-icon>
+        <span>Copy hyshare URL</span>
+      </button>
+    </mat-menu>
+  </div>
+</div>
+<div>
+  <mat-list role="list">
+    <mat-list-item role="listitem">
+      <mat-icon mat-list-icon>{{fileIcon}}</mat-icon>
+      <div mat-line>{{data.file.file_id}}</div>
+      <div mat-line class="metadata-line"><span>{{data.file.mime}}</span> <span *ngIf="data.file.width && data.file.height">{{data.file.width}}x{{data.file.height}}</span> <span>{{data.file.size | bytes: 2}}</span></div>
     </mat-list-item>
-  </mat-nav-list>
-</mat-expansion-panel>
-<br>
-
-<div *ngIf="tags && tags.length > 1">
-  <h3 class="mat-subheading-2">Tags</h3>
-  <mat-accordion multi>
-  <mat-expansion-panel *ngFor="let service of tags | orderBy: 'serviceName'" >
+    <mat-list-item role="listitem">
+      <mat-icon mat-list-icon>{{data.file.is_inbox ? "inbox" : data.file.is_trashed ? "delete" : "archive"}}</mat-icon>
+      <div mat-line>{{data.file.is_inbox ? "In Inbox" : data.file.is_trashed ? "In Trash" : "Archived"}}</div>
+    </mat-list-item>
+  </mat-list>
+  <mat-expansion-panel *ngIf="data.file.known_urls?.length > 0">
     <mat-expansion-panel-header>
-      {{service.serviceName}} ({{service.statuses[0].length}})
+      Known URLs ({{data.file.known_urls.length}})
     </mat-expansion-panel-header>
-    <ng-template matExpansionPanelContent>
-      <mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical" aria-label="File tags">
-        <mat-chip *ngFor="let tag of (service.statuses[0] | orderBy)" [selectable]="false" class="tag-chip" [ngClass]="tag | tagClass">
-          {{tag}}
-        </mat-chip>
-      </mat-chip-list>
-    </ng-template>
+
+    <mat-nav-list>
+      <mat-list-item *ngFor="let url of data.file.known_urls">
+        <a matLine [href]="url" target="_blank" rel="noopener noreferrer">{{ url }}</a>
+        <button mat-icon-button *ngIf="navigatorShare" (click)="shareUrl(url)">
+          <mat-icon>share</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-nav-list>
   </mat-expansion-panel>
-  </mat-accordion>
+  <br>
+
+  <div *ngIf="tags && tags.length > 1">
+    <h3 class="mat-subheading-2">Tags</h3>
+    <mat-accordion multi>
+    <mat-expansion-panel *ngFor="let service of tags | orderBy: 'serviceName'" >
+      <mat-expansion-panel-header>
+        {{service.serviceName}} ({{service.statuses[0].length}})
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent>
+        <mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical" aria-label="File tags">
+          <mat-chip *ngFor="let tag of (service.statuses[0] | orderBy)" [selectable]="false" class="tag-chip" [ngClass]="tag | tagClass">
+            {{tag}}
+          </mat-chip>
+        </mat-chip-list>
+      </ng-template>
+    </mat-expansion-panel>
+    </mat-accordion>
+  </div>
 </div>
diff --git a/src/app/file-info-sheet/file-info-sheet.component.scss b/src/app/file-info-sheet/file-info-sheet.component.scss
@@ -7,3 +7,11 @@
 .mat-list {
   padding-top: 0;
 }
+
+.sheet-title {
+  margin-top: 0;
+}
+
+.title-row {
+  margin-top: 8px;
+}
diff --git a/src/app/file-info-sheet/file-info-sheet.component.ts b/src/app/file-info-sheet/file-info-sheet.component.ts
@@ -5,6 +5,7 @@ import { HydrusFilesService } from '../hydrus-files.service';
 import { saveAs } from 'file-saver';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { tagsObjectFromFile } from '../utils/tag-utils';
+import { SettingsService } from '../settings.service';
 
 interface ShareData {
   title?: string;
@@ -32,7 +33,8 @@ export class FileInfoSheetComponent {
   constructor(
     @Inject(MAT_BOTTOM_SHEET_DATA) public data: {file: HydrusFile},
     private filesService: HydrusFilesService,
-    private snackbar: MatSnackBar
+    private snackbar: MatSnackBar,
+    public settings: SettingsService,
   ) { }
 
   tags = Object.entries(tagsObjectFromFile(this.data.file))
@@ -56,6 +58,11 @@ export class FileInfoSheetComponent {
   navigatorShare = navigator.share;
   navigatorCanShare = navigator.canShare;
 
+  hyshareUrl =
+    this.settings.appSettings.hyshareUrl && !this.settings.appSettings.hyshareUrl.endsWith('/')
+      ? `${this.settings.appSettings.hyshareUrl}/`
+      : this.settings.appSettings.hyshareUrl;
+
   shareUrl(url: string) {
     if (navigator.share) {
       navigator.share({

diff --git a/src/app/settings.service.ts b/src/app/settings.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from 'ngx-localstorage';
 import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
-import { AppSettings, defaultAppSettings } from './settings';
+import { AppSettings, AppSettingsStorage, defaultAppSettings } from './settings';
 
 @Injectable({
   providedIn: 'root'
@@ -17,8 +17,8 @@ export class SettingsService {
   public appSettings$: Observable<AppSettings>;
 
   constructor(private ls: LocalStorageService) {
-    const appSettingsFromStorage = ls.get(this.appSettingsKey) as AppSettings | null;
-    this._appSettings = {...defaultAppSettings, ...appSettingsFromStorage};
+    const {version, ...settings} = ls.get(this.appSettingsKey) as AppSettingsStorage | null || {};
+    this._appSettings = {...defaultAppSettings, ...settings};
     this._appSettings$ = new BehaviorSubject(this._appSettings);
     this.appSettings$ = this._appSettings$.asObservable();
     console.log(this.appSettings);
@@ -29,10 +29,14 @@ export class SettingsService {
     return this._appSettings;
   }
 
+  private async storeAppSettings(settings: AppSettingsStorage) {
+    return this.ls.asPromisable().set(this.appSettingsKey, settings);
+  }
+
   public async setAppSettings(newSettings: Partial<AppSettings>) {
     this._appSettings = {...defaultAppSettings, ...newSettings};
     this._appSettings$.next(this._appSettings);
-    return this.ls.asPromisable().set(this.appSettingsKey, this._appSettings);
+    this.storeAppSettings({version : 1, ...this._appSettings})
   }
 
 

diff --git a/src/app/settings.ts b/src/app/settings.ts
@@ -6,6 +6,7 @@ export interface AppSettingsV1 {
   browseSearchOnLoad: boolean;
   browseSearchWhenEmpty: boolean;
   browseDefaultSearchTags: HydrusSearchTags;
+  hyshareUrl: string;
 }
 
 export type AppSettingsStorage = AppSettingsV1;
@@ -14,5 +15,6 @@ export type AppSettings = Omit<AppSettingsStorage, "version">;
 export const defaultAppSettings: AppSettings = {
   browseSearchOnLoad: true,
   browseSearchWhenEmpty: true,
-  browseDefaultSearchTags: []
+  browseDefaultSearchTags: [],
+  hyshareUrl: ''
 }
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -23,6 +23,11 @@
         <mat-slide-toggle formControlName="browseSearchOnLoad" class="margin-bottom-16">Search immediately on the browse page</mat-slide-toggle>
         <mat-slide-toggle formControlName="browseSearchWhenEmpty" class="margin-bottom-16">Search with no tags entered</mat-slide-toggle>
         <app-tag-input formControlName="browseDefaultSearchTags" placeholder="Browse page default tags" class=""></app-tag-input>
+
+        <mat-form-field appearance="outline">
+          <mat-label>hyshare base URL</mat-label>
+          <input matInput type="url" autocomplete="off" formControlName="hyshareUrl" placeholder="https://my.hyshare.url/">
+        </mat-form-field>
         <div fxLayout="row wrap" fxLayoutAlign="end" class="">
 
           <button type="button" mat-icon-button [matMenuTriggerFor]="appSettingsSaveMenu">