add rotate support to thumbnail generator. update imageRotate field t…

…o support an initial offset.
openbroadcaster · Nov 25, 2024 · 217437f · 217437f
1 parent 13437cc
commit 217437f
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 6 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-5.3.3-20241113
+5.3.3-20241125
diff --git a/classes/core/obfhelpers.php b/classes/core/obfhelpers.php
@@ -164,7 +164,7 @@ public static function image_format($filename)
      * @param width Target width.
      * @param height Target height.
      */
-    public static function image_resize($src, $dst, $width, $height)
+    public static function image_resize($src, $dst, $width, $height, $rotate = 0)
     {
         if (!file_exists($src)) {
             trigger_error('The source file does not exist', E_USER_WARNING);
@@ -208,6 +208,8 @@ public static function image_resize($src, $dst, $width, $height)
         $im->setImageBackgroundColor('white'); // Set white background if necessary
         $im->setImageAlphaChannel(Imagick::ALPHACHANNEL_REMOVE); // Remove alpha channel
         $im->mergeImageLayers(Imagick::LAYERMETHOD_FLATTEN); // Flatten image
+        $im->rotateImage('white', $rotate);
+
         $im->thumbnailImage($width, $height, true); // Adjust width and height as necessary (maintain aspect ratio)
 
         // Set the image format and apply lossy compression

diff --git a/js/media/details.js b/js/media/details.js
@@ -42,7 +42,7 @@ OB.MediaDetails.page = function (id) {
                 imageRotate.dataset.edit = "true";
                 imageRotate.dataset.id = item.id;
                 console.log(properties);
-                imageRotate.value = properties?.rotate ?? 0;
+                imageRotate.value = imageRotate.offset = properties?.rotate ?? 0;
                 mediaDetailsSettings.appendChild(imageRotate);
                 document.querySelector(".media_details_settings_save").removeAttribute("hidden");
             });

diff --git a/models/media_model.php b/models/media_model.php
@@ -243,6 +243,7 @@ public function get_init_what($args = [])
         $this->db->what('media.status', 'status');
         $this->db->what('media.dynamic_select', 'dynamic_select');
         $this->db->what('users.display_name', 'owner_name');
+        $this->db->what('media.properties', 'properties');
 
         foreach ($args['metadata_fields'] as $metadata_field) {
             // add the field to the select portion of the query
@@ -334,6 +335,13 @@ public function thumbnail_file($args = [])
             return false;
         }
 
+        $media_properties = json_decode($media['properties'], true);
+        if ($media_properties && $media_properties['rotate']) {
+            $rotate = $media_properties['rotate'];
+        } else {
+            $rotate = null;
+        }
+
         // first search for a cached version of our resized thumbnail
         $cache_directory = OB_CACHE . '/thumbnails/media/' . $media['file_location'][0] . '/' . $media['file_location'][1];
         $thumbnail_files = glob($cache_directory . '/' . $media['id'] . '.*');
@@ -365,7 +373,7 @@ public function thumbnail_file($args = [])
         $output_file = $output_dir . '/' . $media['id'] . '.webp';
 
         // resize our image to a webp thumbnail
-        OBFHelpers::image_resize($input_file, $output_file, 600, 600);
+        OBFHelpers::image_resize($input_file, $output_file, 600, 600, $rotate);
 
         // return our file if it exists now
         if (file_exists($output_file)) {
@@ -376,6 +384,43 @@ public function thumbnail_file($args = [])
         return false;
     }
 
+    /**
+     * Clear thumbnail cache.
+     *
+     * @param media ID or media row array.
+     */
+    public function thumbnail_clear($args = [])
+    {
+        OBFHelpers::require_args($args, ['media']);
+
+        if (!is_array($args['media'])) {
+            $this->db->where('id', $args['media']);
+            $media = $this->db->get_one('media');
+
+            if (!$media) {
+                return false;
+            }
+        } else {
+            $media = $args['media'];
+        }
+
+        OBFHelpers::require_args($media, ['type', 'is_archived', 'is_approved', 'file_location']);
+        if (strlen($media['file_location']) != 2) {
+            trigger_error('Invalid media file location.', E_USER_WARNING);
+            return false;
+        }
+
+        // first search for a cached version of our resized thumbnail
+        $cache_directory = OB_CACHE . '/thumbnails/media/' . $media['file_location'][0] . '/' . $media['file_location'][1];
+        $thumbnail_files = glob($cache_directory . '/' . $media['id'] . '.*');
+
+        foreach ($thumbnail_files as $thumbnail_file) {
+            unlink($thumbnail_file);
+        }
+
+        return true;
+    }
+
     /**
      * Get permissions linked to a media item.
      *
@@ -1328,6 +1373,7 @@ public function properties($args = [])
         }
 
         if ($properties) {
+            $this->thumbnail_clear(['media' => $media_id]);
             $this->db->where('id', $media_id);
             return $this->db->update('media', ['properties' => json_encode($properties)]);
         } else {

diff --git a/ui/fields/imageRotate.js b/ui/fields/imageRotate.js
@@ -3,6 +3,7 @@ import { html, render } from "../vendor.js";
 
 class OBFieldImageRotate extends OBField {
     _value = 0;
+    _offset = 0; // how much the thumbnail is already rotated
 
     async renderEdit() {
         render(
@@ -21,6 +22,8 @@ class OBFieldImageRotate extends OBField {
 
         this.root.querySelector(".controls-left button").addEventListener("click", this.rotateLeft.bind(this));
         this.root.querySelector(".controls-right button").addEventListener("click", this.rotateRight.bind(this));
+
+        this.updateImage();
     }
 
     scss() {
@@ -76,21 +79,38 @@ class OBFieldImageRotate extends OBField {
         `;
     }
 
+    get offset() {
+        return this._offset;
+    }
+
+    set offset(offset) {
+        this._offset = offset;
+        this.updateImage();
+    }
+
     get value() {
         return this._value;
     }
 
     set value(value) {
         this._value = value;
+        this.updateImage();
+    }
+
+    updateImage() {
+        let rotate = (parseInt(this._value) - parseInt(this._offset)) % 360;
+        if (rotate < 0) {
+            rotate += 360;
+        }
 
         const thumbnail = this.root.querySelector("ob-element-thumbnail");
         if (thumbnail) {
-            thumbnail.dataset.rotate = value;
+            thumbnail.dataset.rotate = rotate;
         }
 
         const label = this.root.querySelector(".controls-label");
         if (label) {
-            label.innerText = `${value}°`;
+            label.innerText = `${this._value}°`;
         }
     }