feat(claim_photo): added videos

back/methods/dms/uploadFile.js

@@ -49,7 +49,7 @@ module.exports = Self => {
     Self.uploadFile = async(ctx, options) => {
         const models = Self.app.models;
         const TempContainer = models.TempContainer;
-        const DmsContainer = models.DmsContainer;
+        const DmsContainer = models.ClaimContainer;
         const fileOptions = {};
         const args = ctx.args;
 

loopback/server/datasources.json

@@ -38,7 +38,8 @@
             "multipart/x-zip",
             "image/png",
             "image/jpeg",
-            "image/jpg"
+            "image/jpg",
+            "video/mp4"
         ]
     },
     "dmsStorage": {
@@ -58,7 +59,8 @@
             "multipart/x-zip",
             "image/png",
             "image/jpeg",
-            "image/jpg"
+            "image/jpg",
+            "video/mp4"
         ]
     },
     "imageStorage": {
@@ -83,5 +85,18 @@
             "application/octet-stream",
             "application/pdf"
         ]
+    },
+    "claimStorage": {
+        "name": "claimStorage",
+        "connector": "loopback-component-storage",
+        "provider": "filesystem",
+        "root": "./storage/claim",
+        "maxFileSize": "31457280",
+        "allowedContentTypes": [
+            "image/png",
+            "image/jpeg",
+            "image/jpg",
+            "video/mp4"
+        ]
     }
 }

modules/claim/back/model-config.json

@@ -37,5 +37,8 @@
     },
     "ClaimLog": {
         "dataSource": "vn"
+    },
+    "ClaimContainer": {
+        "dataSource": "claimStorage"
     }               
 }

modules/claim/back/models/claim-container.json

@@ -0,0 +1,10 @@
+{
+    "name": "ClaimContainer",
+    "base": "Container",
+    "acls": [{
+        "accessType": "READ",
+        "principalType": "ROLE",
+        "principalId": "$everyone",
+        "permission": "ALLOW"
+    }]
+}

modules/claim/front/photos/index.html

@@ -1,6 +1,7 @@
 <vn-crud-model
     vn-id="model"
     auto-load="true"
+    filter="::$ctrl.filter"
     url="ClaimDms"
     link="{claimFk: $ctrl.$params.id}"
     limit="20"
@@ -14,8 +15,12 @@
     <section class="photo" ng-repeat="photo in $ctrl.photos">
         <section class="image vn-shadow" on-error-src 
             ng-style="{'background': 'url(' + $ctrl.getImagePath(photo.dmsFk) + ')'}"
-            zoom-image="{{$ctrl.getImagePath(photo.dmsFk)}}">
+            zoom-image="{{$ctrl.getImagePath(photo.dmsFk)}}"
+            ng-if="photo.dms.contentType == 'image/jpeg'">
         </section>
+        <video id="videobcg" class="video vn-shadow" muted="muted" controls ng-if="photo.dms.contentType == 'video/mp4'">
+            <source class="video vn-shadow" src="{{$ctrl.getImagePath(photo.dmsFk)}}" type="video/mp4">
+        </video>
         <section class="actions">
             <vn-button
                 class="round"

modules/claim/front/photos/index.js

@@ -6,6 +6,13 @@ class Controller extends Section {
     constructor($element, $, vnFile) {
         super($element, $);
         this.vnFile = vnFile;
+        this.filter = {
+            include: [
+                {
+                    relation: 'dms'
+                }
+            ]
+        };
     }
 
     deleteDms(index) {
@@ -87,7 +94,7 @@ class Controller extends Section {
     }
 
     getImagePath(dmsId) {
-        return this.vnFile.getPath(`/api/dms/${dmsId}/downloadFile`);
+        return this.vnFile.getPath(`/api/claim/${dmsId}/downloadFile`);
     }
 }
 

modules/claim/front/photos/style.scss

@@ -29,4 +29,21 @@ vn-claim-photos {
             height: 288px;
         }
     }
+
+    .video {
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+                    0 3px 1px -2px rgba(0,0,0,.2),
+                    0 1px 5px 0 rgba(0,0,0,.12);
+        background: no-repeat center center fixed;
+        background-size: cover !important;
+        border: 2px solid transparent;
+        overflow: hidden;
+        cursor: pointer;
+        height: 100%;
+        width: 100%
+
+        source {
+            
+        }
+    }
 }