Implemented Video Upload and Player (#2)

* Implementing video upload features

* setup image resize processor

* Add video thumbnail with duration and icon

* Fixed issue with video upload timeout and upper case file type on ios

* Added video player page

* Added video player page

* Fixing video player not play on ios

* Added partial file streaming for ios/android video request

* Added nginx as proxy server for better file serving

* update nginx and docker-compose file

* Video player working correctly

* Video player working correctly

* Split duration to the second

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

@@ -9,10 +9,10 @@ import {
   Param,
   ValidationPipe,
   StreamableFile,
-  Response,
   Query,
-  Logger,
-  UploadedFile,
+  Response,
+  Headers,
+  BadRequestException,
 } from '@nestjs/common';
 import { JwtAuthGuard } from '../../modules/immich-jwt/guards/jwt-auth.guard';
 import { AssetService } from './asset.service';
@@ -22,16 +22,22 @@ import { AuthUserDto, GetAuthUser } from '../../decorators/auth-user.decorator';
 import { CreateAssetDto } from './dto/create-asset.dto';
 import { createReadStream } from 'fs';
 import { ServeFileDto } from './dto/serve-file.dto';
-import { ImageOptimizeService } from '../../modules/image-optimize/image-optimize.service';
+import { AssetOptimizeService } from '../../modules/image-optimize/image-optimize.service';
 import { AssetType } from './entities/asset.entity';
 import { GetAllAssetQueryDto } from './dto/get-all-asset-query.dto';
+import { Response as Res } from 'express';
+import { promisify } from 'util';
+import { stat } from 'fs';
+import { pipeline } from 'stream';
+
+const fileInfo = promisify(stat);
 
 @UseGuards(JwtAuthGuard)
 @Controller('asset')
 export class AssetController {
   constructor(
     private readonly assetService: AssetService,
-    private readonly imageOptimizeService: ImageOptimizeService,
+    private readonly assetOptimizeService: AssetOptimizeService,
   ) {}
 
   @Post('upload')
@@ -45,7 +51,11 @@ export class AssetController {
       const savedAsset = await this.assetService.createUserAsset(authUser, assetInfo, file.path, file.mimetype);
 
       if (savedAsset && savedAsset.type == AssetType.IMAGE) {
-        await this.imageOptimizeService.resizeImage(savedAsset);
+        await this.assetOptimizeService.resizeImage(savedAsset);
+      }
+
+      if (savedAsset && savedAsset.type == AssetType.VIDEO) {
+        await this.assetOptimizeService.getVideoThumbnail(savedAsset, file.originalname);
       }
     });
 
@@ -54,23 +64,81 @@ export class AssetController {
 
   @Get('/file')
   async serveFile(
+    @Headers() headers,
     @GetAuthUser() authUser: AuthUserDto,
-    @Response({ passthrough: true }) res,
+    @Response({ passthrough: true }) res: Res,
     @Query(ValidationPipe) query: ServeFileDto,
   ): Promise<StreamableFile> {
     let file = null;
     const asset = await this.assetService.findOne(authUser, query.did, query.aid);
-    res.set({
-      'Content-Type': asset.mimeType,
-    });
 
-    if (query.isThumb === 'false' || !query.isThumb) {
-      file = createReadStream(asset.originalPath);
-    } else {
-      file = createReadStream(asset.resizePath);
+    // Handle Sending Images
+    if (asset.type == AssetType.IMAGE || query.isThumb == 'true') {
+      res.set({
+        'Content-Type': asset.mimeType,
+      });
+
+      if (query.isThumb === 'false' || !query.isThumb) {
+        file = createReadStream(asset.originalPath);
+      } else {
+        file = createReadStream(asset.resizePath);
+      }
+
+      return new StreamableFile(file);
+    } else if (asset.type == AssetType.VIDEO) {
+      // Handle Handling Video
+      const { size } = await fileInfo(asset.originalPath);
+      const range = headers.range;
+
+      if (range) {
+        /** Extracting Start and End value from Range Header */
+        let [start, end] = range.replace(/bytes=/, '').split('-');
+        start = parseInt(start, 10);
+        end = end ? parseInt(end, 10) : size - 1;
+
+        if (!isNaN(start) && isNaN(end)) {
+          start = start;
+          end = size - 1;
+        }
+        if (isNaN(start) && !isNaN(end)) {
+          start = size - end;
+          end = size - 1;
+        }
+
+        // Handle unavailable range request
+        if (start >= size || end >= size) {
+          console.error('Bad Request');
+          // Return the 416 Range Not Satisfiable.
+          res.status(416).set({
+            'Content-Range': `bytes */${size}`,
+          });
+
+          throw new BadRequestException('Bad Request Range');
+        }
+
+        /** Sending Partial Content With HTTP Code 206 */
+        console.log('Sendinf file with type ', asset.mimeType);
+
+        res.status(206).set({
+          'Content-Range': `bytes ${start}-${end}/${size}`,
+          'Accept-Ranges': 'bytes',
+          'Content-Length': end - start + 1,
+          'Content-Type': asset.mimeType,
+        });
+
+        const videoStream = createReadStream(asset.originalPath, { start: start, end: end });
+
+        return new StreamableFile(videoStream);
+      } else {
+        res.set({
+          'Content-Type': asset.mimeType,
+        });
+
+        return new StreamableFile(createReadStream(asset.originalPath));
+      }
     }
 
-    return new StreamableFile(file);
+    console.log('SHOULD NOT BE HERE');
   }
 
   @Get('/all')

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

@@ -4,13 +4,13 @@ import { AssetController } from './asset.controller';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { AssetEntity } from './entities/asset.entity';
 import { ImageOptimizeModule } from '../../modules/image-optimize/image-optimize.module';
-import { ImageOptimizeService } from '../../modules/image-optimize/image-optimize.service';
+import { AssetOptimizeService } from '../../modules/image-optimize/image-optimize.service';
 import { BullModule } from '@nestjs/bull';
 
 @Module({
   imports: [
     BullModule.registerQueue({
-      name: 'image',
+      name: 'optimize',
       defaultJobOptions: {
         attempts: 3,
         removeOnComplete: true,
@@ -29,7 +29,7 @@ import { BullModule } from '@nestjs/bull';
     ImageOptimizeModule,
   ],
   controllers: [AssetController],
-  providers: [AssetService, ImageOptimizeService],
+  providers: [AssetService, AssetOptimizeService],
   exports: [],
 })
 export class AssetModule {}

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

@@ -26,9 +26,9 @@ export class AssetService {
     asset.createdAt = assetInfo.createdAt;
     asset.modifiedAt = assetInfo.modifiedAt;
     asset.isFavorite = assetInfo.isFavorite;
-    asset.lat = assetInfo.lat;
-    asset.lon = assetInfo.lon;
     asset.mimeType = mimeType;
+    asset.duration = assetInfo.duration;
+
     try {
       const res = await this.assetRepository.save(asset);
 
@@ -63,7 +63,7 @@ export class AssetService {
           lastQueryCreatedAt: query.nextPageKey || new Date().toISOString(),
         })
         .orderBy('a."createdAt"::date', 'DESC')
-        .take(10000)
+        // .take(500)
         .getMany();
 
       if (assets.length > 0) {

server/src/api-v1/asset/dto/create-asset.dto.ts

@@ -24,8 +24,5 @@ export class CreateAssetDto {
   fileExtension: string;
 
   @IsOptional()
-  lat: string;
-
-  @IsOptional()
-  lon: string;
+  duration: string;
 }

server/src/api-v1/asset/entities/asset.entity.ts

@@ -33,17 +33,11 @@ export class AssetEntity {
   @Column({ type: 'boolean', default: false })
   isFavorite: boolean;
 
-  @Column({ nullable: true })
-  description: string;
-
-  @Column({ nullable: true })
-  lat: string;
-
-  @Column({ nullable: true })
-  lon: string;
-
   @Column({ nullable: true })
   mimeType: string;
+
+  @Column({ nullable: true })
+  duration: string;
 }
 
 export enum AssetType {