Feature: Video upload

android/app/build.gradle

@@ -6,7 +6,7 @@ android {
         applicationId "de.reedu.origaminext"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 2
         versionName "0.22"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }

android/app/src/main/assets/capacitor.config.json

@@ -6,7 +6,8 @@
   "webDir": "www",
   "server": {
     "iosScheme": "https",
-    "androidScheme": "https"
+    "androidScheme": "https",
+    "url": "http://192.168.0.87:8100"
   },
   "ios": {
     "hideLogs": true

ios/App/App.xcodeproj/project.pbxproj

@@ -29,6 +29,8 @@
 		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = SOURCE_ROOT; };
 		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
+		DCD0FED425A4915A00CE032C /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = de; path = de.lproj/Main.strings; sourceTree = "<group>"; };
+		DCD0FED525A4915A00CE032C /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = de; path = de.lproj/LaunchScreen.strings; sourceTree = "<group>"; };
 		DCD30EDB2433A890007ABCBF /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
 		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -141,6 +143,7 @@
 			knownRegions = (
 				en,
 				Base,
+				de,
 			);
 			mainGroup = 504EC2FB1FED79650016851F;
 			productRefGroup = 504EC3051FED79650016851F /* Products */;
@@ -220,6 +223,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				504EC30C1FED79650016851F /* Base */,
+				DCD0FED425A4915A00CE032C /* de */,
 			);
 			name = Main.storyboard;
 			sourceTree = "<group>";
@@ -228,6 +232,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				504EC3111FED79650016851F /* Base */,
+				DCD0FED525A4915A00CE032C /* de */,
 			);
 			name = LaunchScreen.storyboard;
 			sourceTree = "<group>";
@@ -287,7 +292,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -342,7 +347,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";

ios/App/App/capacitor.config.json

@@ -6,7 +6,8 @@
   "webDir": "www",
   "server": {
     "iosScheme": "https",
-    "androidScheme": "https"
+    "androidScheme": "https",
+    "url": "http://192.168.0.87:8100"
   },
   "ios": {
     "hideLogs": true

src/app/pages/create-game/create-info-modal/create-info-modal.component.html

@@ -1,24 +1,24 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button color=dark (click)="dismissModal('close')">
+      <ion-button color="dark" (click)="dismissModal('close')">
         <ion-icon name="close"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>
-      <ion-icon name="information-circle-outline" color="warning"></ion-icon> Information
+      <ion-icon name="information-circle-outline" color="warning"></ion-icon>
+      Information
     </ion-title>
 
     <ion-buttons slot="end">
-      <ion-button color=dark (click)="dismissModal(null)">
+      <ion-button color="dark" (click)="dismissModal(null)">
         <ion-icon name="save"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding">
-
   <ion-card color="warning">
     <ion-card-content>
       <ion-icon name="help-circle"></ion-icon>
@@ -29,22 +29,31 @@
   <h5>Informationstext</h5>
 
   <ion-item>
-    <ion-textarea autoGrow placeholder=" (optional)" *ngIf="task" [(ngModel)]="task.question.text"></ion-textarea>
+    <ion-textarea
+      autoGrow
+      placeholder=" (optional)"
+      *ngIf="task"
+      [(ngModel)]="task.question.text"
+    ></ion-textarea>
   </ion-item>
 
   <h5>Audiobotschaft</h5>
 
-  <app-audio-recorder [(audioSource)]="task.question.audio"></app-audio-recorder>
+  <app-audio-recorder
+    [(audioSource)]="task.question.audio"
+  ></app-audio-recorder>
 
   <h5>Fotos und Grafiken</h5>
 
-  <app-photo-upload theme="warning" [(photo)]="task.question.photo"></app-photo-upload>
+  <app-photo-upload
+    theme="warning"
+    [(photo)]="task.question.photo"
+    [(video)]="task.question.video"
+  ></app-photo-upload>
 
   <h5>Weitere Einstellungen</h5>
 
   <ion-item detail lines="none" (click)="presentMapFeaturesModal()">
-    <ion-label>
-      Kartenfeatures
-    </ion-label>
+    <ion-label> Kartenfeatures </ion-label>
   </ion-item>
-</ion-content>
+</ion-content>

src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.html

@@ -7,20 +7,47 @@ <h5>{{ config.label }} <ion-icon name="information-circle" (click)='showPopover(
   <div class="photo-wrapper">
     <ion-thumbnail *ngIf="photo" class="preview">
       <ion-spinner *ngIf="uploading"></ion-spinner>
-      <img [src]="photo" [ngStyle]="{
-        filter: 'blur(' + ((100 - uploadingProgress) / 10) + 'px)'
-      }">
+      <img
+        [src]="photo"
+        [ngStyle]="{
+          filter: 'blur(' + (100 - uploadingProgress) / 10 + 'px)'
+        }"
+      />
     </ion-thumbnail>
