Media Previews (#11888)

Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Mads Rasmussen <[email protected]>
Co-authored-by: Paul Johnson <[email protected]>

Author: 3 people

.github/config/codeql-config.yml

@@ -5,3 +5,4 @@ paths:
 
 paths-ignore:
   - '**/node_modules'
+  - 'src/Umbraco.Web.UI/wwwroot'

.github/workflows/codeql-analysis.yml

@@ -22,8 +22,8 @@ jobs:
       with:
         config-file: ./.github/config/codeql-config.yml
 
-    - name: Build
-      run: dotnet build umbraco-netcore-only.sln # also runs npm build
+    - name: dotnet build
+      run: dotnet build umbraco-netcore-only.sln
 
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v1

src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js

@@ -134,7 +134,7 @@ function dependencies() {
                 "./node_modules/angular-messages/angular-messages.min.js.map"
             ],
             "base": "./node_modules/angular-messages"
-        },        
+        },
         {
             "name": "angular-mocks",
             "src":  ["./node_modules/angular-mocks/angular-mocks.js"],
@@ -285,11 +285,11 @@ function dependencies() {
     // add streams for node modules
     nodeModules.forEach(module => {
         var task = gulp.src(module.src, { base: module.base, allowEmpty: true });
-        
+
         _.forEach(config.roots, function(root){
             task = task.pipe(gulp.dest(root + config.targets.lib + "/" + module.name))
         });
-        
+
         stream.add(task);
     });
 
@@ -299,12 +299,12 @@ function dependencies() {
     _.forEach(config.roots, function(root){
         libTask = libTask.pipe(gulp.dest(root + config.targets.lib))
     });
-    
+
     stream.add(libTask);
 
     //Copies all static assets into /root / assets folder
     //css, fonts and image files
-    
+
     var assetsTask = gulp.src(config.sources.globs.assets, { allowEmpty: true });
     assetsTask = assetsTask.pipe(imagemin([
         imagemin.gifsicle({interlaced: true}),
@@ -321,8 +321,8 @@ function dependencies() {
     _.forEach(config.roots, function(root){
         assetsTask = assetsTask.pipe(gulp.dest(root + config.targets.assets));
     });
-   
-    
+
+
     stream.add(assetsTask);
 
     // Copies all the less files related to the preview into their folder
@@ -342,13 +342,13 @@ function dependencies() {
         configTask = configTask.pipe(gulp.dest(root + config.targets.views + "/propertyeditors/grid/config"));
     });
     stream.add(configTask);
-    
+
     var dashboardTask = gulp.src("src/views/dashboard/default/*.jpg", { allowEmpty: true });
     _.forEach(config.roots, function(root){
         dashboardTask = dashboardTask .pipe(gulp.dest(root + config.targets.views + "/dashboard/default"));
     });
     stream.add(dashboardTask);
-  
+
     return stream;
 };
 

src/Umbraco.Web.UI.Client/gulpfile.js

@@ -31,6 +31,8 @@ const coreBuild = parallel(dependencies, js, less, views);
 // ***********************************************************
 
 exports.build = series(coreBuild, testUnit);
+exports.buildDev = series(setDevelopmentMode, coreBuild);
+
 exports.coreBuild = coreBuild;
 exports.dev = series(setDevelopmentMode, coreBuild, runUnitTestServer, watchTask);
 exports.watch = series(watchTask);

src/Umbraco.Web.UI.Client/package.json

@@ -7,6 +7,7 @@
     "e2e": "gulp testE2e",
     "build": "gulp build",
     "build:skip-tests": "gulp coreBuild",
+    "build:dev": "gulp buildDev",
     "dev": "gulp dev",
     "fastdev": "gulp fastdev",
     "watch": "gulp watch"

src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js

@@ -117,12 +117,11 @@
                 vm.files = _.map(files, function (file) {
                     var f = {
                         fileName: file,
+                        fileSrc: file,
                         isImage: mediaHelper.detectIfImageByExtension(file),
                         extension: getExtension(file)
                     };
 
-                    f.fileSrc = getThumbnail(f);
-
                     return f;
                 });
 
@@ -190,21 +189,6 @@
             }
         }
 
-        function getThumbnail(file) {
-
-            if (file.extension === 'svg') {
-                return file.fileName;
-            }
-
-            if (!file.isImage) {
-                return null;
-            }
-
-            var thumbnailUrl = mediaHelper.getThumbnailFromPath(file.fileName);
-
-            return thumbnailUrl;
-        }
-
         function getExtension(fileName) {
             var extension = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length);
             return extension.toLowerCase();
@@ -238,7 +222,8 @@
                     isImage: isImage,
                     extension: extension,
                     fileName: files[i].name,
-                    isClientSide: true
+                    isClientSide: true,
+                    fileData: files[i]
                 };
 
                 // Save the file object to the files collection
@@ -247,6 +232,7 @@
                 //special check for a comma in the name
                 newVal += files[i].name.split(',').join('-') + ",";
 
+                // TODO: I would love to remove this part. But I'm affright it would be breaking if removed. Its not used by File upload anymore as each preview handles the client-side data on their own.
                 if (isImage || extension === "svg") {
 
                     var deferred = $q.defer();

src/Umbraco.Web.UI.Client/src/common/services/mediapreview.service.js

@@ -0,0 +1,94 @@
+/**
+* @ngdoc service
+* @name umbraco.services.mediaPreview
+* @description A service providing views used for dealing with previewing files.
+*
+* ##usage
+* The service allows for registering and retrieving the view for one or more file extensions.
+*
+* You can register your own custom view in this way:
+*
+* <pre>
+*    angular.module('umbraco').run(['mediaPreview', function (mediaPreview) {
+*        mediaPreview.registerPreview(['docx'], "app_plugins/My_PACKAGE/preview.html");
+*    }]);
+* </pre>
+*
+* Here is a example of a preview template. (base on the audio-preview).
+*
+* <pre>
+*   <audio ng-if="vm.clientSide" name="{{vm.name}}" controls>
+*     <source ng-init="previewUrl = URL.createObjectURL(vm.clientSideData)" ng-src="{{previewUrl}}"/>
+*    </audio>
+*    <audio ng-if="!vm.clientSide" name="{{vm.name}}" controls>
+*      <source ng-src="{{vm.source}}" />
+*    </audio>
+* </pre>
+*
+* Notice that there often is a need to differentiate based on the file-data origin. In the state of the file still begin located locally its often needed to create an Object-URL for the data to be useable in HTML. As well you might want to provide links for the uploaded file when it is uploaded to the server. See 'vm.clientSide' and 'vm.clientSideData'.
+*
+**/
+function mediaPreview() {
+
+    const DEFAULT_FILE_PREVIEW = "views/components/media/umbfilepreview/umb-file-preview.html";
+
+    var _mediaPreviews = [];
+
+    function init(service) {
+        service.registerPreview(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes.split(","), "views/components/media/umbimagepreview/umb-image-preview.html");
+        service.registerPreview(["svg"], "views/components/media/umbimagepreview/umb-image-preview.html");
+        service.registerPreview(["mp4", "mov", "webm", "ogv"], "views/components/media/umbvideopreview/umb-video-preview.html");
+        service.registerPreview(["mp3", "weba", "oga", "opus"], "views/components/media/umbaudiopreview/umb-audio-preview.html");
+    }
+
+    var service = {
+
+        /**
+        * @ngdoc method
+        * @name umbraco.services.mediaPreview#getMediaPreview
+        * @methodOf umbraco.services.mediaPreview
+        *
+        * @param {string} fileExtension A string with the file extension, example: "pdf"
+        *
+        * @description
+        * The registered view matching this file extensions will be returned.
+        *
+        */
+        getMediaPreview: function (fileExtension) {
+
+            fileExtension = fileExtension.toLowerCase();
+
+            var previewObject = _mediaPreviews.find((preview) => preview.fileExtensions.indexOf(fileExtension) !== -1);
+
+            if(previewObject !== undefined) {
+                return previewObject.view;
+            }
+
+            return DEFAULT_FILE_PREVIEW;
+        },
+
+        /**
+        * @ngdoc method
+        * @name umbraco.services.mediaPreview#registerPreview
+        * @methodOf umbraco.services.mediaPreview
+        *
+        * @param {array} fileExtensions An array of file extensions, example: ["pdf", "jpg"]
+        * @param {array} view A URL to the view to be used for these file extensions.
+        *
+        * @description
+        * The registered view will be used when file extensions match the given file.
+        *
+        */
+        registerPreview: function (fileExtensions, view) {
+            _mediaPreviews.push({
+                fileExtensions: fileExtensions.map(e => e.toLowerCase()),
+                view: view
+            })
+        }
+
+    };
+
+    init(service);
+
+    return service;
+} angular.module('umbraco.services').factory('mediaPreview', mediaPreview);

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -202,6 +202,11 @@
 @import "components/contextdialogs/umb-dialog-datatype-delete.less";
 
 @import "components/umbemailmarketing.less";
+@import "../views/components/media/umbmediapreview/umb-media-preview.less";
+@import "../views/components/media/umbaudiopreview/umb-audio-preview.less";
+@import "../views/components/media/umbfilepreview/umb-file-preview.less";
+@import "../views/components/media/umbimagepreview/umb-image-preview.less";
+@import "../views/components/media/umbvideopreview/umb-video-preview.less";
 
 // Editors
 @import "../views/common/infiniteeditors/rollback/rollback.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-property-file-upload.less

@@ -38,4 +38,8 @@
             border-color: @gray-1;
         }
     }
+
+    .umb-property-file-upload--actions {
+        margin-top: 10px;
+    }
 }

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -828,11 +828,15 @@
 .umb-fileupload {
     display: flex;
     flex-direction: column;
+    padding: 20px;
+    border: 1px solid @inputBorder;
+    box-sizing: border-box;
+    width: 100%;
+    .umb-property-editor--limit-width();
 }
 
 .umb-fileupload .preview {
   border-radius: 5px;
-  border: 1px solid @gray-6;
   padding: 3px;
   background: @gray-9;
   float: left;