[WEB] View large images on web (#189)

* Added selection icon to thumbnail

* Added micro-interaction and video file indication

* Added page to add page

* Added image viewer

* navigate assets

* Added separate component for viewing the video file

* Added FFmpeg modules

* Added correct content-type header for serving image file

* Added loading spinner

server/src/api-v1/asset/asset.controller.ts

@@ -39,7 +39,7 @@ export class AssetController {
     private wsCommunicateionGateway: CommunicationGateway,
     private assetService: AssetService,
     private backgroundTaskService: BackgroundTaskService,
-  ) {}
+  ) { }
 
   @Post('upload')
   @UseInterceptors(

server/src/api-v1/asset/asset.service.ts

@@ -1,19 +1,16 @@
 import { BadRequestException, Injectable, Logger, StreamableFile } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { MoreThan, Repository } from 'typeorm';
+import { Repository } from 'typeorm';
 import { AuthUserDto } from '../../decorators/auth-user.decorator';
 import { CreateAssetDto } from './dto/create-asset.dto';
 import { AssetEntity, AssetType } from './entities/asset.entity';
 import _ from 'lodash';
-import { GetAllAssetQueryDto } from './dto/get-all-asset-query.dto';
-import { GetAllAssetReponseDto } from './dto/get-all-asset-response.dto';
 import { createReadStream, stat } from 'fs';
 import { ServeFileDto } from './dto/serve-file.dto';
 import { Response as Res } from 'express';
 import { promisify } from 'util';
 import { DeleteAssetDto } from './dto/delete-asset.dto';
 import { SearchAssetDto } from './dto/search-asset.dto';
-import path from 'path';
 
 const fileInfo = promisify(stat);
 
@@ -124,21 +121,43 @@ export class AssetService {
   public async serveFile(authUser: AuthUserDto, query: ServeFileDto, res: Res, headers: any) {
     let file = null;
     const asset = await this.findOne(query.did, query.aid);
+
     if (!asset) {
       throw new BadRequestException('Asset does not exist');
     }
+
+
     // Handle Sending Images
     if (asset.type == AssetType.IMAGE || query.isThumb == 'true') {
-      res.set({
-        'Content-Type': asset.mimeType,
-      });
+      /**
+       * Serve file viewer on the web
+       */
+      if (query.isWeb) {
+        res.set({
+          'Content-Type': 'image/jpeg',
+        });
+        return new StreamableFile(createReadStream(asset.resizePath));
+      }
 
+
+      /**
+       * Serve thumbnail image for both web and mobile app
+       */
       if (query.isThumb === 'false' || !query.isThumb) {
+        res.set({
+          'Content-Type': asset.mimeType,
+        });
         file = createReadStream(asset.originalPath);
       } else {
         if (asset.webpPath != '') {
+          res.set({
+            'Content-Type': 'image/webp',
+          });
           file = createReadStream(asset.webpPath);
         } else {
+          res.set({
+            'Content-Type': 'image/jpeg',
+          });
           file = createReadStream(asset.resizePath);
         }
       }
@@ -147,9 +166,11 @@ export class AssetService {
         Logger.log(`Cannot create read stream ${error}`);
         return new BadRequestException('Cannot Create Read Stream');
       });
+
       return new StreamableFile(file);
+
     } else if (asset.type == AssetType.VIDEO) {
-      // Handle Handling Video
+      // Handle Video
       const { size } = await fileInfo(asset.originalPath);
       const range = headers.range;
 
@@ -191,6 +212,8 @@ export class AssetService {
         const videoStream = createReadStream(asset.originalPath, { start: start, end: end });
 
         return new StreamableFile(videoStream);
+
+
       } else {
         res.set({
           'Content-Type': asset.mimeType,

server/src/api-v1/asset/dto/serve-file.dto.ts

@@ -13,4 +13,8 @@ export class ServeFileDto {
   @IsOptional()
   @IsBooleanString()
   isThumb: string;
+
+  @IsOptional()
+  @IsBooleanString()
+  isWeb: string;
 }