Initial import

marko_unpacked/marko/cms/views/api/render-3d-model.php

@@ -0,0 +1,107 @@
+<?php
+/**
+ * @var $id
+ */
+
+use app\services\JWT;
+
+?>
+<?php
+$message = ['bg' => 'Зареждане', 'en' => 'Loading'];
+$close = ['bg' => 'Затвори', 'en' => 'Close'];
+$lg = $_GET['lg'] ?? 'bg';
+
+?>
+<style>
+    body {
+        padding: 0;
+        margin: 0;
+        font-family: Arial, sans-serif;
+        background: #000000;
+    }
+
+    .model-loading-progress {
+        position: fixed;
+        width: calc(100% - 20px);
+        padding: 40px;
+        background: rgba(204, 204, 204, 0.13);
+        z-index: 100;
+        bottom: 100px;
+
+    }
+
+    .model-loading-progress-load {
+        background: #857750;
+        height: 5px;
+        width: 0;
+        transition: all 0.3s;
+    }
+    .loading-message {
+        font-size: 20px;
+        color: #FFFFFF;
+        text-align: center;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+    }
+    .loading-dots { display: flex; margin-top: -12px; margin-left: 5px}
+    .loading-dots i {
+        font-size: 30px;
+        color: #FFFFFF;
+        display: block;
+        font-style: normal;
+        margin: 2px;
+    }
+
+    .loading-dots i {
+        animation-name: blink;
+        animation-duration: 1.4s;
+        animation-iteration-count: infinite;
+        animation-fill-mode: both;
+        transform: scale(1);
+    }
+    .loading-dots i:nth-child(2) { animation-delay: .2s; }
+    .loading-dots i:nth-child(3) { animation-delay: .4s; }
+
+    @keyframes blink {
+        0% {
+            opacity: .1;
+        }
+        20% {
+            opacity: 1;
+            transform: scale(1.2);
+        }
+        100% {
+            opacity: .1;
+        }
+    }
+    .model-title {
+        font-size: 20px;
+        text-align: center;
+        position: relative;
+        top: 100px;
+        color: #FFFFFF;
+    }
+</style>
+<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+<model-viewer id="modelView" style="width: 100%; height: 100%" src="/api/stream-file/<?= $id ?>/" shadow-intensity="1"
+              camera-controls touch-action="pan-y" slot="progress-bar"></model-viewer>
+<div class="model-loading-progress">
+    <div class="loading-message"><?= $message[$lg] ?>  <span class="loading-dots"><i>.</i><i>.</i><i>.</i></span></div>
+    <div class="model-loading-progress-load"></div>
+</div>
+<script>
+    const modelView = document.querySelector('#modelView');
+    const modelLoadingProgress = document.querySelector('.model-loading-progress');
+    const modelLoadingProgressLoad = document.querySelector('.model-loading-progress-load');
+    modelView.addEventListener('progress', (event) => {
+        if (event.detail && event.detail.totalProgress) {
+            modelLoadingProgressLoad.setAttribute('style', `width: ${100*event.detail.totalProgress}%`)
+        }
+    })
+    modelView.addEventListener('load', () => {
+        modelLoadingProgress.remove()
+    }, true)
+</script>
+
+<?= $this->render('/api/_mobile_view_mode', ['close' => $close[$lg], 'lg' => $lg]) ?>