Feature/ji 6153 drag and drop video audio (#234)

* JI-6152 add drag and drop, and paste functionality to image widget

* JI-6152 build css file

* JI-6152 fix bug with copyright html

* JI-6152 fix to make better accessible component

* JI-6152 build css production file

* JI-6152 adjust styling

* JI-6152 minor manual linting

* JI-6152 fix issues from review

* JI-6152 fix minor styling issues

* JI-6153 create basic mvp of dnd for video/audio

* JI-6153 fix race condition when uploading and fix styling for box with quality input

* JI-6153 add support for pasting video files

* JI-6153 switch static text to use translations

* JI-6153 fix handling of error messages and improve accessibility

* JI-6153 use svg from css instead of code

* JI-6153 fix minor styling issues and minor bug

* JI-6153 fix reference to progress

* JI-6153 fix bug with replacing youtube url

* JI-6153 remove console.log

* JI-6153 fix issue after merge conflict

* JI-6153 fix styling issues

* JI-6153 handle input bug and fix aria label

* JI-6153 fix typo

* JI-6153 fix imports of svg

* JI-6153 fix styling issues and logic around replacing video

* JI-6253 update badge and adjust box scaling

* JI-6153 fix styling when uploading video

* JI-6153 create loading indicator when replacing url

* JI-6153 use single quotes instead of double

* JI-6153 more single quotes

* JI-6153 use correct icon for insert url

---------

Co-authored-by: William Almnes <[email protected]>

Author: wwalmnes

images/drag-and-drop/upload-image.svg

@@ -22,12 +22,28 @@ H5PEditor.language.core = {
   confirmImageRemoval: 'Are you sure you want to delete this image?',
   dragAndDropAndPasteImage: 'Drag and drop image file to upload or paste by',
   dragAndDropAndPasteReplaceImage: 'Drag or paste image file here to replace',
-  dropImage: "Drop image file here to upload",
+  dropImage: 'Drop image file here to upload',
   uploadImage: 'Upload Image',
   uploadingImage: 'Uploading the image, please wait.',
   replaceImage: 'Replace Image?',
   confirmReplaceImage: 'Are you sure you want to replace this image?',
   onlyPasteImageFiles: 'You may only paste image files.',
+  uploadVideo: 'Upload Video',
+  uploadAudio: 'Upload Audio',
+  uploadOr: 'or',
+  dragAndDropAndPasteVideo: 'Drag and drop video file here to upload or paste by',
+  dragAndDropAndPasteAudio: 'Drag and drop audio file here to upload or paste by',
+  pasteVideoLink: 'Paste YouTube link or other video source',
+  pasteAudioLink: 'Paste link or other audio source URL',
+  dropVideo: 'Drop video file here to upload',
+  dropAudio: 'Drop audio file here to upload',
+  enterVideoLink: 'Enter a video link',
+  enterAudioLink: 'Enter an audio link',
+  insertUrl: 'Insert url',
+  replaceUrl: 'Replace url',
+  supportedVideoFormats: 'H5P supports all external video sources formatted as <span class="h5p-bold">mp4</span>, <span class="h5p-bold">webm</span> or <span class="h5p-bold">ogv</span>, like Vimeo Pro, and has support for YouTube and Panopto links.',
+  dragAndDropToReplaceVideo: 'Drag and drop video file here to replace',
+  dragAndDropToReplaceAudio: 'Drag and drop audio file here to replace',
   changeFile: 'Change file',
   changeLibrary: 'Change content type?',
   semanticsError: 'Semantics error: :error',