Add poster view property and manual model reveal

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

includes/GlModelTransformOutput.php

@@ -1,6 +1,7 @@
 <?php
 namespace MediaWiki\Extension\GlModelViewer;
 
+use MediaWiki\MediaWikiServices;
 use MediaTransformOutput;
 use ConfigFactory;
 use OutputPage;
@@ -40,6 +41,7 @@ class GlModelTransformOutput extends MediaTransformOutput {
 	 *                        custom-title-link  Custom Title object to link to
 	 *                        valign             vertical-align property, if the output is an inline element
 	 *                        img-class          Class applied to the "<img>" 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, '<img src="' . $interactUrl . '"></image>');
+                }
+            }
         } 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);
     }
 
     /**

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);
 }

resources/interact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#5f6368"><path d="M471-80q-22.59 0-43.29-8.33Q407-96.67 390.67-113L184-320l20-25q12.67-16 31.5-22.17 18.83-6.16 38.5-.83l86 23.67V-680q0-14.17 9.62-23.75 9.61-9.58 23.83-9.58 14.22 0 23.72 9.58 9.5 9.58 9.5 23.75v424.33l-115-31 126.78 126.79q6.22 6.21 14.8 9.71 8.59 3.5 17.75 3.5h169q39 0 66.17-27.16Q733.33-201 733.33-240v-173.33q0-14.17 9.62-23.75 9.62-9.59 23.83-9.59 14.22 0 23.72 9.59 9.5 9.58 9.5 23.75V-240q0 66-47 113T640-80H471Zm13.67-286.67v-166.66q0-14.17 9.61-23.75 9.62-9.59 23.84-9.59 14.21 0 23.71 9.59 9.5 9.58 9.5 23.75v166.66h-66.66Zm124 0v-126.66q0-14.17 9.61-23.75 9.62-9.59 23.84-9.59 14.21 0 23.71 9.59 9.5 9.58 9.5 23.75v126.66h-66.66ZM571.33-270ZM880-693.33H693.33V-740h127.34q-72-62.67-158.67-98-86.67-35.33-182-35.33T298-838q-86.67 35.33-158.67 98h127.34v46.67H80V-880h46.67v89q76-61 165.66-95Q382-920 480-920q98 0 187.67 34 89.66 34 165.66 95v-89H880v186.67Z"/></svg>