Media Picker v3 (#9461)

* set input file accept

* Use PreValue file extensions for limiting the files to be chosen in file input

* Current state for Warren to review

* This should fix up what you need Niels

* update csproj

* use empty string if fileExtensions is undefined

* public interface

* initial work

* local crops

* translations

* translation correction

* fix misspeling

* some progress

* filter media picker

* align media card grid items correctly

* responsive media cropper

* always be able to scale 3 times smallest scale

* making image cropper property editor responsive

* scroll to scale

* adjust slider look

* rearrange parts of mediaentryeditor

* test helper

* styling

* move controls inside umb-image-crop

* seperate umg-cropper-gravity styling

* corrected layout

* more ui refinement

* keep the idea of mandatory out for now.

* remove double ;

* removed testing code

* JSON Property Value Convertor now has an array of property editors to exclude

* Property Value Convertor for Media Picker 3 aka Media Picker with Local Crops

* Experimenting on best approach to retrieve local crop in razor view when iterating over picked media items

* Update ValueConvertor to use ImageCropperValue as part of the model for views as alot of existing CropUrls can then use it

* Update extension methods to take an ImageCropperValue model (localCropData)

* Forgot to update CSProj for new ValueConvertor

* New GetCropUrl @Url.GetCropUrl(crop.Alias, media.LocalCrops) as oppposed to @Url.GetCropUrl(media.LocalCrops, cropAlias:crop.Alias, useCropDimensions: true)

* Remove dupe item in CSProj

* Use a contains as an opposed to Array.IndexOf

* various corrections, SingleMode based on max 1, remove double checkerBackground, enforce validation for Crops, changed error indication

* mediapicker v3

* correct version

* fixing file ext label text color

* clipboard features for MediaPicker v3

* highlight not allowed types

* highlight trashed as an error

* Media Types Video, Sound, Document and Vector Image

* Rename to Audio and VectorGraphics

* Add (SVG) in the name for Vector Graphics

* adding CSV to Documents

* remove this commented code.

* remove this commented code

* number range should not go below 0, at-least as default until we make that configurable.

* use min not ng-min

* description for local crops

* Error/Limits highlighting reactive

* visual adjustments

* Enabling opening filtered folders + corrected select hover states

* Varous fixes to resolve issues with unit tests.

* Refactor MediaType Documents to only contain Article file type

* mark as build-in

* predefined MediaPicker3 DataTypes, renaming v2 to "old"

* set scale bar current value after min and max has been set

* added missing }

* update when focal point is dragged

* adjusted styling for Image Cropper property editor

* correcting comment

* remove todo - message for trashed media items works

* Changed parameter ordering

* Introduced new extension method on MediaWithCrops to get croppings urls in with full path

* Reintroducing Single Item Mode

* use Multiple instead of SingleMode

* renaming and adding multiple to preconfigured datatypes

* Change existing media picker to use the Clipboard type MEDIA, enabling shared functionality.

* clean up unused clipboard parts

* adjusted to new amount

* correcting test

* Fix unit test

* Move MediaWithCrops to separate file and move to Core.Models

* parseContentForPaste

* clean up

* ensure crops is an array.

* actively enable focal points, so we dont set focal points that aren't used.

* only accept files that matches file extensions from Umbraco Settings

* Cleanup

* Add references from MediaPicker3 to media

* corrections from various feedback

* remove comment

* correct wording

* use windowResizeListener

Co-authored-by: Warren Buckley <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Mads Rasmussen <[email protected]>
Co-authored-by: Andy Butland <[email protected]>
Co-authored-by: Bjarke Berg <[email protected]>
Co-authored-by: Sebastiaan Janssen <[email protected]>
Co-authored-by: Elitsa Marinovska <[email protected]>

src/Umbraco.Core/Constants-Conventions.cs

@@ -118,6 +118,26 @@ public static class MediaTypes
                 /// </summary>
                 public const string Image = "Image";
 
