Work around for #22, Doesn't appear to work with repeating fields

Author: jcohlmeyer

VideoEmbedFieldtype.php

@@ -34,7 +34,7 @@ public function blank()
             'thumbnail_large' => '',
             'thumbnail_medium' => '',
             'thumbnail_small' => '',
-            'key' => $data['key'] = $this->getConfig('key', '')
+            'youtube_key' => $this->getConfig('key', '')
         ];
     }
 
@@ -48,7 +48,7 @@ public function preProcess($data)
     {
         // Pass the YouTube API key to Vue & set defaults if data is not set
         // - For example if info url was added via editing the yaml file
-        $data['key'] = $this->getConfig('key', '');
+        $data['youtube_key'] = $this->getConfig('key', '');
         $data['url'] = isset($data['url']) ? $data['url'] : '';
         $data['title'] = isset($data['title']) ? $data['title'] : '';
         $data['description'] = isset($data['description']) ? $data['description'] : '';
@@ -104,7 +104,7 @@ public function process($data)
         }
 
         // Important! Unset the YouTube API key so it is not saved with the content
-        unset($data['key']);
+        unset($data['youtube_key']);
 
         // If there is no description unset it (so a blank string is not saved in YAML)
         // This way templates can easily just check if the description exists

VideoEmbedServiceProvider.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Statamic\Addons\VideoEmbed;
+
+use Statamic\Extend\ServiceProvider;
+use Statamic\Extend\Meta;
+
+class VideoEmbedServiceProvider extends ServiceProvider
+{
+
+    /**
+     * Bootstrap the application services.
+     *
+     * @return void
+     */
+    public function boot() {
+        //
+    }
+
+    /**
+     * Register the application services.
+     *
+     * @return void
+     */
+    public function register() {
+        $this->app->bind('VideoEmbed.resolve-resource-path', function () {
+            /**
+             * @param  string  $path   The filename relative to the `resources/assets` directory.
+             *                         eg. `js/foo.js`
+             * @param  Addon   $addon  An instance of Statamic\Extend\Addon for your addon.
+             * @return string          The filename relative to `resources/assets`
+             *                         eg. `js/foo.js?id=1234` or `js/foo.somehash.js`
+             */
+            return function ($path, $addon) {
+                $meta = new Meta($addon);
+                $version = '';
+
+                if ($meta->exists()) {
+                    $meta->load();
+                    $version = $meta->get('version');
+                }
+
+                return $path . '?v=' . $version;
+            };
+        });
+    }
+}

meta.yaml

@@ -1,5 +1,5 @@
 name: VideoEmbed
-version: 2.2.5
+version: 2.2.6
 description: A field type for embedding YouTube and Vimeo Videos
 url: https://github.com/jrc9designstudio/statamic-video-embed
 developer: JRC9 Design Studio

readme.md

@@ -1,6 +1,6 @@
 # Video Embed for Statamic 2
 *Requirement:* Statamic v2.6.x, curl
-*Version:* 2.2.4
+*Version:* 2.2.6
 
 ### What is this?
 Add YouTube and Vimeo videos to Statamic with a Video Embed field.
@@ -120,6 +120,7 @@ If you really want a simple tag that does it all for you, you can create your ow
   - `portrait_cinema` 9:21
 
 ### Version Log
+- 2.2.6 Fix grid / replicator issue
 - 2.2.4 Add Video Preview Image to Replicator Preview Text
 - 2.2.3 Auto Focus & Change Watcher Fix
 - 2.2.2 Add Replicator Preview Text

resources/assets/js/fieldtype.js

@@ -1,5 +1,37 @@
 /* global Vue, $, Fieldtype, translate */
 
+// Polyfill Object.assign for IE...
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
+if (typeof Object.assign !== 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length of function is 2
+      'use strict';
+      if (target === null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource !== null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}
+
 Vue.component('video_embed-fieldtype', {
     mixins: [Fieldtype],
 
@@ -8,9 +40,8 @@ Vue.component('video_embed-fieldtype', {
             loading: true,
             fail: false,
             previous_url: '',
-            youTubeKeySet: this.data.key.length > 0,
+            youTubeKeySet: this.data.youtube_key.length > 0,
             ajax: undefined,
-            autoBindChangeWatcher: false // Disable the automagic binding
         }
     },
 
@@ -172,7 +203,7 @@ Vue.component('video_embed-fieldtype', {
                 }
 
                 this.ajax = $.ajax({
-                    url: 'https://www.googleapis.com/youtube/v3/videos?part=id%2C+snippet,contentDetails&id=' + this.getYouTubeID + '&key=' + this.data.key
+                    url: 'https://www.googleapis.com/youtube/v3/videos?part=id%2C+snippet,contentDetails&id=' + this.getYouTubeID + '&key=' + this.data.youtube_key
                 }).done(function(data) {
                     if (! data.items[0]) {
                         that.fail = translate('addons.VideoEmbed::settings.youtube_lookup_no_data');
@@ -233,6 +264,11 @@ Vue.component('video_embed-fieldtype', {
     },
 
     ready: function() {
+        // Make sure the default props is not mutated, a unique copy should be made
+        // this works around a bug where adding more than one video field in a replicator or grid
+        // before a save causes all url fields to share data / be linked
+        // https://github.com/jrc9designstudio/statamic-video-embed/issues/22
+        this.data = Object.assign({}, this.data);
         // Update the data as soon as Vue is ready.
         this.getData();
     },