compile js and css

assets/css/portfolio.css

@@ -73,7 +73,9 @@ g.node {
     font-size: 10pt; }
     g.node text.nodeTitle tspan {
       text-anchor: middle; }
-  g.node.ImageObject text.nodeTitle {
+  g.node .play {
+    fill: white; }
+  g.node.ImageObject text.nodeTitle, g.node.VideoObject text.nodeTitle, g.node.BroadcastEvent text.nodeTitle {
     display: none; }
 
 .relationship {

assets/js/portfolio.js

@@ -44,6 +44,9 @@ function getNodeLabel(node) {
 }
 function getNodeYear(n) {
   if (typeof n['https://schema.org/dateCreated'] !== 'undefined') {
+    if (n['https://schema.org/dateCreated'].length == 9) {
+      return n['https://schema.org/dateCreated'];
+    }
     return n['https://schema.org/dateCreated'].substr(0, 4);
   }
   if (typeof n['https://schema.org/datePublished'] !== 'undefined') {
@@ -51,7 +54,8 @@ function getNodeYear(n) {
   }
   if (typeof n['https://schema.org/startDate'] !== 'undefined') {
     // console.log(n['https://schema.org/startDate']);
-    return n['https://schema.org/startDate'].substr(0, 4);
+    var year = n['https://schema.org/startDate'].substr(0, 4);
+    return year;
   }
   if (typeof n['https://schema.org/endDate'] !== 'undefined') {
     return n['https://schema.org/endDate'].substr(0, 4);
@@ -710,9 +714,11 @@ function startGraph(graph) {
         } else if (attr == 'https://schema.org/contentUrl') {
           listEl.innerHTML += '<dt class=\'dt-' + getDisplayAttr(attr) + '\' title=\'' + attr + '\'>' + getDisplayAttr(attr) + '</dt><dd class=\'dd-' + getDisplayAttr(attr) + '\'><a href=\'' + nodeAttr[_i] + '\'>' + nodeAttr[_i] + '</a></dd>';
           if (nodeDatum['@type'] == 'https://schema.org/VideoObject') {
-            var videoType = nodeAttr['https://schema.org/encodingFormat'] ? 'type=\'' + nodeAttr['https://schema.org/encodingFormat'] + '\'' : "";
+            // console.log(nodeDatum, nodeAttr);
-            var poster = nodeAttr['https://schema.org/thumbnailUrl'] ? 'poster=\'' + nodeAttr['https://schema.org/thumbnailUrl'] + '\'' : "";
+            var videoType = nodeDatum['https://schema.org/encodingFormat'] ? 'type=\'' + nodeDatum['https://schema.org/encodingFormat'] + '\'' : "";
-            listEl.innerHTML += '<dd class=\'dd-contentobject\'><video controls ' + poster + ' autoplay><source src=\'' + nodeAttr[_i] + '\' ' + videoType + '></video></dd>';
+            var poster = nodeDatum['https://schema.org/thumbnailUrl'] ? 'poster=\'' + nodeDatum['https://schema.org/thumbnailUrl'] + '\'' : "";
+            // TODO: enable outplay and make it work (for some reason it does not...)
+            listEl.innerHTML += '<dd class=\'dd-contentobject\'><video controls ' + poster + '><source src=\'' + nodeAttr[_i] + '\' ' + videoType + '></video></dd>';
           } else {
             listEl.innerHTML += '<dd class=\'dd-contentobject\'><object data=\'' + nodeAttr[_i] + '\'></object></dd>';
           }
@@ -793,7 +799,13 @@ function startGraph(graph) {
         if (typeof _rel['https://schema.org/contentUrl'] != 'undefined') {
           var _ddEl = document.createElement('dd');
           _ddEl.classList.add('dd-contentobject');
+          if (_rel['@type'] == 'https://schema.org/VideoObject') {
+            var _videoType2 = _rel['https://schema.org/encodingFormat'] ? 'type=\'' + _rel['https://schema.org/encodingFormat'] + '\'' : "";
+            var _poster2 = _rel['https://schema.org/thumbnailUrl'] ? 'poster=\'' + _rel['https://schema.org/thumbnailUrl'] + '\'' : "";
+            _ddEl.innerHTML += '<video controls preload="none" ' + _poster2 + '><source src=\'' + _rel['https://schema.org/contentUrl'] + '\' ' + _videoType2 + '></video>';
+          } else {
             _ddEl.innerHTML = '<object data=\'' + _rel['https://schema.org/contentUrl'] + '\'></object>';
+          }
           relsEl.appendChild(_ddEl);
         }
       }
@@ -1194,6 +1206,13 @@ function startGraph(graph) {
       return "translate(-" + getSizeForNode(d) + " -" + getSizeForNode(d) + ")";
     }).attr("clip-path", "url(#clipNodeImage)").attr("preserveAspectRatio", "xMidYMid slice");
   });
+  node.each(function (d) {
+    if (d['@type'] !== 'https://schema.org/VideoObject') {
+      return;
+    }
+    var size = getSizeForNode(d);
+    d3.select(this).append('svg:polygon').attr('points', "-10,-10, -10,10, 10,0").attr("class", "play");
+  });
 
   simulation.nodes(graph.nodes).on("tick", ticked);