+                /// <summary>
+                /// MediaType alias for a video.
+                /// </summary>
+                public const string Video = "Video";
+
+                /// <summary>
+                /// MediaType alias for an audio.
+                /// </summary>
+                public const string Audio = "Audio";
+
+                /// <summary>
+                /// MediaType alias for an article.
+                /// </summary>
+                public const string Article = "Article";
+
+                /// <summary>
+                /// MediaType alias for vector graphics.
+                /// </summary>
+                public const string VectorGraphics = "VectorGraphics";
+
                 /// <summary>
                 /// MediaType alias indicating allowing auto-selection.
                 /// </summary>

src/Umbraco.Core/Constants-DataTypes.cs

@@ -25,6 +25,10 @@ public static class DataTypes
             public const int DropDownSingle = -39;
             public const int DropDownMultiple = -42;
             public const int Upload = -90;
+            public const int UploadVideo = -100;
+            public const int UploadAudio = -101;
+            public const int UploadArticle = -102;
+            public const int UploadVectorGraphics = -103;
 
             public const int DefaultContentListView = -95;
             public const int DefaultMediaListView = -96;
@@ -42,7 +46,7 @@ public static class ReservedPreValueKeys
             /// Defines the identifiers for Umbraco data types as constants for easy centralized access/management.
             /// </summary>
             public static class Guids
-            {   
+            {
 
                 /// <summary>
                 /// Guid for Content Picker as string
@@ -88,6 +92,49 @@ public static class Guids
                 public static readonly Guid MultipleMediaPickerGuid = new Guid(MultipleMediaPicker);
 
 
+                /// <summary>
+                /// Guid for Media Picker v3 as string
+                /// </summary>
+                public const string MediaPicker3 = "4309A3EA-0D78-4329-A06C-C80B036AF19A";
+
+                /// <summary>
+                /// Guid for Media Picker v3
+                /// </summary>
+                public static readonly Guid MediaPicker3Guid = new Guid(MediaPicker3);
+
+                /// <summary>
+                /// Guid for Media Picker v3 multiple as string
+                /// </summary>
+                public const string MediaPicker3Multiple = "1B661F40-2242-4B44-B9CB-3990EE2B13C0";
+
+                /// <summary>
+                /// Guid for Media Picker v3 multiple
+                /// </summary>
+                public static readonly Guid MediaPicker3MultipleGuid = new Guid(MediaPicker3Multiple);
+
+
+                /// <summary>
+                /// Guid for Media Picker v3 single-image as string
+                /// </summary>
+                public const string MediaPicker3SingleImage = "AD9F0CF2-BDA2-45D5-9EA1-A63CFC873FD3";
+
+                /// <summary>
+                /// Guid for Media Picker v3 single-image
+                /// </summary>
+                public static readonly Guid MediaPicker3SingleImageGuid = new Guid(MediaPicker3SingleImage);
+
+
+                /// <summary>
+                /// Guid for Media Picker v3 multi-image as string
+                /// </summary>
+                public const string MediaPicker3MultipleImages = "0E63D883-B62B-4799-88C3-157F82E83ECC";
+
+                /// <summary>
+                /// Guid for Media Picker v3 multi-image
+                /// </summary>
+                public static readonly Guid MediaPicker3MultipleImagesGuid = new Guid(MediaPicker3MultipleImages);
+
+
                 /// <summary>
                 /// Guid for Related Links as string
                 /// </summary>
@@ -307,6 +354,46 @@ public static class Guids
                 /// </summary>
                 public static readonly Guid UploadGuid = new Guid(Upload);
 
+                /// <summary>
+                /// Guid for UploadVideo as string
+                /// </summary>
+                public const string UploadVideo = "70575fe7-9812-4396-bbe1-c81a76db71b5";
+
+                /// <summary>
+                /// Guid for UploadVideo
+                /// </summary>
+                public static readonly Guid UploadVideoGuid = new Guid(UploadVideo);
+
+                /// <summary>
+                /// Guid for UploadAudio as string
+                /// </summary>
+                public const string UploadAudio = "8f430dd6-4e96-447e-9dc0-cb552c8cd1f3";
+
+                /// <summary>
+                /// Guid for UploadAudio
+                /// </summary>
+                public static readonly Guid UploadAudioGuid = new Guid(UploadAudio);
+
+                /// <summary>
+                /// Guid for UploadArticle as string
+                /// </summary>
+                public const string UploadArticle = "bc1e266c-dac4-4164-bf08-8a1ec6a7143d";
+
+                /// <summary>
+                /// Guid for UploadArticle
+                /// </summary>
+                public static readonly Guid UploadArticleGuid = new Guid(UploadArticle);
+
+                /// <summary>
+                /// Guid for UploadVectorGraphics as string
+                /// </summary>
+                public const string UploadVectorGraphics = "215cb418-2153-4429-9aef-8c0f0041191b";
+
+                /// <summary>
+                /// Guid for UploadVectorGraphics
+                /// </summary>
+                public static readonly Guid UploadVectorGraphicsGuid = new Guid(UploadVectorGraphics);
+
 
                 /// <summary>
                 /// Guid for Label as string
@@ -367,8 +454,8 @@ public static class Guids
                 /// Guid for Label decimal
                 /// </summary>
                 public static readonly Guid LabelDecimalGuid = new Guid(LabelDecimal);
-                
-                
+
+
             }
         }
     }

