mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 11:55:38 +00:00
Replace emojis with SVG icons in Plex library section and add clickable links
Modernize the Plex library UI by replacing emoji icons with proper SVG icons and making library items clickable to open in Plex. New icons: - Created IconMusic.vue for music/album libraries - Created IconClock.vue for watch time display PlexLibraryStats updates: - Replace emoji icons (🎬, 📺, 🎵, ⏱️) with IconMovie, IconShow, IconMusic, IconClock - Icons use highlight color with hover effects - Proper sizing: 2.5rem desktop, 2rem mobile PlexLibraryModal updates: - Replace emoji in header with dynamic icon component - Icon sized at 48px with highlight color - Better visual consistency PlexLibraryItem updates: - Add support for clickable links to Plex web interface - Items render as <a> tags when plexUrl is available - Fallback icons now use SVG components instead of emojis - Non-linkable items have disabled hover state plexHelpers updates: - processLibraryItem now includes ratingKey and plexUrl - plexUrl format: {serverUrl}/web/index.html#!/server/library/metadata/{ratingKey} - Added getLibraryIconComponent helper function Benefits: - Professional SVG icons instead of emojis (consistent cross-platform) - Clickable library items open directly in Plex - Better accessibility with proper link semantics - Scalable icons that look sharp at any size - Consistent color theming with site palette
This commit is contained in:
8
src/icons/IconClock.vue
Normal file
8
src/icons/IconClock.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M16 3c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13-5.82-13-13-13zM16 26.667c-5.891 0-10.667-4.776-10.667-10.667s4.776-10.667 10.667-10.667c5.891 0 10.667 4.776 10.667 10.667s-4.776 10.667-10.667 10.667z"
|
||||
/>
|
||||
<path d="M17.167 9.333h-2.333v8l7 4.2 1.167-1.9-5.833-3.467z" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/icons/IconMusic.vue
Normal file
7
src/icons/IconMusic.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M28 4.667v19.333c0 3.133-2.533 5.667-5.667 5.667s-5.667-2.533-5.667-5.667c0-3.133 2.533-5.667 5.667-5.667 1.067 0 2.067 0.3 2.933 0.8v-12.133l-13.333 3.8v16.2c0 3.133-2.533 5.667-5.667 5.667s-5.667-2.533-5.667-5.667c0-3.133 2.533-5.667 5.667-5.667 1.067 0 2.067 0.3 2.933 0.8v-17.8c0-0.6 0.4-1.133 0.967-1.267l14.667-4.133c0.133-0.033 0.267-0.067 0.4-0.067 0.733 0 1.333 0.6 1.333 1.333zM6.333 24c-1.833 0-3.333 1.5-3.333 3.333s1.5 3.333 3.333 3.333 3.333-1.5 3.333-3.333-1.5-3.333-3.333-3.333zM25.667 7.2l-11.333 3.2v-2.2l11.333-3.2v2.2zM22.333 20.667c-1.833 0-3.333 1.5-3.333 3.333s1.5 3.333 3.333 3.333 3.333-1.5 3.333-3.333-1.5-3.333-3.333-3.333z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
Reference in New Issue
Block a user