STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

thumbnail support

Browse Source
This commit is contained in:
James Collins
2023-07-27 14:36:46 +10:00
parent 0c4c36eb74
commit dd8e59cd4f
6 changed files with 159 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/Jobs/StoreUploadedFileJob.php
View File

@@ -4,6 +4,7 @@ namespace App\Jobs;
use App\Models\Media;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Container\BindingResolutionException;
use Illuminate\Contracts\Queue\ShouldBeUnique;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
@@ -12,6 +13,8 @@ use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\Exception\NotWritableException;
use Intervention\Image\Exception\NotSupportedException;
use SplFileInfo;
use Symfony\Component\HttpFoundation\File\UploadedFile;
use Intervention\Image\Facades\Image;
@@ -63,6 +66,8 @@ class StoreUploadedFileJob implements ShouldQueue
/**
* Execute the job.
*
* @return void
*/
public function handle(): void
{
@@ -195,6 +200,8 @@ class StoreUploadedFileJob implements ShouldQueue
$this->media->variants = $variants;
}//end if
$this->generateThumbnail();
if (strlen($this->uploadedFilePath) > 0) {
unlink($this->uploadedFilePath);
}
@@ -208,4 +215,92 @@ class StoreUploadedFileJob implements ShouldQueue
$this->fail($e);
}//end try
}
/**
* Generate a Thumbnail for this media.
*
* @return void
*/
public function generateThumbnail(): void
{
$thumbnailWidth = 200;
$thumbnailHeight = 200;
$storageDisk = $this->media->storage;
$fileName = $this->media->name;
$filePath = $this->uploadedFilePath;
$fileExtension = File::extension($fileName);
$mimeType = $this->media->mime_type;
$tempImagePath = tempnam(sys_get_temp_dir(), 'thumb');
$newFilename = pathinfo($fileName, PATHINFO_FILENAME) . "-thumb.webp";
$success = false;
// $ffmpegPath = '/usr/bin/ffmpeg';
$ffmpegPath = '/opt/homebrew/bin/ffmpeg';
if (strpos($mimeType, 'image/') === 0) {
$image = Image::make($filePath);
$image->fit($thumbnailWidth, $thumbnailHeight);
$image->encode('webp', 75)->save($tempImagePath);
$success = true;
} elseif ($mimeType === 'application/pdf' && extension_loaded('imagick') === true) {
$pdfPreview = new \Imagick();
$pdfPreview->setResolution(300, 300);
$pdfPreview->readImage($filePath . '[0]');
$pdfPreview->setImageFormat('webp');
$pdfPreview->thumbnailImage($thumbnailWidth, $thumbnailHeight, true);
file_put_contents($tempImagePath, $pdfPreview);
$success = true;
} elseif ($mimeType === 'text/plain') {
$image = Image::canvas($thumbnailWidth, $thumbnailHeight, '#FFFFFF');
// Read the first few lines of the text file
$numLines = 5;
$text = file_get_contents($filePath);
$lines = explode("\n", $text);
$previewText = implode("\n", array_slice($lines, 0, $numLines));
// Center the text on the image
$fontSize = 8;
$textColor = '#000000'; // Black text color
// Calculate the position to start drawing the text
$x = 10; // Left padding
$y = 10; // Top padding
// Draw the text on the canvas with text wrapping
$lines = explode("\n", wordwrap($previewText, 30, "\n", true));
foreach ($lines as $line) {
$image->text($line, $x, $y, function ($font) use ($fontSize, $textColor) {
$font->file(1);
$font->size($fontSize);
$font->color($textColor);
});
// Move to the next line
$y += ($fontSize + 4); // Add some vertical spacing between lines (adjust as needed)
}
$image->encode('webp', 75)->save($tempImagePath);
$success = true;
} elseif (file_exists($ffmpegPath) === true && strpos($mimeType, 'video/') === 0) {
$tempImagePath .= '.webp';
exec("$ffmpegPath -i $filePath -ss 00:00:05 -vframes 1 -s {$thumbnailWidth}x{$thumbnailHeight} -c:v webp {$tempImagePath}");
$success = true;
}//end if
if ($success === true && file_exists($tempImagePath) === true) {
Storage::disk($storageDisk)->putFileAs('/', new SplFileInfo($tempImagePath), $newFilename);
unlink($tempImagePath);
$this->media->thumbnail = $this->media->getUrlPath() . $newFilename;
} else {
$fileIconPath = '/assets/fileicons/' . ($fileExtension !== '' && file_exists(public_path('assets/fileicons/' . $fileExtension . '.webp')) ? $fileExtension : 'unknown') . '.webp';
$this->media->thumbnail = asset($fileIconPath);
}
}
}

