Support embedded video in the property details

metadatacenter-attic · Jul 30, 2017 · 315c806 · 315c806
1 parent 009a6bc
commit 315c806
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 6 deletions.
diff --git a/app/app.js b/app/app.js
@@ -6,6 +6,7 @@ angular.module('settings', []);
 angular.module('schemaorg', [
   'ui.materialize',
   'angular.filter',
+  'videosharing-embed',
   'rzModule',
   'search',
   'settings'],

diff --git a/app/components/search/cse-data.factory.js b/app/components/search/cse-data.factory.js
@@ -126,6 +126,8 @@ function(schemaorgVocab) {
       return refineUrlData(value);
     } else if (type === "url+image") {
       return refineImageUrlData(value);
+    } else if (type === "url+video") {
+      return refineVideoUrlData(value);
     } else if (type === "enum") {
       return refineEnumData(value);
     }
@@ -162,12 +164,23 @@ function(schemaorgVocab) {
     return component.url;
   }
 
-  function refineImageUrlData(url, accepted=["jpg", "jpeg", "png", "gif", "bmp"]) {
+  function refineImageUrlData(url, supported=["jpg", "jpeg", "png", "gif", "bmp"]) {
     url = refineUrlData(url);
     var component = parseUrl(url);
     var ext = getFileExtension(component.pathname);
-    if (!include(accepted, ext)) {
-      throw new UnsupportedImageException(ext, accepted);
+    if (!include(supported, ext)) {
+      throw new UnsupportedImageException(ext, supported);
+    }
+    return component.protocol + "//" + component.host + component.pathname;
+  }
+
+  function refineVideoUrlData(url, supported=["www.youtube.com", "www.dailymotion.com",
+      "vimeo.com"]) {
+    url = refineUrlData(url);
+    var component = parseUrl(url);
+    var hostname = component.hostname;
+    if (!include(supported, hostname)) {
+      throw new UnsupportedVieoProviderException(hostname, supported);
     }
     return component.protocol + "//" + component.host + component.pathname;
   }
@@ -250,9 +263,14 @@ function(schemaorgVocab) {
     return (arr.indexOf(value) != -1);
   }
 
-  function UnsupportedImageException(ext, accepted) {
+  function UnsupportedImageException(ext, supported) {
     this.name = "UnsupportedImageException";
-    this.message = "Image extension '" + ext + "' is not supported, only [" + accepted + "]";
+    this.message = "Image extension '" + ext + "' is not supported, only [" + supported + "]";
+  }
+
+  function UnsupportedVieoProviderException(provider, supported) {
+    this.name = "UnsupportedVieoProviderException";
+    this.message = "Video provider '" + provider + "' is not supported, only [" + supported + "]";
   }
 
   var isServiceFor = function(rawData) {

diff --git a/app/components/search/vocab.constant.js b/app/components/search/vocab.constant.js
@@ -291,6 +291,124 @@ angular.module('search')
         }
       ]
     },
+    'movie': {
+      'name': 'movie',
+      'label': 'Movie',
+      'canonicalUrl': 'http://schema.org/Movie',
+      'properties': [
+        { 'name': 'name',
+          'label': 'Name',
+          'type': 'text',
+          'canonicalUrl': 'http://schema.org/name',
+          'discoverable': false
+        },
+        { 'name': 'description',
+          'label': 'Description',
+          'type': 'text',
+          'canonicalUrl': 'http://schema.org/description',
+          'discoverable': false
+        },
+        { 'name': 'contentrating',
+          'label': 'Movie Rating',
+          'type': 'enum',
+          'canonicalUrl': 'http://schema.org/contentRating',
+          'discoverable': true
+        },
+        { 'name': 'duration',
+          'label': 'Movie Duration',
+          'type': 'duration',
+          'unit': 'minute',
+          'canonicalUrl': 'http://schema.org/duration',
+          'discoverable': true
+        },
+        { 'name': 'genre',
+          'label': 'Movie Genre',
+          'type': 'enum',
+          'canonicalUrl': 'http://schema.org/genre',
+          'discoverable': true
+        },
+        { 'name': 'datepublished',
+          'label': 'Release Date',
+          'type': 'date',
+          'canonicalUrl': 'http://schema.org/datePublished',
+          'discoverable': false
+        },
+        { 'name': 'trailer',
+          'label': 'Movie Trailer',
+          'type': 'url+video',
+          'canonicalUrl': 'http://schema.org/trailer',
+          'discoverable': false
+        }
+      ]
+    },
+    'videoobject': {
+      'name': 'videoobject',
+      'label': 'Video',
+      'canonicalUrl': 'http://schema.org/VideoObject',
+      'properties': [
+        { 'name': 'name',
+          'label': 'Name',
+          'type': 'text',
+          'canonicalUrl': 'http://schema.org/name',
+          'discoverable': false
+        },
+        { 'name': 'description',
+          'label': 'Description',
+          'type': 'text',
+          'canonicalUrl': 'http://schema.org/description',
+          'discoverable': false
+        },
+        { 'name': 'datepublished',
+          'label': 'Publication Date',
+          'type': 'date',
+          'canonicalUrl': 'http://schema.org/datePublished',
+          'discoverable': true
+        },
+        { 'name': 'duration',
+          'label': 'Duration',
+          'type': 'duration',
+          'unit': 'minute',
+          'canonicalUrl': 'http://schema.org/duration',
+          'discoverable': true
+        },
+        { 'name': 'isfamilyfriendly',
+          'label': 'Family Friendly?',
+          'type': 'boolean',
+          'canonicalUrl': 'http://schema.org/isFamilyFriendly',
+          'discoverable': true
+        },
+        { 'name': 'genre',
+          'label': 'Video Genre',
+          'type': 'enum',
+          'canonicalUrl': 'http://schema.org/genre',
+          'discoverable': true
+        },
+        { 'name': 'embedurl',
+          'label': 'Video URL',
+          'type': 'url+video',
+          'canonicalUrl': 'http://schema.org/embedUrl',
+          'discoverable': false
+        },
+        { 'name': 'interactioncount',
+          'label': 'Total Viewer',
+          'type': 'numeric',
+          'canonicalUrl': 'http://schema.org/interactionCount',
+          'discoverable': false
+        },
+        { 'name': 'interactionstatistic',
+          'label': 'Total Viewer',
+          'type': 'numeric',
+          'canonicalUrl': 'http://schema.org/interactionStatistic',
+          'discoverable': false
+        },
+        { 'name': 'uploaddate',
+          'label': 'Upload Date',
+          'type': 'date',
+          'canonicalUrl': 'http://schema.org/uploadDate',
+          'discoverable': false
+        }
+      ]
+    },
     'dataset': {
       'name': 'dataset',
       'label': 'Dataset',

diff --git a/assets/css/refinry.css b/assets/css/refinry.css
@@ -189,6 +189,11 @@ input[type="submit"] {
   transform-origin: center;
 }
 
+iframe {
+  width: 100%;
+  margin-top: 5px;
+}
+
 /* Materializecss Overrides */
 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   color:    #F0F0F0;

diff --git a/assets/libs/ng-videosharing-embed.min.js b/assets/libs/ng-videosharing-embed.min.js
diff --git a/index.html b/index.html
@@ -20,6 +20,7 @@
   <script type="text/javascript" src="assets/libs/angular.min.js"></script>
   <script type="text/javascript" src="assets/libs/angular-filter.min.js"></script>
   <script type="text/javascript" src="assets/libs/angular-materialize.min.js"></script>
+  <script type="text/javascript" src="assets/libs/ng-videosharing-embed.min.js"></script>
   <script type="text/javascript" src="assets/libs/moment.min.js"></script>
   <script type="text/javascript" src="assets/libs/rzslider.min.js"></script>
   <script type="text/javascript" src="assets/libs/quantities.js"></script>
@@ -117,14 +118,20 @@
                         ng-repeat="(domain, object) in item.properties | groupBy: 'domain.name'">
                       <ul class="collection with-header">
                         <li class="collection-header narrower">{{object[0].domain.label}}</li>
-                        <li class="collection-item narrower" ng-repeat="property in object" ng-if="property.type!='url+image'">
+                        <li class="collection-item narrower" ng-repeat="property in object"
+                            ng-if="property.type!='url+image' && property.type!='url+video'">
                           <label>{{property.label}}:</label>&nbsp;{{property.value}}&nbsp;{{property.unit}}
                         </li>
                         <li class="collection-item narrower" ng-repeat="property in object | filter:{ type:'url+image' }">
                           <label>{{property.label}}:</label>&nbsp;
                           <img materialboxed class="responsive-img fullscreen-img" data-caption="{{item.title}}"
                               ng-src={{property.value}}>
                         </li>
+                        <li class="collection-item narrower" ng-repeat="property in object | filter:{ type:'url+video' }">
+                          <label>{{property.label}}:</label>&nbsp;
+                          <embed-video iframe-id="video-{{$index}}" player_id="video-{{$index}}"
+                              ng-href="{{property.value}}"></embed-video>
+                        </li>
                       </ul>
                     </div>
                   </div>