diff --git a/display/overlays/nodeinfo.js b/display/overlays/nodeinfo.js index e94bba4aeca0096a7906aae460eb4eaadda1bf13..b1cf07213f894ed5e53feb8db5b7f71e758c623c 100644 --- a/display/overlays/nodeinfo.js +++ b/display/overlays/nodeinfo.js @@ -37,6 +37,7 @@ class NodeInfoOverlay { jQuery("#infoOverlayCloseButton").click(function () { jQuery("#infoOverlay").slideUp("fast"); }); + jQuery("#infoOverlay").hide(); } createOverlayMainDiv() { @@ -78,6 +79,16 @@ class NodeInfoOverlay { id: "infoOverlayDescription", innerText: "Default Text", }); + + const videoDiv = Helpers.createDiv("detail-view-video-div", infoArea); + + const video = document.createElement("video"); + video.id = "infoOverlayVideo"; + video.controls = true; + video.className = "detail-view-video"; + videoDiv.appendChild(video); + + Helpers.createDiv("detail-view-spacer", infoArea); } /** @@ -85,17 +96,24 @@ class NodeInfoOverlay { * @param node */ updateInfoOverlay(node) { - jQuery("#infoOverlayHeadline").text(node.name); + const headline = jQuery("#infoOverlayHeadline"); + headline.text(node.name); if ("image" in node) { - jQuery("#infoOverlayImage").attr( + headline.css("margin-top", "0px"); + //jQuery("#infoOverlayImage").removeClass("hidden-tab"); + const overlayImage = jQuery("#infoOverlayImage"); + overlayImage.show(); + overlayImage.attr( "src", Config.PLUGIN_PATH + "datasets/images/" + node.image ); } else { - jQuery("#infoOverlayImage").attr( - "src", - Config.PLUGIN_PATH + "datasets/images/default.jpg" - ); + headline.css("margin-top", "25px"); + jQuery("#infoOverlayImage").hide(); + // jQuery("#infoOverlayImage").attr( + // "src", + // Config.PLUGIN_PATH + "datasets/images/default.jpg" + // ); } if ("description" in node) { @@ -104,6 +122,13 @@ class NodeInfoOverlay { jQuery("#infoOverlayDescription").text("Default Text"); } + if ("video" in node) { + jQuery("#infoOverlayVideo").show(); + jQuery("#infoOverlayVideo").attr("src", node.video); + } else { + jQuery("#infoOverlayVideo").hide(); + } + this.bottomMenu.updateTabs(node); jQuery("#infoOverlay").slideDown("fast"); } diff --git a/kg-style.css b/kg-style.css index 79aa80f84d7ca62ed71b08b781cb9fab98e6c5c4..af637bf87cbd9d8aa1dc56854cd1308298864f69 100644 --- a/kg-style.css +++ b/kg-style.css @@ -103,7 +103,7 @@ display: block; padding-left: 25px; padding-right: 25px; - padding-bottom: 130px; + /*padding-bottom: 130px;*/ } .detail-view-headline { @@ -112,7 +112,25 @@ font-family: CuratorRegular, Helvetica Neue, Helvetica, Arial, sans-serif; word-wrap: break-word; hyphens: auto; - font-size: 2vw; + font-size: 1.6vw; + padding-left: 5px; + padding-right: 5px; +} + +.detail-view-video-div { + width: 100%; + padding: 10px; +} + +.detail-view-video { + object-fit: scale-down; + width: 100%; + height: auto; +} + +.detail-view-spacer { + height: 120px; + width: 100%; } .link-overlay { diff --git a/package.json b/package.json index 93f63ca6ccce9bb87514e87d91f1bbf512862d78..d855e30209554b32d05b3227a48d8a35ce56c70a 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "optimize": true, "includeNodeModules": [ "three", - "3d-force-graph" + "3d-force-graph", + "force-graph" ], "isLibrary": true, "context": "node" @@ -48,6 +49,7 @@ }, "dependencies": { "3d-force-graph": "^1.70.5", + "force-graph": "^1.42.2", "jquery": "^3.6.0", "three": "^0.131.2" }