bitPickups/ad-aures_castoPod
1
0
Fork 0
mirror of https://github.com/ad-aures/castopod.git synced 2026-04-15 04:27:46 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(player): load icons locally instead of relying on vimejs picking them from third party scripts

Browse source 
closes #551
This commit is contained in:
Yassine Doghri 2026-02-19 13:16:55 +00:00
commit 6b302ad8bf
No known key found for this signature in database
GPG key ID: 1F41CB39A01C099A
12 changed files with 37 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/Helpers/components_helper.php
View file

@ -353,13 +353,14 @@ if (! function_exists('audio_player')) {
theme="light"
language="{$language}"
class="{$class} relative z-0"
icons="castopod-vm-player-icons"
style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-control-spacing: 4px; --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"
>
<vm-audio preload="none">
<source src="{$source}" type="{$mediaType}" />
</vm-audio>
<vm-ui>
<vm-icon-library></vm-icon-library>
<vm-icon-library name="castopod-vm-player-icons"></vm-icon-library>
<vm-controls full-width>
<vm-playback-control></vm-playback-control>
<vm-volume-control></vm-volume-control>

8
resources/js/admin-audio-player.ts
View file

@ -36,6 +36,14 @@ import "@vime/core/themes/default.css";
import "@vime/core/themes/light.css";
import "./_modules/play-episode-button";
// Register Castopod's vm player icons library
const library: HTMLVmIconLibraryElement | null = document.querySelector(
'vm-icon-library[name="castopod-vm-player-icons"]'
);
if (library) {
library.resolver = (iconName) => `/assets/vm-player-icons/${iconName}.svg`;
}
// Vime elements for audio player
customElements.define("vm-player", VmPlayer);
customElements.define("vm-file", VmFile);

11
resources/js/audio-player.ts
View file

@ -63,13 +63,14 @@ const player = html`<div
theme="light"
language="en"
class="flex-1"
icons="castopod-vm-player-icons"
style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"
>
<vm-audio preload="none" id="testing-audio">
<source src="" type="" />
</vm-audio>
<vm-ui>
<vm-icon-library></vm-icon-library>
<vm-icon-library name="castopod-vm-player-icons"></vm-icon-library>
<vm-controls full-width>
<vm-playback-control></vm-playback-control>
<vm-volume-control></vm-volume-control>
@ -85,6 +86,14 @@ const player = html`<div
render(player, document.body);
// Register Castopod's vm player icons library
const library: HTMLVmIconLibraryElement | null = document.querySelector(
'vm-icon-library[name="castopod-vm-player-icons"]'
);
if (library) {
library.resolver = (iconName) => `/assets/vm-player-icons/${iconName}.svg`;
}
// Vime elements for audio player
customElements.define("vm-player", VmPlayer);
customElements.define("vm-file", VmFile);

8
resources/js/embed.ts
View file

@ -35,6 +35,14 @@ import {
import "@vime/core/themes/default.css";
import "@vime/core/themes/light.css";
// Register Castopod's vm player icons library
const library: HTMLVmIconLibraryElement | null = document.querySelector(
'vm-icon-library[name="castopod-vm-player-icons"]'
);
if (library) {
library.resolver = (iconName) => `/assets/vm-player-icons/${iconName}.svg`;
}
// Vime elements for audio player
customElements.define("vm-player", VmPlayer);
customElements.define("vm-file", VmFile);

1
resources/static/vm-player-icons/check.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 214 B

1
resources/static/vm-player-icons/pause.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5H11V20H7V5ZM14 5H18V20H14V5Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 130 B

1
resources/static/vm-player-icons/play.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.0658V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.59871 4.43433 8.69522 4.46355 8.77735 4.5183L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 419 B

1
resources/static/vm-player-icons/settings.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.95401 2.2106C11.2876 1.93144 12.6807 1.92263 14.0449 2.20785C14.2219 3.3674 14.9048 4.43892 15.9997 5.07103C17.0945 5.70313 18.364 5.75884 19.4566 5.3323C20.3858 6.37118 21.0747 7.58203 21.4997 8.87652C20.5852 9.60958 19.9997 10.736 19.9997 11.9992C19.9997 13.2632 20.5859 14.3902 21.5013 15.1232C21.29 15.7636 21.0104 16.3922 20.6599 16.9992C20.3094 17.6063 19.9049 18.1627 19.4559 18.6659C18.3634 18.2396 17.0943 18.2955 15.9997 18.9274C14.9057 19.559 14.223 20.6294 14.0453 21.7879C12.7118 22.067 11.3187 22.0758 9.95443 21.7906C9.77748 20.6311 9.09451 19.5595 7.99967 18.9274C6.90484 18.2953 5.63539 18.2396 4.54272 18.6662C3.61357 17.6273 2.92466 16.4164 2.49964 15.1219C3.41412 14.3889 3.99968 13.2624 3.99968 11.9992C3.99968 10.7353 3.41344 9.60827 2.49805 8.87524C2.70933 8.23482 2.98894 7.60629 3.33942 6.99923C3.68991 6.39217 4.09443 5.83576 4.54341 5.33257C5.63593 5.75881 6.90507 5.703 7.99967 5.07103C9.09364 4.43942 9.7764 3.3691 9.95401 2.2106ZM11.9997 14.9992C13.6565 14.9992 14.9997 13.6561 14.9997 11.9992C14.9997 10.3424 13.6565 8.99923 11.9997 8.99923C10.3428 8.99923 8.99967 10.3424 8.99967 11.9992C8.99967 13.6561 10.3428 14.9992 11.9997 14.9992Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
resources/static/vm-player-icons/volume-high.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 791 B

1
resources/static/vm-player-icons/volume-low.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.88889 16.0001H5C4.44772 16.0001 4 15.5524 4 15.0001V9.00007C4 8.44778 4.44772 8.00007 5 8.00007H8.88889L14.1834 3.66821C14.3971 3.49335 14.7121 3.52485 14.887 3.73857C14.9601 3.8279 15 3.93977 15 4.05519V19.9449C15 20.2211 14.7761 20.4449 14.5 20.4449C14.3846 20.4449 14.2727 20.405 14.1834 20.3319L8.88889 16.0001ZM18.8631 16.5911L17.4411 15.1691C18.3892 14.4376 19 13.2902 19 12.0001C19 10.5697 18.2493 9.31476 17.1203 8.60766L18.5589 7.16906C20.0396 8.26166 21 10.0187 21 12.0001C21 13.8422 20.1698 15.4905 18.8631 16.5911Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 633 B

1
resources/static/vm-player-icons/volume-mute.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.88889 16.0001H2C1.44772 16.0001 1 15.5524 1 15.0001V9.00007C1 8.44778 1.44772 8.00007 2 8.00007H5.88889L11.1834 3.66821C11.3971 3.49335 11.7121 3.52485 11.887 3.73857C11.9601 3.8279 12 3.93977 12 4.05519V19.9449C12 20.2211 11.7761 20.4449 11.5 20.4449C11.3846 20.4449 11.2727 20.405 11.1834 20.3319L5.88889 16.0001ZM20.4142 12.0001L23.9497 15.5356L22.5355 16.9498L19 13.4143L15.4645 16.9498L14.0503 15.5356L17.5858 12.0001L14.0503 8.46454L15.4645 7.05032L19 10.5859L22.5355 7.05032L23.9497 8.46454L20.4142 12.0001Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 621 B

3
themes/cp_app/embed.php
View file

@ -41,6 +41,7 @@
theme="<?= str_starts_with($theme, 'dark') ? 'dark' : 'light' ?>"
language="<?= service('request')->getLocale() ?>"
class="w-full mt-auto"
icons="castopod-vm-player-icons"
style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-control-spacing: 4px; --vm-menu-item-focus-bg: hsl(var(--color-background-highlight)); --vm-control-icon-size: 24px; <?= str_ends_with($theme, 'transparent') ? '--vm-controls-bg: transparent;' : '' ?>"
>
<vm-audio preload="none">
@ -54,7 +55,7 @@
<source src="<?= $source ?>" type="<?= $episode->audio->file_mimetype ?>" />
</vm-audio>
<vm-ui>
<vm-icon-library></vm-icon-library>
<vm-icon-library name="castopod-vm-player-icons"></vm-icon-library>
<vm-controls full-width>
<vm-playback-control></vm-playback-control>
<vm-volume-control></vm-volume-control>