From 90616bced663e314f64efad7fb0f521b54a9a082 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Fri, 18 Feb 2022 14:06:41 +0100
Subject: [PATCH] Fixes and better video playback

---
 src/js/portfolio.js     | 32 +++++++++++++++++++++++++++-----
 src/scss/portfolio.scss |  5 ++++-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/js/portfolio.js b/src/js/portfolio.js
index b49f3db..1b0c630 100644
--- a/src/js/portfolio.js
+++ b/src/js/portfolio.js
@@ -32,6 +32,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') {
@@ -39,7 +42,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);
+    const 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);
@@ -593,9 +597,11 @@ var setDetails = function(nodeDatum, nodeIdx) {
       } 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') {
-          let videoType = nodeAttr['https://schema.org/encodingFormat'] ? `type='${nodeAttr['https://schema.org/encodingFormat']}'`: "";
-          let poster = nodeAttr['https://schema.org/thumbnailUrl'] ? `poster='${nodeAttr['https://schema.org/thumbnailUrl']}'`: "";
-          listEl.innerHTML += `<dd class='dd-contentobject'><video controls ${poster} autoplay><source src='${nodeAttr[i]}' ${videoType}></video></dd>`;
+          // console.log(nodeDatum, nodeAttr);
+          let videoType = nodeDatum['https://schema.org/encodingFormat'] ? `type='${nodeDatum['https://schema.org/encodingFormat']}'`: "";
+          let 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>`;
         }
@@ -672,7 +678,13 @@ var setDetails = function(nodeDatum, nodeIdx) {
       if(typeof rel['https://schema.org/contentUrl'] != 'undefined') {
         let ddEl = document.createElement('dd')
         ddEl.classList.add('dd-contentobject');
-        ddEl.innerHTML = `<object data='${rel['https://schema.org/contentUrl']}'></object>`
+        if(rel['@type'] == 'https://schema.org/VideoObject') {
+          let videoType = rel['https://schema.org/encodingFormat'] ? `type='${rel['https://schema.org/encodingFormat']}'`: "";
+          let poster = rel['https://schema.org/thumbnailUrl'] ? `poster='${rel['https://schema.org/thumbnailUrl']}'`: "";
+          ddEl.innerHTML += `<video controls preload="none" ${poster}><source src='${rel['https://schema.org/contentUrl']}' ${videoType}></video>`;
+        } else{
+          ddEl.innerHTML = `<object data='${rel['https://schema.org/contentUrl']}'></object>`
+        }
         relsEl.appendChild(ddEl);
       }
     }
@@ -1066,6 +1078,16 @@ node.each(function(d) {
     .attr("preserveAspectRatio","xMidYMid slice")
     ;
   });
+node.each(function(d) {
+    if(d['@type'] !== 'https://schema.org/VideoObject') {
+      return;
+    }
+    const size = getSizeForNode(d);
+    d3.select(this).append('svg:polygon')
+    .attr('points', "-10,-10, -10,10, 10,0")
+    .attr("class","play")
+    ;
+  });
 
 simulation
     .nodes(graph.nodes)
diff --git a/src/scss/portfolio.scss b/src/scss/portfolio.scss
index 3679ab0..77d1e5b 100644
--- a/src/scss/portfolio.scss
+++ b/src/scss/portfolio.scss
@@ -127,7 +127,10 @@ g.node{
       text-anchor:middle;
     }
   }
-  &.ImageObject{
+  .play{
+    fill:white;
+  }
+  &.ImageObject, &.VideoObject, &.BroadcastEvent{
       text.nodeTitle {
           display: none;
       }