src/Umbraco.Core/Constants-Icons.cs

@@ -59,6 +59,26 @@ public static class Icons
             /// </summary>
             public const string MediaFile = "icon-document";
 
+            /// <summary>
+            /// System media video icon
+            /// </summary>
+            public const string MediaVideo = "icon-video";
+
+            /// <summary>
+            /// System media audio icon
+            /// </summary>
+            public const string MediaAudio = "icon-sound-waves";
+
+            /// <summary>
+            /// System media article icon
+            /// </summary>
+            public const string MediaArticle = "icon-article";
+
+            /// <summary>
+            /// System media vector icon
+            /// </summary>
+            public const string MediaVectorGraphics = "icon-picture";
+
             /// <summary>
             /// System media folder icon
             /// </summary>
@@ -93,7 +113,7 @@ public static class Icons
             /// System packages icon
             /// </summary>
             public const string Packages = "icon-box";
-            
+
             /// <summary>
             /// System property editor icon
             /// </summary>

src/Umbraco.Core/Constants-PropertyEditors.cs

@@ -95,12 +95,17 @@ public static class Aliases
                 /// ListView.
                 /// </summary>
                 public const string ListView = "Umbraco.ListView";
-                
+
                 /// <summary>
                 /// Media Picker.
                 /// </summary>
                 public const string MediaPicker = "Umbraco.MediaPicker";
 
+                /// <summary>
+                /// Media Picker v.3.
+                /// </summary>
+                public const string MediaPicker3 = "Umbraco.MediaPicker3";
+
                 /// <summary>
                 /// Multiple Media Picker.
                 /// </summary>

src/Umbraco.Core/Constants-PropertyTypeGroups.cs

@@ -8,7 +8,7 @@ public static partial class Constants
         public static class PropertyTypeGroups
         {
             /// <summary>
-            /// Guid for a Image PropertyTypeGroup object.
+            /// Guid for an Image PropertyTypeGroup object.
             /// </summary>
             public const string Image = "79ED4D07-254A-42CF-8FA9-EBE1C116A596";
 
@@ -18,7 +18,27 @@ public static class PropertyTypeGroups
             public const string File = "50899F9C-023A-4466-B623-ABA9049885FE";
 
             /// <summary>
-            /// Guid for a Image PropertyTypeGroup object.
+            /// Guid for a Video PropertyTypeGroup object.
+            /// </summary>
+            public const string Video = "2F0A61B6-CF92-4FF4-B437-751AB35EB254";
+
+            /// <summary>
+            /// Guid for an Audio PropertyTypeGroup object.
+            /// </summary>
+            public const string Audio = "335FB495-0A87-4E82-B902-30EB367B767C";
+
+            /// <summary>
+            /// Guid for an Article PropertyTypeGroup object.
+            /// </summary>
+            public const string Article = "9AF3BD65-F687-4453-9518-5F180D1898EC";
+
+            /// <summary>
+            /// Guid for a VectorGraphics PropertyTypeGroup object.
+            /// </summary>
+            public const string VectorGraphics = "F199B4D7-9E84-439F-8531-F87D9AF37711";
+
+            /// <summary>
+            /// Guid for a Membership PropertyTypeGroup object.
             /// </summary>
             public const string Membership = "0756729D-D665-46E3-B84A-37ACEAA614F8";
         }