-    <ion-button [color]="theme" size="default" (click)=capturePhoto(false)>
+    <ion-button [color]="theme" size="default" (click)="capturePhoto(false)">
       <ion-icon slot="icon-only" name="camera"></ion-icon>
     </ion-button>
-    <ion-button [color]="theme" size="default" (click)=capturePhoto(true)>
+    <ion-button [color]="theme" size="default" (click)="capturePhoto(true)">
       <ion-icon slot="icon-only" name="images"></ion-icon>
     </ion-button>
-    <ion-button *ngIf="photo" color="danger" size="default" (click)=deletePhoto()>
+
+    <ion-button [color]="theme" size="default" (click)="f.click()">
+      <ion-icon slot="icon-only" name="videocam-outline"></ion-icon>
+    </ion-button>
+    <input
+      class="ion-hide"
+      #f
+      type="file"
+      id="file-input"
+      (change)="handleVideoInput($event)"
+      accept="video/*"
+    />
+
+    <ion-button
+      *ngIf="photo"
+      color="danger"
+      size="default"
+      (click)="deletePhoto()"
+    >
       <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
     </ion-button>
   </div>
-
-
-</ng-container>
+  <div *ngIf="video">
+    <video controls>
+      <source [src]="video" />
+    </video>
+    <ion-button color="danger" size="default" (click)="deleteVideo()">
+      <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
+    </ion-button>
+  </div>
+</ng-container>

src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.scss

@@ -1,23 +1,28 @@
 .preview {
-    position: relative;
+  position: relative;
 
-    > ion-spinner {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
+  > ion-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 ion-thumbnail {
-    --size: 150px !important;
+  --size: 150px !important;
 }
 
 .photo-wrapper {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    img {
-        border-radius: 1rem;
-    }
+  img {
+    border-radius: 1rem;
+  }
+}
+
+video {
+  width: auto;
+  max-height: 200px;
 }

src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.ts

@@ -13,10 +13,12 @@ import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
 })
 export class PhotoUploadComponent implements OnInit {
   @Input() photo: SafeResourceUrl = '';
+  @Input() video: SafeResourceUrl = '';
   @Input() taskType = '';
   @Input() theme = 'secondary';
 
   @Output() photoChange: EventEmitter<any> = new EventEmitter<any>();
+  @Output() videoChange: EventEmitter<any> = new EventEmitter<any>();
 
   uploading = false
   uploadingProgress = 100;
@@ -37,6 +39,12 @@ export class PhotoUploadComponent implements OnInit {
     this.photoChange.emit(this.photo)
   }
 
+  deleteVideo() {
+    this.video = ''
+    this.changeRef.detectChanges();
+    this.videoChange.emit(this.video)
+  }
+
   async capturePhoto(library: boolean = false) {
     const cameraOptions = {
       quality: 50,
@@ -76,6 +84,31 @@ export class PhotoUploadComponent implements OnInit {
     this.photoChange.emit(this.photo)
   }
 
+  async handleVideoInput(event) {
+    const videoFile: File = event.target.files[0];
+
+    const formData = new FormData();
+    formData.append('file', videoFile);
+
+    const options = {
+      method: 'POST',
+      body: formData
+    };
+
+    const postResponse = await fetch(`${environment.apiURL}/file/upload`, options)
+
+    if (!postResponse.ok) {
+      throw Error('File upload failed')
+    }
+    this.uploading = false;
+
+    const postResponseText = await postResponse.json()
+    const filename = postResponseText.filename
+    this.video = `${environment.apiURL}/file/video/${filename}`
+    this.changeRef.detectChanges();
+    this.videoChange.emit(this.video)
+  }
+
   async showPopover(ev: any, text: string) {
     const popover = await this.popoverController.create({
       component: PopoverComponent,