From 277ebd6a1179896313d65a58c180d99c67d249f2 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 15 Jun 2022 15:01:38 +0200 Subject: [PATCH] wip #4210 @1.5 --- app/Console/Commands/ThemePreview.php | 34 +++++++++++++++++++ .../Admin/FluidbookThemePreviewController.php | 23 +++++++++++++ app/Jobs/GenerateThemePreview.php | 10 ++++-- app/Models/FluidbookTheme.php | 9 +++-- package.json | 8 +++-- .../js/social_screenshot/social_screenshot.js | 12 ++++--- .../fields/fluidbook_theme_selector.blade.php | 7 ++-- .../views/fluidbook_theme/preview.blade.php | 2 +- routes/web.php | 3 +- 9 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 app/Console/Commands/ThemePreview.php create mode 100644 app/Http/Controllers/Admin/FluidbookThemePreviewController.php diff --git a/app/Console/Commands/ThemePreview.php b/app/Console/Commands/ThemePreview.php new file mode 100644 index 000000000..bb23b0945 --- /dev/null +++ b/app/Console/Commands/ThemePreview.php @@ -0,0 +1,34 @@ +argument('id'); + /** @var Builder $q */ + $q = FluidbookTheme::where('created_ok', '1'); + if (null !== $themeId) { + $themeIds = ArrayUtil::parseRange($themeId); + $q->whereIn('id', $themeIds); + } + $themes = $q->get(); + $this->progressBar = $this->output->createProgressBar(count($themes)); + $this->progressBar->start(); + + foreach ($themes as $theme) { + dispatch_sync(new GenerateThemePreview($theme)); + $this->progressBar->advance(); + } + } +} diff --git a/app/Http/Controllers/Admin/FluidbookThemePreviewController.php b/app/Http/Controllers/Admin/FluidbookThemePreviewController.php new file mode 100644 index 000000000..879ebb043 --- /dev/null +++ b/app/Http/Controllers/Admin/FluidbookThemePreviewController.php @@ -0,0 +1,23 @@ +setStatusCode(404); + } + if (!$theme->canList(backpack_user())) { + return response()->setStatusCode(403); + } + return $this->xSendFile(GenerateThemePreview::getPreviewPath($theme->id)); + } +} diff --git a/app/Jobs/GenerateThemePreview.php b/app/Jobs/GenerateThemePreview.php index 8f94ef478..c49c72d72 100644 --- a/app/Jobs/GenerateThemePreview.php +++ b/app/Jobs/GenerateThemePreview.php @@ -34,14 +34,18 @@ class GenerateThemePreview extends Base */ public function handle() { + $path = self::getPreviewPath($this->theme->getIdValue()); + $cl = new CommandLine('node'); $cl->setArg(null, resource_path('js/social_screenshot/social_screenshot.js')); $cl->setArg('width', 1024); $cl->setArg('height', 768); - $cl->setArg('delay', 4); + $cl->setArg('delay', 2); $cl->setArg('scale', 1); - $cl->setArg('dest', self::getPreviewPath($this->theme->getIdValue())); - $cl->setArg('url', $this->theme->getPreviewURL(['shortLoading' => 1])); + $cl->setArg('dest', $path); + $cl->setArg('page', 2); + $url = $this->theme->getPreviewURL(['shortLoading' => 1, 'transition' => 1]); + $cl->setArg('url', $url); $cl->execute(); } diff --git a/app/Models/FluidbookTheme.php b/app/Models/FluidbookTheme.php index 054c5fd3d..3e03f58eb 100644 --- a/app/Models/FluidbookTheme.php +++ b/app/Models/FluidbookTheme.php @@ -646,6 +646,11 @@ class FluidbookTheme extends ToolboxModel { parent::postSave(); self::updateWS2Table($this->id); + $this->_generateThemePreview(); + } + + protected function _generateThemePreview($sync = false) + { dispatch(new GenerateThemePreview($this))->onQueue('theme'); } @@ -653,7 +658,7 @@ class FluidbookTheme extends ToolboxModel { parent::postCreate(); self::updateWS2Table($this->id); - dispatch(new GenerateThemePreview($this))->onQueue('theme'); + $this->_generateThemePreview(); } public function postDelete() @@ -789,7 +794,7 @@ class FluidbookTheme extends ToolboxModel $type = 'jpeg'; $b = base64_encode(file_get_contents($f)); } - return ''; + return ''; } public function getNameAndIdAttribute() diff --git a/package.json b/package.json index 06750799c..e4eacad6a 100644 --- a/package.json +++ b/package.json @@ -27,14 +27,16 @@ "laravel-mix": "^5.0.1", "lodash": "^4.17.13", "resolve-url-loader": "^3.1.0", - "sass": "^1.49.7", + "sass": "^1.49.9", "sass-loader": "^8.0.0", "vue-template-compiler": "^2.6.14", "webfont": "^11.2.26" }, "dependencies": { - "pdfjs-dist": "^2.12.313", + "command-line-args": "^5.2.1", + "pdfjs-dist": "^2.13.216", "pipwerks-scorm-api-wrapper": "^0.1.2", - "plyr": "^3.6.12" + "plyr": "^3.6.12", + "puppeteer": "^14.4.0" } } diff --git a/resources/js/social_screenshot/social_screenshot.js b/resources/js/social_screenshot/social_screenshot.js index d9e418421..e0f909dd8 100644 --- a/resources/js/social_screenshot/social_screenshot.js +++ b/resources/js/social_screenshot/social_screenshot.js @@ -6,21 +6,23 @@ const optionDefinitions = [ {name: 'delay', type: Number, defaultOption: 10}, {name: 'scale', type: Number, defaultOption: 1}, {name: 'width', type: Number, defaultOption: 1920}, - {name: 'height', type: Number, defaultOption: 1080} + {name: 'height', type: Number, defaultOption: 1080}, + {name: 'page', type: Number, defaultOption: 2} ]; (async () => { const options = commandLineArgs(optionDefinitions); const browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); - page.on('console', msg => console.log('PAGE LOG:', msg._text)); await page.setViewport({ width: options.width / options.scale, height: options.height / options.scale, deviceScaleFactor: options.scale, }); - await page.goto(options.url); - await new Promise(r => setTimeout(r, 1000 * options.delay)); + await page.goto(options.url, {waitUntil: 'networkidle2'}); + await new Promise(r => setTimeout(r, 1000 * (options.delay -1))); + await page.evaluate(() => fluidbook.setCurrentPage(2)); + await new Promise(r => setTimeout(r, 1000)); await page.screenshot({path: options.dest, type: 'jpeg', quality: 95}); await browser.close(); -})(); \ No newline at end of file +})(); diff --git a/resources/views/fields/fluidbook_theme_selector.blade.php b/resources/views/fields/fluidbook_theme_selector.blade.php index 3b30b80c1..6fccd0512 100644 --- a/resources/views/fields/fluidbook_theme_selector.blade.php +++ b/resources/views/fields/fluidbook_theme_selector.blade.php @@ -14,7 +14,7 @@ function resizeThemeSelector() { var ifr = $('.themeSelector iframe'); - var ih = ifr.outerWidth() * 0.62; + var ih = ifr.outerWidth() * 0.75; ifr.css('height', ih); $('.themeSelector .preview').css('max-height', (ih / 2) + 10); } @@ -106,7 +106,7 @@ } .themeSelector .preview { - width: 60%; + width: 55%; display: inline-block; overflow: hidden; } @@ -121,9 +121,10 @@ .themeSelector .actions { display: inline-block; - width: 40%; + width: 45%; vertical-align: top; padding: 0 0 0 20px; + white-space: normal; } .themeSelector .actions a { diff --git a/resources/views/fluidbook_theme/preview.blade.php b/resources/views/fluidbook_theme/preview.blade.php index 8002b95b5..c3c0b50f6 100644 --- a/resources/views/fluidbook_theme/preview.blade.php +++ b/resources/views/fluidbook_theme/preview.blade.php @@ -47,7 +47,7 @@