MinPluto/Zorn
MinPluto/Zorn
1
Fork 0
Code Issues 1 Pull requests Releases 1 Activity

1 release 1 tag

  • v0.5.0 45004d67e9

    v0.5.0 Stable

    Korbs released this 2025-02-05 15:27:13 -05:00 | 6 commits to main since this release

    Summary

    This release of Zorn allows you change the icons with packs included, all-new and overhauled settings and menus, and adding a custom context menu is now possible.

    The title, seek tooltip, and Invalid Date error have been fixed.

    New and Improved

    Icon Packs

    Previously, Zorn has been shipped with Iconoir icons hard coded into it's buttons, with this release the developer can now decide which pack to use.

    Now, Zorn ships with the following supported:

    • Bootstrap
    • Heroicons
    • Iconoir
    • Phosphor
    • Remix
    • Custom

    There are no plans to support Font Awesome.

    When changing the icon pack, it is applied to all icons in the player. Use the Icons variable to change it.

    ...
Icons="Phosphor"
...

    To use custom icons from your own library or to use an icon pack not listed above, add your icons in your /public/ folder:

    astro-website
│   astro.config.js
└───public
|   └───zorn-icons
|   |   |   exitfullscreen.svg
│   │   |   fullscreen.svg
│   │   |   pause.svg
|   |   |   pictureinpicture.svg
│   │   |   play.svg
│   │   |   playbackrate.svg
|   |   |   quality.svg
|   |   |   seekbackwards.svg
|   |   |   seekforwards.svg
│   │   |   settings.svg
|   |   |   subtitles.svg
│   │   |   volumehigh.svg
│   │   |   volumelow.svg
│   │   |   volumemed.svg
|   |   |   volumemute.svg

    Themes

    Themes are introduced in this release of Zorn, which provides different styles to the player.

    To change the theme, enable the Themes variable and change it:

    
...
Themes="WildCherry"
...

    Getting statements and variables to work correctly with stylesheets got very complicated and complex due to conflicts. This is set for v.0.6.0 and for styling to be completely overhauled in the next version.

    Title

    The title variable for Zorn has been fixed and will now show up properly in fullscreen, where it is visible. A new option has been added as secondary text, which fits below the main text in a smaller font size.

    A link can now be set to the main text by applying a TitleLink option to your player, this will also underline the main text indicating to the end-user that it is a link. It will open the applied link into a new tab.

    Overhauled Menus

    New Context Menu Overhauled Settings Menu

    All menus and custom settings have been overhauled in this release of Zorn, which uses an array to use custom menu items and more. This also goes for the new context menu and quality menu.

    To use this, if you want to add your own items to a settings menu, enable the Settings variable and add an array with your menu items:

    ...
Settings={
    [
        {
            "Type": "Link",
            "Name": "Download",
            "Action": "#",
        },
        {
            "Type": "Button",
            "Name": "Secondary Action",
            "Action": "null",
        },
        {
            "Type": "Button",
            "Name": "Third Action",
            "Action": "null",
        }
    ]
}
...

    You would use Type to change the item to either a button(<button>) or link(<a>).

    The action is also affected by the Type option. So, if it is set as a Button, then the action is applied to the onclick attribute; if it set as a Link, then the action is applied to the href attribute, it will open the applied link into a new tab..

    Context Menus

    Custom context menus have finanlly been added to Zorn, with this end-users can right-click anywhere on the video player and a custom menu will appear where their cursor lands.

    To add a custom context menu, just enable the ContextItems variable and add an array with your items:

    ...
ContextItems={
    [
        {
            "Type": "Button",
            "Name": "Copy URL",
            "Action": "null",
        },
        {
            "Type": "Link",
            "Name": "Copy URL with Timestamp",
            "Action": "#",
        }
    ]
}
...

    Fixes

    Seek Tooltip

    The seek tooltip has been changed where it now hovers over the cursor, depending on where it lands. Older releases of Zorn had this too, but it kept ending up in the wrong spot as the getBoundingClientRect() function was treated wrong using the entire page's X axis instead of the Zorn player's seekbar itself. Changing the getBoundingClientRect() function to use the seekbar instead has fixed this and the tooltip has been reverted back to hovering over the cursor again.

    No More Invalid Date Error

    The video duration starts out as --:-- as text in the video player, if the actual duration isn't loaded in by the time the seek function is activated then a Uncaught RangeError: invalid date error will occur.

    To fix this, an event listener was added to Zorn to detect durationchange, this will trigger the seek function once the duration has actually been updated properly by Zorn.

    Breaking Changes

    Settings Slot

    Setting menus were overhauled which means slots for menu and extra-menus will no longer work. You'll need to convert the menu slot into an array with the Settings variable of your Zorn player. Check the Overhauled Menus section of this release.

    Downloads