r/portfolio
1
0
Fork 0
Code Issues Pull requests Releases Activity

Fixes and better video playback

Browse source
This commit is contained in:
Ruben van de Ven 2022-02-18 14:06:41 +01:00
parent 0629a01af6
commit 90616bced6
2 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/js/portfolio.js
View file

@ -32,6 +32,9 @@ function getNodeLabel(node){
} }
function getNodeYear(n){ function getNodeYear(n){
if(typeof n['https://schema.org/dateCreated'] !== 'undefined') { 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); return n['https://schema.org/dateCreated'].substr(0,4);
} }
if(typeof n['https://schema.org/datePublished'] !== 'undefined') { if(typeof n['https://schema.org/datePublished'] !== 'undefined') {
@ -39,7 +42,8 @@ function getNodeYear(n){
} }
if(typeof n['https://schema.org/startDate'] !== 'undefined') { if(typeof n['https://schema.org/startDate'] !== 'undefined') {
// console.log(n['https://schema.org/startDate']); // 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') { if(typeof n['https://schema.org/endDate'] !== 'undefined') {
return n['https://schema.org/endDate'].substr(0,4); 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') { } 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>`; 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') { if(nodeDatum['@type'] == 'https://schema.org/VideoObject') {
let videoType = nodeAttr['https://schema.org/encodingFormat'] ? `type='${nodeAttr['https://schema.org/encodingFormat']}'`: ""; // console.log(nodeDatum, nodeAttr);
let poster = nodeAttr['https://schema.org/thumbnailUrl'] ? `poster='${nodeAttr['https://schema.org/thumbnailUrl']}'`: ""; let 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>`; 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{ } else{
listEl.innerHTML += `<dd class='dd-contentobject'><object data='${nodeAttr[i]}'></object></dd>`; 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') { if(typeof rel['https://schema.org/contentUrl'] != 'undefined') {
let ddEl = document.createElement('dd') let ddEl = document.createElement('dd')
ddEl.classList.add('dd-contentobject'); ddEl.classList.add('dd-contentobject');
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>` ddEl.innerHTML = `<object data='${rel['https://schema.org/contentUrl']}'></object>`
}
relsEl.appendChild(ddEl); relsEl.appendChild(ddEl);
} }
} }
@ -1066,6 +1078,16 @@ node.each(function(d) {
.attr("preserveAspectRatio","xMidYMid slice") .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 simulation
.nodes(graph.nodes) .nodes(graph.nodes)

5
src/scss/portfolio.scss
View file

@ -127,7 +127,10 @@ g.node{
text-anchor:middle; text-anchor:middle;
} }
} }
&.ImageObject{ .play{
fill:white;
}
&.ImageObject, &.VideoObject, &.BroadcastEvent{
text.nodeTitle { text.nodeTitle {
display: none; display: none;
} }