]> _ Git - fluidbook_tools.git/commitdiff
wait #4686 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 31 Aug 2023 14:57:24 +0000 (16:57 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 31 Aug 2023 14:57:24 +0000 (16:57 +0200)
src/Links/LottieLink.php

index 485c863bca20487bb0f57ef569dfd04cfcc8ca96..64a8789b99845f1dced91b8bf3e6cf8cf1d8553b 100644 (file)
@@ -6,6 +6,7 @@ use Cubist\Util\CSS;
 use Cubist\Util\Files\Files;
 use Cubist\Util\Graphics\Color;
 use Cubist\Util\Json;
+use Illuminate\Support\Facades\Cache;
 use SplFileInfo;
 
 class LottieLink extends HTMLMultimediaLink
@@ -22,11 +23,21 @@ class LottieLink extends HTMLMultimediaLink
         if ($this->_content == '') {
             $ext = files::getExtension($this->to);
 
+            $bgc = new Color($this->background);
+            $data = [
+                'background' => $bgc->toCSS(),
+                'loop' => ($this->video_loop ? 'true' : 'false'),
+                'autoplay' => ($this->video_auto_start ? 'true' : 'false'),
+                'renderer' => $this->renderer,
+            ];
+
+            $replaceHTML = false;
             if ($ext === 'zip') {
                 $d = $this->unzipFile($this->to, false);
                 $this->_config = $this->getConfigZIP($d['dir']);
-
                 $htmlfile = $d['dir'] . '/index.html';
+
+                $replaceHTML = true;
             } elseif ($ext === 'html') {
                 $fdir = 'data/links';
                 $dir = $fdir;
@@ -34,23 +45,42 @@ class LottieLink extends HTMLMultimediaLink
                 $this->_config = $this->getConfigHTML($d['dir'], $this->to);
                 $this->copyExternalFile($d['dir'] . '/' . $this->to);
                 $htmlfile = $this->compiler->working_path($this->to);
+                $replaceHTML = true;
+            } else if ($ext === 'json') {
 
+                $jsonFile = $this->compiler->working_path($this->to);
+                $jsonContent = file_get_contents($jsonFile);
+                $o = json_decode($jsonContent, true);
+                $fdir = 'data/links';
+                $d = array('fdir' => $fdir, 'dir' => $this->compiler->working_path());
+                $htmlFileName = 'lottie_json_' . Files::hashFileAttributes($jsonFile, $data) . '.html';
+                $htmlfile = $this->compiler->working_path($htmlFileName);
+                if (!file_exists($htmlfile)) {
+                    $data['animation'] = $jsonContent;
+                    file_put_contents($htmlfile, self::_getJSONHTML($data));
+                }
+                $this->_config = array('type' => 'html', 'width' => $o['w'], 'height' => $o['h'], 'html' => $htmlFileName, 'inject' => array(), 'injectcss' => array(), 'injectjs' => array());
             }
 
+            if ($replaceHTML) {
+                $html = file_get_contents($htmlfile);
 
-            $html = file_get_contents($htmlfile);
-            $bgc = new Color($this->background);
-            $html = preg_replace('/background-color:.*$/m', 'background-color:' . $bgc->toCSS() . ';', $html);
-            $html = preg_replace('/loop:\s*(true|false),\s*$/m', 'loop: ' . ($this->video_loop ? 'true' : 'false') . ',', $html);
-            $html = preg_replace('/autoplay:\s*(true|false),\s*$/m', 'autoplay: ' . ($this->video_auto_start ? 'true' : 'false') . ',', $html);
-            $html = preg_replace('/renderer:\s*\'(svg|canvas|html)\',\s*$/m', 'renderer: \'' . $this->renderer . '\',', $html);
-            $replacedHTML = $this->_htmlReplacedName($htmlfile);
-            file_put_contents($replacedHTML, $html);
+                $html = preg_replace('/background-color:.*$/m', 'background-color:' . $data['background'] . ';', $html);
+                $html = preg_replace('/loop:\s*(true|false),\s*$/m', 'loop: ' . $data['loop'] . ',', $html);
+                $html = preg_replace('/autoplay:\s*(true|false),\s*$/m', 'autoplay: ' . $data['autoplay'] . ',', $html);
+                $html = preg_replace('/renderer:\s*\'(svg|canvas|html)\',\s*$/m', 'renderer: \'' . $data['renderer'] . '\',', $html);
+                $replacedHTML = $this->_htmlReplacedName($htmlfile, $replaceHTML);
+                file_put_contents($replacedHTML, $html);
+            } else {
+                $replacedHTML = $this->_htmlReplacedName($htmlfile, $replaceHTML);
+            }
 
             if ($ext === 'zip') {
                 $this->copyExternalDir($d['dir'], $d['fdir']);
+            } else if ($ext == 'html') {
+                $this->compiler->getVirtualDirectory()->copy($replacedHTML, $d['fdir'] . '/' . $this->_htmlReplacedName($this->to, $replaceHTML));
             } else {
-                $this->compiler->getVirtualDirectory()->copy($replacedHTML, $d['fdir'] . '/' . $this->_htmlReplacedName($this->to));
+                $this->compiler->getVirtualDirectory()->copy($replacedHTML, $d['fdir'] . '/' . $this->_htmlReplacedName($this->_config['html'], $replaceHTML));
             }
 
 
@@ -64,7 +94,7 @@ class LottieLink extends HTMLMultimediaLink
             $res = '';
             $s = $this->in_popup ? 1 : $this->getCssScale();
             if ($this->_config['html']) {
-                $this->_url = $d['fdir'] . '/' . $this->_htmlReplacedName($this->_config['html']);
+                $this->_url = $d['fdir'] . '/' . $this->_htmlReplacedName($this->_config['html'], $replaceHTML);
                 if ($this->extra) {
                     $this->_url .= '?' . $this->extra;
                 }
@@ -79,8 +109,62 @@ class LottieLink extends HTMLMultimediaLink
         return $this->_content;
     }
 
-    protected function _htmlReplacedName($html)
+    protected function _htmlReplacedName($filename, $replace = true)
     {
-        return str_replace('.html', '.r.html', $html);
+        if (!$replace) {
+            return $filename;
+        }
+        return str_replace('.html', '.r.html', $filename);
+    }
+
+    protected static function _getJSONHTML($data)
+    {
+        $html = '<html xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="UTF-8">
+<head>
+    <style>
+        body{
+            background-color:$background;
+            margin: 0px;
+            height: 100%;
+            overflow: hidden;
+        }
+        #lottie{
+            background-color:$background;
+            width:100%;
+            height:100%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            text-align: center;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+<div id="lottie"></div>
+<script>' . Cache::rememberForever('lottiejs', function () {
+                return file_get_contents('https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js');
+            }) . '</script>
+<script>
+    lottie.loadAnimation({
+        container: document.getElementById("lottie"),
+        renderer: "$renderer",
+        loop: $loop,
+        autoplay: $autoplay,
+        animationData: $animation,
+    });
+</script>
+</body>
+</html>';
+        return self::_replaceData($html, $data);
+    }
+
+    protected static function _replaceData($html, $data)
+    {
+        foreach ($data as $k => $v) {
+            $html = str_replace('$' . $k, $v, $html);
+        }
+        return $html;
     }
 }