Add simple AssetCreateView #4647

Create basic form for creating a Mediathread asset based on an
external image or video source.

media/js/lib/get-youtube-id/.gitignore

@@ -0,0 +1 @@
+node_modules

media/js/lib/get-youtube-id/LICENSE

@@ -0,0 +1,18 @@
+This software is released under the MIT license:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

media/js/lib/get-youtube-id/README.md

@@ -0,0 +1,39 @@
+# get-youtube-id
+
+Parse a youtube url returning the video ID.
+
+## Installation
+
+```
+npm install get-youtube-id
+```
+
+## Example
+
+``` js
+var getYouTubeID = require('get-youtube-id');
+
+var id = getYouTubeID("http://www.youtube.com/watch?v=9bZkp7q19f0");
+console.log(id); // "9bZkp7q19f0"
+
+
+// Or, if you're using ES6 syntax:
+import getYouTubeID from 'get-youtube-id';
+```
+
+## Fuzzy matching
+
+By default `getYouTubeID` will make a last-ditch effort to look for anything that resembles
+an 11-character id. If you want it to be more strict you can turn this off with an options
+argument.
+
+```js
+var getYouTubeID = require('get-youtube-id');
+
+var id = getYouTubeID("youtube abcdefghijk", {fuzzy: false});
+console.log(id); // null
+```
+
+# License
+
+MIT

media/js/lib/get-youtube-id/component.json

@@ -0,0 +1,9 @@
+{
+  "name": "get-youtube-id",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "dependencies": {},
+  "ignore": [
+    "test/"
+  ]
+}

media/js/lib/get-youtube-id/index.d.ts

@@ -0,0 +1,2 @@
+declare const getYouTubeID: (url: string, opts?: { fuzzy: boolean }) => string | null;
+export default getYouTubeID;

media/js/lib/get-youtube-id/index.js

