diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php
index c169e85..524178a 100644
--- a/includes/GlModelTransformOutput.php
+++ b/includes/GlModelTransformOutput.php
@@ -1,6 +1,7 @@
" tag, if there is such a tag
+ * preview Boolean, render is being called from a preview page
*
* @return string HTML
*/
@@ -117,10 +119,25 @@ class GlModelTransformOutput extends MediaTransformOutput {
}
//Set viewer configurations or use basic default if none defined
+ $interactButton = '';
if (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$view])) {
- $attrModelView = $metadata['viewerConfig'][$view];
+ $attrModelView = $metadata['viewerConfig'][$view];
+ if (isset($attrModelView['poster'])) {
+ $posterFile = MediaWikiServices::getInstance()->getRepoGroup()->findFile(`File:` . $attrModelView['poster']);
+ if ($posterFile) {
+ $attrModelView['poster'] = $posterFile->getFullUrl();
+ $attrModelView['reveal'] = 'manual';
+ $mainConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'main' );
+ $interactUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/interact.svg';
+ $attrInteractButton = array (
+ 'class' => 'glmv-act-button',
+ 'onclick' => 'this.style.display = "none"; this.parentElement.querySelector("model-viewer").dismissPoster()',
+ );
+ $interactButton = Html::rawElement('div', $attrInteractButton, '
');
+ }
+ }
} else {
- $attrModelView = array('camera-controls' => true);
+ $attrModelView = array('camera-controls' => true);
}
//Add important additional attributes and render model-viewer with hotspots
@@ -140,7 +157,7 @@ class GlModelTransformOutput extends MediaTransformOutput {
'ontouchstart' => 'clearAnnotations()'
);
- return Html::rawElement('div', $attrContainer, $elModel . $elMenu);
+ return Html::rawElement('div', $attrContainer, $elModel . $elMenu . $interactButton);
}
/**
diff --git a/modules/glmv.css b/modules/glmv.css
index bee3cef..cb300fa 100644
--- a/modules/glmv.css
+++ b/modules/glmv.css
@@ -143,6 +143,26 @@
}
}
+.glmv-act-button {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 52px;
+ height: 52px;
+ padding: 6px;
+ background: #FFFFFF90;
+ border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ & img {
+ pointer-events: none;
+ }
+}
+
.prev-hs img {
transform: scaleX(-1);
}
diff --git a/resources/interact.svg b/resources/interact.svg
new file mode 100644
index 0000000..137b6e9
--- /dev/null
+++ b/resources/interact.svg
@@ -0,0 +1 @@
+
\ No newline at end of file