1
app/Models/Media.php
View File

@@ -71,6 +71,7 @@ class Media extends Model
'description' => '',
'dimensions' => '',
'permission' => '',
'thumbnail' => '',
];
/**

28
database/migrations/2023_07_26_235416_add_thumbnail_to_media_table.php Normal file
View File

@@ -0,0 +1,28 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('media', function (Blueprint $table) {
$table->string('thumbnail')->default('');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('media', function (Blueprint $table) {
$table->dropColumn('thumbnail');
});
}
};

42
resources/js/components/dialogs/SMDialogMedia.vue
View File

@@ -131,28 +131,28 @@
@dblclick="handleDblClickItem(item.id)">
<div
:class="[
'flex',
'flex-items-center',
'flex-justify-center',
'h-30',
'w-40',
'bg-contain',
'bg-center',
'bg-no-repeat',
'relative',
{ 'mb-6': showMediaName(item) },
]"
:style="{
backgroundImage:
item.url.length > 0
? `url('${mediaGetVariantUrl(
backgroundImage: `url('${mediaGetThumbnail(
item,
'small',
)}')`
: 'none',
)}')`,
backgroundColor:
item.status === 'OK'
? 'initial'
: 'rgba(220,220,220,1)',
}">
<div
v-if="showMediaName(item)"
class="absolute -bottom-6 small w-full text-ellipsis overflow-hidden whitespace-nowrap">
{{ item.title }}
</div>
<SMLoading
v-if="
item.status !== 'OK' &&
@@ -230,12 +230,7 @@
<div
class="flex text-xs border-b border-gray-3 pb-4">
<img
:src="
mediaGetVariantUrl(
lastSelected,
'thumb',
)
"
:src="mediaGetThumbnail(lastSelected)"
class="max-h-20 max-w-20 mr-2" />
<div class="flex flex-col">
<p class="m-0 text-bold">
@@ -343,13 +338,9 @@
'media-selected-list-item',
]"
:style="{
backgroundImage:
item.url.length > 0
? `url('${mediaGetVariantUrl(
backgroundImage: `url('${mediaGetThumbnail(
item,
'thumb',
)}')`
: 'none',
)}')`,
backgroundColor:
item.status === 'OK'
? 'initial'
@@ -443,7 +434,7 @@ import {
MediaResponse,
} from "../../helpers/api.types";
import { useApplicationStore } from "../../store/ApplicationStore";
import { mediaGetVariantUrl, mimeMatches } from "../../helpers/media";
import { mediaGetThumbnail, mimeMatches } from "../../helpers/media";
import SMInput from "../SMInput.vue";
import SMLoading from "../SMLoading.vue";
import SMTabGroup from "../SMTabGroup.vue";
@@ -593,6 +584,13 @@ const getMediaItem = (item_id: string): Media | null => {
return found;
};
const showMediaName = (media: Media): boolean => {
return !(
media.mime_type.startsWith("image/") ||
media.mime_type.startsWith("video/")
);
};
/**
* Handle user clicking the cancel/close button.
*/

1
resources/js/helpers/api.types.ts
View File

@@ -71,6 +71,7 @@ export interface Media {
status: string;
storage: string;
url: string;
thumbnail: string;
description: string;
dimensions: string;
variants: { [key: string]: string };

12
resources/js/helpers/media.ts
View File

@@ -37,3 +37,15 @@ export const mimeMatches = (
return regex.test(mimeToCheck);
};
export const mediaGetThumbnail = (media: Media): string => {
if (!media) {
return "";
}
if (media.thumbnail && media.thumbnail.length > 0) {
return media.thumbnail;
}
return mediaGetVariantUrl(media, "thumb");
};