@@ -0,0 +1,51 @@
+
+(function (root, factory) {
+  if (typeof exports === 'object') {
+    module.exports = factory();
+  } else if (typeof define === 'function' && define.amd) {
+    define(factory);
+  } else {
+    root.getYouTubeID = factory();
+  }
+}(this, function (exports) {
+
+  return function (url, opts) {
+    if (opts == undefined) {
+      opts = {fuzzy: true};
+    }
+
+    if (/youtu\.?be/.test(url)) {
+
+      // Look first for known patterns
+      var i;
+      var patterns = [
+        /youtu\.be\/([^#\&\?]{11})/,  // youtu.be/<id>
+        /\?v=([^#\&\?]{11})/,         // ?v=<id>
+        /\&v=([^#\&\?]{11})/,         // &v=<id>
+        /embed\/([^#\&\?]{11})/,      // embed/<id>
+        /\/v\/([^#\&\?]{11})/         // /v/<id>
+      ];
+
+      // If any pattern matches, return the ID
+      for (i = 0; i < patterns.length; ++i) {
+        if (patterns[i].test(url)) {
+          return patterns[i].exec(url)[1];
+        }
+      }
+
+      if (opts.fuzzy) {
+        // If that fails, break it apart by certain characters and look 
+        // for the 11 character key
+        var tokens = url.split(/[\/\&\?=#\.\s]/g);
+        for (i = 0; i < tokens.length; ++i) {
+          if (/^[^#\&\?]{11}$/.test(tokens[i])) {
+            return tokens[i];
+          }
+        }
+      }
+    }
+
+    return null;
+  };
+
+}));

media/js/lib/get-youtube-id/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "get-youtube-id",
+  "version": "1.0.1",
+  "description": "Parse a youtube url returning the video ID.",
+  "main": "index.js",
+  "bin": {},
+  "directories": {
+    "test": "test"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "tape": "~0.2.2"
+  },
+  "scripts": {
+    "test": "node test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/jmorrell/get-youtube-id.git"
+  },
+  "homepage": "https://github.com/jmorrell/get-youtube-id",
+  "keywords": [
+    "youtube",
+    "url"
+  ],
+  "author": "Jeremy Morrell <[email protected]>",
+  "license": "MIT",
+  "readmeFilename": "README.md"
+}

media/js/lib/get-youtube-id/test/index.js

@@ -0,0 +1,50 @@
+var test = require('tape');
+var getYouTubeID = require('../index.js');
+
+// A bunch of youtube url formats collection from Stack Overflow. All of them
+// should resolve to a specific video. Pull requests welcome if more example
+// types can be found.
+var tests = [
+  { expectedID: '-wtIMTCHWuI', url: 'http://www.youtube.com/watch?v=-wtIMTCHWuI' },
+  { expectedID: '-wtIMTCHWuI', url: 'http://www.youtube.com/v/-wtIMTCHWuI?version=3&autohide=1' },
+  { expectedID: '-wtIMTCHWuI', url: 'http://youtu.be/-wtIMTCHWuI' },
+  { expectedID: 'zc0s358b3Ys', url: 'http://www.youtube.com/embed/zc0s358b3Ys' },
+  { expectedID: '-wtIMTCHWuI', url: ' http://www.youtube.com/watch?v=-wtIMTCHWuI ' },
+  { expectedID: 'zc0s358b3Ys', url: 'http://youtu.be/zc0s358b3Ys' },
+  { expectedID: 'u8nQa1cJyX8', url: 'http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW' },
+  { expectedID: 'u8nQa1cJyX8', url: 'http://www.youtube.com/watch?v=u8nQa1cJyX8' },
+  { expectedID: 'zc0s358b3Ys', url: 'http://youtu.be/zc0s358b3Ys' },
+  { expectedID: 'zc0s358b3Ys', url: 'http://youtu.be/zc0s358b3Ys' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/embed/0zM3nApSvMg?rel=0' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/watch?v=0zM3nApSvMg' },
+  { expectedID: '0zM3nApSvMg', url: 'http://youtu.be/0zM3nApSvMg' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/embed/0zM3nApSvMg?rel=0' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/watch?v=0zM3nApSvMg' },
+  { expectedID: '0zM3nApSvMg', url: 'http://youtu.be/0zM3nApSvMg' },
+  { expectedID: '0zM3nApSvMg', url: 'http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s' },
+  { expectedID: 'QdK8U-VIH_o', url: 'http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o' },
+  { expectedID: 'LXilEPmkoQY', url: 'http://www.youtube.com/embed/LXilEPmkoQY' },
+  { expectedID: 'LXilEPmkoQY', url: 'http://www.youtube.com/v/LXilEPmkoQY' },
+  { expectedID: 'u8nQa1cJyX8', url: 'http://www.youtube.com/watch?argv=xyzxyzxyzxy&v=u8nQa1cJyX8' },
+  { expectedID: '0zM3nApSvMg', url: 'youtube.com/watch?feature=feedrec_grec_index&v=0zM3nApSvMg ' },
+  { expectedID: 'y_Rd2hByRyc', url: 'http://www.youtube.com/watch?feature=player_embedded&v=y_Rd2hByRyc' }
+];
+
+test('match example cases', function(t) {
+  t.plan(tests.length);
+
+  tests.forEach(function(testCase) {
+    t.equal(getYouTubeID(testCase.url), testCase.expectedID, 'URL: ' + testCase.url);
+  });
+
+});
+
+test('disabling fuzzy mode', function(t) {
+  t.plan(1);
+  t.equal(getYouTubeID('youtube abcdefghijk', {fuzzy: false}), null);
+});

media/js/utils.js

@@ -0,0 +1,85 @@
+/**
+ * Random utility functions. Currently these are all related to
+ * importing media.
+ */
+
+const isYouTubeURL = function(s) {
+    const re = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+    return s.match(re);
+};
+
+const isImgUrl = function(url) {
+    const img = new Image();
+    img.src = url;
+    return new Promise((resolve) => {
+        img.onerror = () => resolve(false);
+        img.onload = () => resolve(true);
+    });
+};
+
+const getMediaType = function(url) {
+    if (isYouTubeURL(url)) {
+        return 'youtube';
+    }
+
+    return isImgUrl(url).then(function(result) {
+        if (result) {
+            return 'image';
+        }
+
+        return null;
+    });
+};
+
+/**
+ * Refresh form display when import url changes.
+ */
+const refreshImportForm = function(urlInput, sourceUrl, mediaLabel='image') {
+    if (mediaLabel === 'youtube') {
+        const youtubeId = getYouTubeID(sourceUrl);
+        sourceUrl = `https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg`;
+    }
+    const submitButton = document.getElementById('import-submit-button');
+    document.getElementById('import-form-label').value = mediaLabel;
+
+    const thumbnailEl = document.getElementById('imported-thumbnail');
+    thumbnailEl.style.display = 'none';
+    submitButton.disabled = true;
+
+    thumbnailEl.src = sourceUrl;
+    jQuery(thumbnailEl).on('load', function() {
+        console.log('load');
+        thumbnailEl.style.display = 'block';
+        jQuery(urlInput)
+            .removeClass('is-invalid')
+            .addClass('is-valid');
+        submitButton.disabled = false;
+    });
+
+    jQuery(thumbnailEl).on('error', function() {
+        console.log('error');
+        thumbnailEl.style.display = 'none';
+        jQuery(urlInput)
+            .removeClass('is-valid')
+            .addClass('is-invalid');
+        submitButton.disabled = true;
+    });
+
+    const widthEl = document.getElementById('import-form-width');
+    const heightEl = document.getElementById('import-form-height');
+    widthEl.value = null;
+    heightEl.value = null;
+
+    // Don't read image dimensions if it's just a video thumbnail.
+    if (mediaLabel === 'image') {
+        jQuery(thumbnailEl).on('load', function() {
+            widthEl.value = thumbnailEl.naturalWidth;
+            heightEl.value = thumbnailEl.naturalHeight;
+        });
+
+    }
+};
+
+export {
+    isYouTubeURL, isImgUrl, getMediaType, refreshImportForm
+};