Add Image-Gif Widget

docs/widgets/(Widget)-Image-Gif.md

@@ -0,0 +1,61 @@
+# Image/Gif Widget Configuration
+
+| Option                  | Type    | Default                                      | Description                                                                 |
+|-------------------------|---------|----------------------------------------------|-----------------------------------------------------------------------------|
+| `label`                 | string  | ``                                     | The primary label format.                                                   |
+| `label_alt`             | string  | `{file_path}` | The alternative label format.  
+| `update_interval`       | integer | `5000`                                       | The interval in milliseconds to update the widget.                          |
+| `file_path`       | string | ``                                       | Path to file. Can be : png, jpg, gif, webp                        |
+| `speed`| integer | `100`                                      | Playback speed (percentage)                |
+| `height`| integer | `24`                                      | Height of the image/gif inside the bar. Can act differently if **KeepAspectRatio** is **True** or **False**                |
+| `width`      | integer    | `24` | Width of the image/gif inside the bar. Can act differently if **KeepAspectRatio** is **True** or **False**                                       |
+| `keep_aspect_ratio`     | boolean    | `True` | Keep aspect ratio of current image/gif 
+| `callbacks`             | dict    | `{on_left: 'toggle_label', on_middle: 'pause_gif', on_right: 'do_nothing'}` | Callback functions for different mouse button actions.                      |
+| `animation`         | dict    | `{'enabled': True, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
+| `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
+| `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
+
+## Example Configuration
+```yaml
+gif:
+    type: "yasb.image.ImageWidget"
+    options:
+      label: ""
+      label_alt: "{file_path}"
+      file_path: "C:\\Users\\stant\\Desktop\\your_file.gif"
+      update_interval: 5000
+      callbacks:
+        on_left: "toggle_label"
+        on_middle: "pause_gif"
+        on_right: "do_nothing"
+      speed: 100
+      height: 24
+      width: 24
+      keep_aspect_ratio: True
+```
+
+## Description of Options
+
+- **label**: The primary label format for the widget. You can use placeholders like `{file_path}`, `{speed}` or `{file_name}` here.
+- **label_alt**: The alternative label format for the widget.
+- **update_interval**: The interval in milliseconds to update the widget.
+- **file_path**: A string that contain the path to the file. It can be : **png, jpg, gif, webp**
+- **speed**: Playback speed. Only useful if current file is a gif or a webp. 100 = normal speed, 50 = half speed, 200 = x2 speed
+- **height**: Height of the image/gif inside the bar. Can act differently if **KeepAspectRatio** is **True** or **False**
+- **width**: Width of the image/gif inside the bar. Can act differently if **KeepAspectRatio** is **True** or **False**
+- **keep_aspect_ratio**: A boolean indicating whether to keep current file aspect ratio when displayed.
+- **callbacks**: A dictionary specifying the callbacks for mouse events. It contains:
+    - **on_left**: The name of the callback function for left mouse button click.
+    - **on_middle**: The name of the callback function for middle mouse button click.
+    - **on_right**: The name of the callback function for right mouse button click.
+- **animation**: A dictionary specifying the animation settings for the widget. It contains three keys: `enabled`, `type`, and `duration`. The `type` can be `fadeInOut` and the `duration` is the animation duration in milliseconds.
+- **container_shadow**: Container shadow options.
+- **label_shadow**: Label shadow options.
+
+## Example Style
+```css
+.image-gif-widget {}
+.image-gif-widget .widget-container {}
+.image-gif-widget .widget-container .label {}
+.image-gif-widget .widget-container .label.alt {}
+```

src/config.yaml

@@ -39,29 +39,29 @@ bars:
       right: 4
     widgets:
       left:
-      - "home"
-      - "komorebi_workspaces"
-      - "komorebi_active_layout"
-      - "active_window"
+        - "home"
+        - "komorebi_workspaces"
+        - "komorebi_active_layout"
+        - "active_window"
       center:
-      - "clock"
+        - "clock"
       right:
-      - "media"
-      - "weather"
-      - "microphone"
-      - "volume"
-      - "notifications"
-      - "power_menu"
+        - "media"
+        - "weather"
+        - "microphone"
+        - "volume"
+        - "notifications"
+        - "power_menu"
 widgets:
   home:
     type: "yasb.home.HomeWidget"
     options:
       label: "<span>\udb81\udf17</span>"
       menu_list:
-      - { title: "User Home", path: "~" }
-      - { title: "Download", path: "~\\Downloads" }
-      - { title: "Documents", path: "~\\Documents" }
-      - { title: "Pictures", path: "~\\Pictures" }
+        - { title: "User Home", path: "~" }
+        - { title: "Download", path: "~\\Downloads" }
+        - { title: "Documents", path: "~\\Documents" }
+        - { title: "Pictures", path: "~\\Pictures" }
       system_menu: true
       power_menu: true
       blur: false
@@ -131,7 +131,7 @@ widgets:
       label: "{%a, %d %b %H:%M}"
       label_alt: "{%A, %d %B %Y %H:%M}"
       timezones: []
-      calendar: 
+      calendar:
         blur: false
         round_corners: false
         alignment: "center"

src/core/validation/widgets/yasb/image_gif.py

@@ -0,0 +1,108 @@
+DEFAULTS = {
+    "label": "",
+    "label_alt": "{file_path}",
+    "file_path": "",
+    "width": 24,
+    "height": 24,
+    "speed": 100,
+    "keep_aspect_ratio": True,
+    "update_interval": 5000,
+    "animation": {"enabled": True, "type": "fadeInOut", "duration": 200},
+    "container_padding": {"top": 0, "left": 0, "bottom": 0, "right": 0},
+    "callbacks": {"on_left": "toggle_label", "on_middle": "pause_gif", "on_right": "do_nothing"},
+}
+
+VALIDATION_SCHEMA = {
+    "label": {
+        "type": "string",
+        "default": DEFAULTS["label"],
+    },
+    "label_alt": {
+        "type": "string",
+        "default": DEFAULTS["label_alt"],
+    },
+    "file_path": {
+        "type": "string",
+        "default": DEFAULTS["file_path"],
+    },
+    "width": {
+        "type": "integer",
+        "default": DEFAULTS["width"],
+    },
+    "height": {
+        "type": "integer",
+        "default": DEFAULTS["height"],
+    },
+    "speed": {
+        "type": "integer",
+        "default": DEFAULTS["speed"],
+    },
+    "keep_aspect_ratio": {
+        "type": "boolean",
+        "default": DEFAULTS["keep_aspect_ratio"],
+    },
+    "update_interval": {
+        "type": "integer",
+        "default": DEFAULTS["update_interval"],
+    },
+    "callbacks": {
+        "type": "dict",
+        "schema": {
+            "on_left": {
+                "type": "string",
+                "nullable": True,
+                "default": DEFAULTS["callbacks"]["on_left"],
+            },
+            "on_middle": {
+                "type": "string",
+                "nullable": True,
+                "default": DEFAULTS["callbacks"]["on_middle"],
+            },
+            "on_right": {"type": "string", "nullable": True, "default": DEFAULTS["callbacks"]["on_right"]},
+        },
+        "default": DEFAULTS["callbacks"],
+    },
+    "container_padding": {
+        "type": "dict",
+        "required": False,
+        "schema": {
+            "top": {"type": "integer", "default": DEFAULTS["container_padding"]["top"]},
+            "left": {"type": "integer", "default": DEFAULTS["container_padding"]["left"]},
+            "bottom": {"type": "integer", "default": DEFAULTS["container_padding"]["bottom"]},
+            "right": {"type": "integer", "default": DEFAULTS["container_padding"]["right"]},
+        },
+        "default": DEFAULTS["container_padding"],
+    },
+    "animation": {
+        "type": "dict",
+        "required": False,
+        "schema": {
+            "enabled": {"type": "boolean", "default": DEFAULTS["animation"]["enabled"]},
+            "type": {"type": "string", "default": DEFAULTS["animation"]["type"]},
+            "duration": {"type": "integer", "default": DEFAULTS["animation"]["duration"], "min": 0},
+        },
+        "default": DEFAULTS["animation"],
+    },
+    "label_shadow": {
+        "type": "dict",
+        "required": False,
+        "schema": {
+            "enabled": {"type": "boolean", "default": False},
+            "color": {"type": "string", "default": "black"},
+            "offset": {"type": "list", "default": [1, 1]},
+            "radius": {"type": "integer", "default": 3},
+        },
+        "default": {"enabled": False, "color": "black", "offset": [1, 1], "radius": 3},
+    },
+    "container_shadow": {
+        "type": "dict",
+        "required": False,
+        "schema": {
+            "enabled": {"type": "boolean", "default": False},
+            "color": {"type": "string", "default": "black"},
+            "offset": {"type": "list", "default": [1, 1]},
+            "radius": {"type": "integer", "default": 3},
+        },
+        "default": {"enabled": False, "color": "black", "offset": [1, 1], "radius": 3},
+    },
+}