velora version 1.0.0
This commit is contained in:
diyaa
commit
b7c0d49d63
37
.gitignore
vendored
Normal file
37
.gitignore
vendored
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
*.tmp
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# Cache
|
||||||
|
.cache/
|
||||||
|
tmp/
|
||||||
|
|
||||||
|
# Node (لو تستخدم build tools)
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
|
||||||
|
# Env
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# Composer (إذا لاحقًا أضفت PHP deps)
|
||||||
|
vendor/
|
||||||
|
|
||||||
|
# WordPress specific
|
||||||
|
*.zip
|
||||||
|
*.tar.gz
|
||||||
|
|
||||||
|
# Mac
|
||||||
|
.AppleDouble
|
||||||
|
.LSOverride
|
||||||
33
IMPLEMENTATION-CHANGES.md
Normal file
33
IMPLEMENTATION-CHANGES.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# Velora Player: Fixes Applied
|
||||||
|
|
||||||
|
## What I changed
|
||||||
|
|
||||||
|
1. Updated block asset references in `blocks/block.json`
|
||||||
|
- Replaced manual registered handles with file-based metadata references:
|
||||||
|
- `file:../assets/js/block-editor.js`
|
||||||
|
- `file:../assets/js/player.js`
|
||||||
|
- `file:../assets/css/player.css`
|
||||||
|
- `file:../assets/css/editor.css`
|
||||||
|
|
||||||
|
2. Switched block registration to metadata-based loading
|
||||||
|
- Updated `includes/class-plugin.php` to call `register_block_type_from_metadata()`.
|
||||||
|
- Removed the old manual asset registration method so block loading no longer depends on custom handle registration order.
|
||||||
|
|
||||||
|
3. Added WordPress asset metadata files
|
||||||
|
- Added `assets/js/block-editor.asset.php` so WordPress knows the Gutenberg editor script dependencies.
|
||||||
|
- Added `assets/js/player.asset.php` for the frontend player script metadata.
|
||||||
|
|
||||||
|
4. Added explicit `modern-dark` theme class
|
||||||
|
- Added `.map-theme-modern-dark` and `.map-theme-modern-dark::before` rules in `assets/css/player.css`.
|
||||||
|
- The theme is no longer only implied by the base `.map-player` styles.
|
||||||
|
|
||||||
|
5. Ensured shortcode/dynamic rendering still loads frontend assets
|
||||||
|
- Added block asset enqueue logic in `includes/class-renderer.php`.
|
||||||
|
- When the player is rendered on the frontend, it now pulls the registered style/script handles from the registered block type and enqueues them.
|
||||||
|
|
||||||
|
## Result
|
||||||
|
|
||||||
|
- Gutenberg block loading is now metadata-driven and more reliable.
|
||||||
|
- The block no longer relies on manual script/style handle registration order.
|
||||||
|
- The `modern-dark` theme now has a real theme class.
|
||||||
|
- Shortcode rendering still gets the same frontend assets as the block.
|
||||||
362
README.md
Normal file
362
README.md
Normal file
@ -0,0 +1,362 @@
|
|||||||
|
# Velora Player
|
||||||
|
|
||||||
|
إضافة ووردبريس توفّر مشغّل صوت حديث مع دعم:
|
||||||
|
|
||||||
|
- بلوك
|
||||||
|
- Gutenberg
|
||||||
|
- shortcode
|
||||||
|
- ثيمات جاهزة
|
||||||
|
- لوحة إعدادات
|
||||||
|
- تتبّع بسيط لعدد مرات التشغيل
|
||||||
|
|
||||||
|
## نظرة سريعة
|
||||||
|
|
||||||
|
هذه الإضافة تبني مشغّل صوت مخصص يمكن استخدامه داخل محرر ووردبريس أو عبر
|
||||||
|
`shortcode`
|
||||||
|
في الصفحات والمقالات.
|
||||||
|
المشغّل يدعم صورة غلاف، عنوان للمسار الصوتي، شريط تقدّم، زر تشغيل وإيقاف، وثيمات عرض مختلفة.
|
||||||
|
كما تحتوي الإضافة على نظام تحليلات بسيط يحسب عدد مرات التشغيل لكل ملف صوتي.
|
||||||
|
|
||||||
|
## الميزات الرئيسية
|
||||||
|
|
||||||
|
- بلوك مخصص داخل محرر ووردبريس باسم
|
||||||
|
`Velora Player`
|
||||||
|
- دعم العرض الديناميكي من السيرفر
|
||||||
|
- دعم الإدراج باستخدام
|
||||||
|
`[audio_player]`
|
||||||
|
- ثلاث ثيمات جاهزة:
|
||||||
|
`modern-dark`
|
||||||
|
،
|
||||||
|
`glassmorphism`
|
||||||
|
،
|
||||||
|
`podcast-style`
|
||||||
|
- إعدادات عامة للتحكم في الألوان، الحواف، والثيم الافتراضي
|
||||||
|
- صفحة تحليلات داخل لوحة التحكم
|
||||||
|
- واجهة
|
||||||
|
`REST API`
|
||||||
|
لتسجيل التشغيلات
|
||||||
|
|
||||||
|
## كيف تعمل الإضافة
|
||||||
|
|
||||||
|
### 1. ملف التشغيل الرئيسي
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`modern-audio-player.php`
|
||||||
|
|
||||||
|
وظيفته:
|
||||||
|
|
||||||
|
- تعريف معلومات الإضافة
|
||||||
|
- تعريف الثوابت الأساسية
|
||||||
|
- تحميل الكلاسات
|
||||||
|
- تنفيذ
|
||||||
|
`activation hook`
|
||||||
|
لإنشاء الإعدادات الافتراضية وجدول التحليلات
|
||||||
|
- تشغيل الكلاس الرئيسي
|
||||||
|
|
||||||
|
### 2. الكلاس الرئيسي
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`includes/class-plugin.php`
|
||||||
|
|
||||||
|
وظيفته:
|
||||||
|
|
||||||
|
- تهيئة الخدمات الأساسية:
|
||||||
|
- الإعدادات
|
||||||
|
- لوحة التحكم
|
||||||
|
- الـ shortcode
|
||||||
|
- REST API
|
||||||
|
- تحميل الترجمة
|
||||||
|
- تسجيل البلوك من خلال
|
||||||
|
`block.json`
|
||||||
|
- استخدام
|
||||||
|
`render_callback`
|
||||||
|
لعرض المشغّل من السيرفر
|
||||||
|
|
||||||
|
### 3. الإعدادات
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`includes/class-settings.php`
|
||||||
|
|
||||||
|
يحتوي على:
|
||||||
|
|
||||||
|
- القيم الافتراضية للإضافة
|
||||||
|
- قراءة الإعدادات من قاعدة البيانات
|
||||||
|
- تنظيف القيم قبل الحفظ
|
||||||
|
|
||||||
|
الإعدادات المتوفرة:
|
||||||
|
|
||||||
|
- الثيم الافتراضي
|
||||||
|
- الثيمات المفعّلة
|
||||||
|
- لون التمييز
|
||||||
|
- لون الخلفية
|
||||||
|
- لون النص
|
||||||
|
- درجة استدارة الحواف
|
||||||
|
- إظهار صورة الغلاف أو إخفاؤها
|
||||||
|
|
||||||
|
### 4. لوحة التحكم
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`admin/class-admin.php`
|
||||||
|
|
||||||
|
يوفّر صفحتين داخل لوحة تحكم ووردبريس:
|
||||||
|
|
||||||
|
- صفحة إعدادات
|
||||||
|
- صفحة تحليلات
|
||||||
|
|
||||||
|
ومن خلال صفحة الإعدادات يمكن التحكم في المظهر العام لكل المشغلات، بينما تعرض صفحة التحليلات عدد المسارات المسجّلة وإجمالي التشغيلات وأشهر الملفات الصوتية.
|
||||||
|
|
||||||
|
### 5. العرض
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`includes/class-renderer.php`
|
||||||
|
|
||||||
|
هذا الملف هو المسؤول عن بناء
|
||||||
|
HTML
|
||||||
|
الخاص بالمشغّل.
|
||||||
|
|
||||||
|
أهم ما يفعله:
|
||||||
|
|
||||||
|
- يجهّز الخصائص القادمة من البلوك أو الـ shortcode
|
||||||
|
- يطبّق الثيم الافتراضي إذا لزم الأمر
|
||||||
|
- يبني متغيرات
|
||||||
|
CSS
|
||||||
|
اعتمادًا على إعدادات الإضافة
|
||||||
|
- يضيف بيانات التحليلات داخل
|
||||||
|
`data-* attributes`
|
||||||
|
- يعرض نسخة معاينة داخل المحرر إذا لم يتم اختيار ملف صوتي بعد
|
||||||
|
- يحمّل ملفات الواجهة الأمامية عند العرض الديناميكي أو عند استخدام الـ shortcode
|
||||||
|
|
||||||
|
### 6. الـ shortcode
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`includes/class-shortcode.php`
|
||||||
|
|
||||||
|
يسجّل
|
||||||
|
`[audio_player]`
|
||||||
|
|
||||||
|
الخصائص المدعومة:
|
||||||
|
|
||||||
|
- `src`
|
||||||
|
- `title`
|
||||||
|
- `image`
|
||||||
|
- `theme`
|
||||||
|
|
||||||
|
مثال:
|
||||||
|
|
||||||
|
```text
|
||||||
|
[audio_player src="https://example.com/audio.mp3" title="Episode 1" image="https://example.com/cover.jpg" theme="glassmorphism"]
|
||||||
|
```
|
||||||
|
|
||||||
|
إذا لم يتم تمرير
|
||||||
|
`theme`
|
||||||
|
فسيتم استخدام الثيم الافتراضي من إعدادات الإضافة.
|
||||||
|
|
||||||
|
### 7. التحليلات
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`includes/class-analytics.php`
|
||||||
|
|
||||||
|
وظيفته:
|
||||||
|
|
||||||
|
- إنشاء جدول خاص في قاعدة البيانات عند تفعيل الإضافة
|
||||||
|
- إنشاء
|
||||||
|
`hash`
|
||||||
|
ثابت لكل رابط صوتي
|
||||||
|
- تسجيل كل تشغيل في قاعدة البيانات
|
||||||
|
- إرجاع ملخص عام
|
||||||
|
- إرجاع أكثر الملفات تشغيلًا
|
||||||
|
|
||||||
|
اسم الجدول يكون بصيغة:
|
||||||
|
|
||||||
|
```text
|
||||||
|
{wp_prefix}map_analytics
|
||||||
|
```
|
||||||
|
|
||||||
|
كل سجل يحتوي على معلومات مثل:
|
||||||
|
|
||||||
|
- رابط الملف الصوتي
|
||||||
|
- عنوانه
|
||||||
|
- عدد مرات التشغيل
|
||||||
|
- آخر وقت تشغيل
|
||||||
|
|
||||||
|
### 8. واجهة REST API
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`includes/class-rest-api.php`
|
||||||
|
|
||||||
|
تسجّل المسار التالي:
|
||||||
|
|
||||||
|
```text
|
||||||
|
/wp-json/map/v1/track-play
|
||||||
|
```
|
||||||
|
|
||||||
|
الطلب من نوع:
|
||||||
|
|
||||||
|
`POST`
|
||||||
|
|
||||||
|
ويستقبل:
|
||||||
|
|
||||||
|
- `src`
|
||||||
|
- `title`
|
||||||
|
- `hash`
|
||||||
|
- `nonce`
|
||||||
|
|
||||||
|
قبل تسجيل التشغيل يتم التحقق من:
|
||||||
|
|
||||||
|
- وجود القيم المطلوبة
|
||||||
|
- صحة
|
||||||
|
`hash`
|
||||||
|
- صحة
|
||||||
|
`nonce`
|
||||||
|
|
||||||
|
### 9. جافاسكربت الواجهة
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`assets/js/player.js`
|
||||||
|
|
||||||
|
هذا الملف يدير سلوك المشغّل على الواجهة، مثل:
|
||||||
|
|
||||||
|
- تشغيل وإيقاف الصوت
|
||||||
|
- تحديث الوقت الحالي والمدة
|
||||||
|
- تحديث شريط التقدم
|
||||||
|
- الانتقال داخل الملف الصوتي
|
||||||
|
- إرسال أول تشغيل فقط إلى
|
||||||
|
`REST API`
|
||||||
|
لكل نسخة من المشغّل داخل الصفحة
|
||||||
|
|
||||||
|
### 10. بلوك المحرر
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`assets/js/block-editor.js`
|
||||||
|
|
||||||
|
هذا الملف يسجل البلوك داخل المحرر ويضيف:
|
||||||
|
|
||||||
|
- اختيار ملف صوتي من المكتبة
|
||||||
|
- إدخال عنوان المسار
|
||||||
|
- اختيار صورة غلاف
|
||||||
|
- تفعيل أو تعطيل الثيم العام
|
||||||
|
- اختيار ثيم مخصص
|
||||||
|
- معاينة مباشرة باستخدام
|
||||||
|
`ServerSideRender`
|
||||||
|
|
||||||
|
### 11. التنسيق
|
||||||
|
|
||||||
|
الملف:
|
||||||
|
`assets/css/player.css`
|
||||||
|
|
||||||
|
يحتوي على تنسيقات المشغّل، والثيمات المختلفة، والاستجابة للشاشات الصغيرة.
|
||||||
|
|
||||||
|
## طريقة الاستخدام
|
||||||
|
|
||||||
|
### استخدام البلوك
|
||||||
|
|
||||||
|
من داخل محرر ووردبريس:
|
||||||
|
|
||||||
|
1. أضف بلوك
|
||||||
|
`Velora Player`
|
||||||
|
2. اختر الملف الصوتي
|
||||||
|
3. أضف العنوان وصورة الغلاف
|
||||||
|
4. حدّد هل تريد استخدام الثيم العام أو ثيم مخصص
|
||||||
|
|
||||||
|
### استخدام shortcode
|
||||||
|
|
||||||
|
مثال بسيط:
|
||||||
|
|
||||||
|
```text
|
||||||
|
[audio_player src="https://example.com/audio.mp3" title="My Track"]
|
||||||
|
```
|
||||||
|
|
||||||
|
مثال كامل:
|
||||||
|
|
||||||
|
```text
|
||||||
|
[audio_player src="https://example.com/audio.mp3" title="Podcast Episode" image="https://example.com/image.jpg" theme="podcast-style"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## الثيمات المتوفرة
|
||||||
|
|
||||||
|
### modern-dark
|
||||||
|
|
||||||
|
ثيم داكن عالي التباين مناسب للتصميمات الحديثة.
|
||||||
|
|
||||||
|
### glassmorphism
|
||||||
|
|
||||||
|
ثيم شفاف بتأثير زجاجي وخلفية ضبابية.
|
||||||
|
|
||||||
|
### podcast-style
|
||||||
|
|
||||||
|
ثيم أقرب لعرض حلقات البودكاست والمحتوى التحريري.
|
||||||
|
|
||||||
|
## تدفق العمل داخل الإضافة
|
||||||
|
|
||||||
|
بشكل مبسط، التسلسل كالتالي:
|
||||||
|
|
||||||
|
1. يتم تحميل الإضافة من الملف الرئيسي.
|
||||||
|
2. يتم تسجيل البلوك والـ shortcode وصفحات الإدارة.
|
||||||
|
3. عند إدراج المشغّل، يتم تمرير الخصائص إلى
|
||||||
|
`Renderer`
|
||||||
|
4. يتم إنشاء
|
||||||
|
HTML
|
||||||
|
وبيانات التتبع.
|
||||||
|
5. في الواجهة، يتولى
|
||||||
|
`player.js`
|
||||||
|
تشغيل الصوت وتحديث الواجهة.
|
||||||
|
6. عند أول تشغيل، يتم إرسال طلب إلى
|
||||||
|
`REST API`
|
||||||
|
7. تقوم طبقة التحليلات بتحديث قاعدة البيانات.
|
||||||
|
|
||||||
|
## بنية الملفات
|
||||||
|
|
||||||
|
```text
|
||||||
|
modern-audio-player/
|
||||||
|
├── modern-audio-player.php
|
||||||
|
├── uninstall.php
|
||||||
|
├── README.md
|
||||||
|
├── admin/
|
||||||
|
│ └── class-admin.php
|
||||||
|
├── includes/
|
||||||
|
│ ├── class-plugin.php
|
||||||
|
│ ├── class-settings.php
|
||||||
|
│ ├── class-renderer.php
|
||||||
|
│ ├── class-shortcode.php
|
||||||
|
│ ├── class-rest-api.php
|
||||||
|
│ └── class-analytics.php
|
||||||
|
├── blocks/
|
||||||
|
│ └── block.json
|
||||||
|
└── assets/
|
||||||
|
├── css/
|
||||||
|
│ ├── player.css
|
||||||
|
│ └── editor.css
|
||||||
|
└── js/
|
||||||
|
├── player.js
|
||||||
|
├── block-editor.js
|
||||||
|
├── player.asset.php
|
||||||
|
└── block-editor.asset.php
|
||||||
|
```
|
||||||
|
|
||||||
|
## ملاحظات مهمة
|
||||||
|
|
||||||
|
- الإضافة تعتمد على العرض الديناميكي، لذلك دالة
|
||||||
|
`save`
|
||||||
|
داخل البلوك ترجع
|
||||||
|
`null`
|
||||||
|
- ملفات الواجهة يتم تحميلها عبر
|
||||||
|
`block.json`
|
||||||
|
وميتاداتا الأصول
|
||||||
|
- عند استخدام الـ shortcode يتم تحميل ملفات الواجهة أيضًا من خلال
|
||||||
|
`Renderer::enqueue_block_assets()`
|
||||||
|
|
||||||
|
## إزالة الإضافة
|
||||||
|
|
||||||
|
يوجد ملف:
|
||||||
|
`uninstall.php`
|
||||||
|
|
||||||
|
ويمكن استخدامه لاحقًا لتنظيف بيانات الإضافة عند الحذف النهائي إذا أردت توسيع سلوك الإزالة.
|
||||||
|
|
||||||
|
## ملخص
|
||||||
|
|
||||||
|
هذه الإضافة مناسبة عندما تحتاج إلى:
|
||||||
|
|
||||||
|
- مشغّل صوت مخصص بدل المشغّل الافتراضي
|
||||||
|
- دعم للمحرر الحديث
|
||||||
|
- تخصيص مظهر عام على مستوى الموقع
|
||||||
|
- تتبّع بسيط لمرات التشغيل بدون نظام تحليلات معقّد
|
||||||
488
admin/class-admin.php
Normal file
488
admin/class-admin.php
Normal file
@ -0,0 +1,488 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Admin settings and analytics UI.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Admin {
|
||||||
|
/**
|
||||||
|
* Register admin hooks.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register() {
|
||||||
|
add_action( 'admin_menu', array( $this, 'register_menus' ) );
|
||||||
|
add_action( 'admin_init', array( $this, 'register_settings' ) );
|
||||||
|
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
|
||||||
|
add_action( 'admin_post_map_reset_design_settings', array( $this, 'handle_reset_design_settings' ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register admin menu pages.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register_menus() {
|
||||||
|
add_menu_page(
|
||||||
|
__( 'Velora Player', 'modern-audio-player' ),
|
||||||
|
__( 'Velora Player', 'modern-audio-player' ),
|
||||||
|
'manage_options',
|
||||||
|
'map-settings',
|
||||||
|
array( $this, 'render_settings_page' ),
|
||||||
|
'dashicons-format-audio',
|
||||||
|
56
|
||||||
|
);
|
||||||
|
|
||||||
|
add_submenu_page(
|
||||||
|
'map-settings',
|
||||||
|
__( 'Design Settings', 'modern-audio-player' ),
|
||||||
|
__( 'Design Settings', 'modern-audio-player' ),
|
||||||
|
'manage_options',
|
||||||
|
'map-settings',
|
||||||
|
array( $this, 'render_settings_page' )
|
||||||
|
);
|
||||||
|
|
||||||
|
add_submenu_page(
|
||||||
|
'map-settings',
|
||||||
|
__( 'Analytics', 'modern-audio-player' ),
|
||||||
|
__( 'Analytics', 'modern-audio-player' ),
|
||||||
|
'manage_options',
|
||||||
|
'map-analytics',
|
||||||
|
array( $this, 'render_analytics_page' )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register settings.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register_settings() {
|
||||||
|
register_setting(
|
||||||
|
'map_settings_group',
|
||||||
|
MAP_OPTION_KEY,
|
||||||
|
array(
|
||||||
|
'type' => 'array',
|
||||||
|
'sanitize_callback' => array( '\ModernAudioPlayer\Settings', 'sanitize' ),
|
||||||
|
'default' => Settings::defaults(),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enqueue admin design assets.
|
||||||
|
*
|
||||||
|
* @param string $hook_suffix Current screen hook.
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function enqueue_assets( $hook_suffix ) {
|
||||||
|
if ( 'toplevel_page_map-settings' !== $hook_suffix ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
wp_enqueue_style( 'wp-color-picker' );
|
||||||
|
wp_enqueue_style(
|
||||||
|
'map-admin-settings',
|
||||||
|
MAP_PLUGIN_URL . 'assets/css/admin-settings.css',
|
||||||
|
array( 'wp-color-picker' ),
|
||||||
|
MAP_VERSION
|
||||||
|
);
|
||||||
|
wp_enqueue_style(
|
||||||
|
'map-player-preview',
|
||||||
|
MAP_PLUGIN_URL . 'assets/css/player.css',
|
||||||
|
array(),
|
||||||
|
MAP_VERSION
|
||||||
|
);
|
||||||
|
|
||||||
|
wp_enqueue_script( 'wp-color-picker' );
|
||||||
|
wp_enqueue_script(
|
||||||
|
'map-admin-settings',
|
||||||
|
MAP_PLUGIN_URL . 'assets/js/admin-settings.js',
|
||||||
|
array( 'jquery', 'wp-color-picker' ),
|
||||||
|
MAP_VERSION,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$settings = Settings::get();
|
||||||
|
$resolved_design = Settings::get_resolved_design_settings( $settings['default_theme'], $settings );
|
||||||
|
$presets = Settings::get_design_presets();
|
||||||
|
$preset_tokens = array();
|
||||||
|
|
||||||
|
foreach ( $presets as $slug => $preset ) {
|
||||||
|
$preset_tokens[ $slug ] = $preset['tokens'];
|
||||||
|
}
|
||||||
|
|
||||||
|
wp_add_inline_script(
|
||||||
|
'map-admin-settings',
|
||||||
|
'window.mapAdminSettings = ' . wp_json_encode(
|
||||||
|
array(
|
||||||
|
'optionKey' => MAP_OPTION_KEY,
|
||||||
|
'presets' => $preset_tokens,
|
||||||
|
'resolvedDesign' => $resolved_design,
|
||||||
|
'i18n' => array(
|
||||||
|
'rangeValueLabel' => __( '%1$s %2$s', 'modern-audio-player' ),
|
||||||
|
'resetConfirm' => __( 'Reset all design settings back to the default preset values?', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
) . ';',
|
||||||
|
'before'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle reset action.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function handle_reset_design_settings() {
|
||||||
|
if ( ! current_user_can( 'manage_options' ) ) {
|
||||||
|
wp_die( esc_html__( 'You are not allowed to perform this action.', 'modern-audio-player' ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
check_admin_referer( 'map_reset_design_settings' );
|
||||||
|
|
||||||
|
update_option( MAP_OPTION_KEY, Settings::defaults() );
|
||||||
|
|
||||||
|
$redirect = add_query_arg(
|
||||||
|
array(
|
||||||
|
'page' => 'map-settings',
|
||||||
|
'map-reset' => 1,
|
||||||
|
),
|
||||||
|
admin_url( 'admin.php' )
|
||||||
|
);
|
||||||
|
|
||||||
|
wp_safe_redirect( $redirect );
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render settings page.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function render_settings_page() {
|
||||||
|
if ( ! current_user_can( 'manage_options' ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$settings = Settings::get();
|
||||||
|
$schema = Settings::get_design_schema();
|
||||||
|
$resolved_design = Settings::get_resolved_design_settings( $settings['default_theme'], $settings );
|
||||||
|
$preview_style = Settings::build_design_css_variables( $resolved_design );
|
||||||
|
$presets = Settings::get_design_presets();
|
||||||
|
$preview_preset = isset( $presets[ $settings['default_theme'] ] ) ? $presets[ $settings['default_theme'] ]['label'] : $presets[ Settings::get_default_preset_slug() ]['label'];
|
||||||
|
?>
|
||||||
|
<div class="wrap map-admin-page">
|
||||||
|
<h1><?php esc_html_e( 'Velora Player Design System', 'modern-audio-player' ); ?></h1>
|
||||||
|
<p class="map-admin-page__intro">
|
||||||
|
<?php esc_html_e( 'Manage the global player design tokens used by both the block renderer and shortcode output.', 'modern-audio-player' ); ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<?php if ( isset( $_GET['settings-updated'] ) ) : ?>
|
||||||
|
<div class="notice notice-success is-dismissible"><p><?php esc_html_e( 'Design settings saved.', 'modern-audio-player' ); ?></p></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ( isset( $_GET['map-reset'] ) ) : ?>
|
||||||
|
<div class="notice notice-success is-dismissible"><p><?php esc_html_e( 'Design settings reset to the plugin defaults.', 'modern-audio-player' ); ?></p></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="map-admin-layout">
|
||||||
|
<form class="map-design-form" action="options.php" method="post">
|
||||||
|
<?php settings_fields( 'map_settings_group' ); ?>
|
||||||
|
|
||||||
|
<div class="map-settings-shell">
|
||||||
|
<div class="map-settings-shell__header">
|
||||||
|
<div class="map-settings-shell__meta">
|
||||||
|
<span class="map-settings-shell__eyebrow"><?php esc_html_e( 'Global Design Controls', 'modern-audio-player' ); ?></span>
|
||||||
|
<h2><?php esc_html_e( 'Design Backend', 'modern-audio-player' ); ?></h2>
|
||||||
|
<p><?php esc_html_e( 'Switch between sections, edit tokens quickly, and keep the preview visible while you work.', 'modern-audio-player' ); ?></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-settings-actions map-settings-actions--header">
|
||||||
|
<?php submit_button( __( 'Save Design Settings', 'modern-audio-player' ), 'primary', 'submit', false ); ?>
|
||||||
|
<a href="<?php echo esc_url( wp_nonce_url( admin_url( 'admin-post.php?action=map_reset_design_settings' ), 'map_reset_design_settings' ) ); ?>" class="button button-secondary map-reset-button">
|
||||||
|
<?php esc_html_e( 'Reset to Defaults', 'modern-audio-player' ); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="nav-tab-wrapper wp-clearfix">
|
||||||
|
<a href="#map-section-presets" class="nav-tab nav-tab-active" data-map-tab="presets"><?php esc_html_e( 'Presets', 'modern-audio-player' ); ?></a>
|
||||||
|
<a href="#map-section-colors" class="nav-tab" data-map-tab="colors"><?php esc_html_e( 'Colors', 'modern-audio-player' ); ?></a>
|
||||||
|
<a href="#map-section-text" class="nav-tab" data-map-tab="text"><?php esc_html_e( 'Text', 'modern-audio-player' ); ?></a>
|
||||||
|
<a href="#map-section-layout" class="nav-tab" data-map-tab="layout"><?php esc_html_e( 'Layout', 'modern-audio-player' ); ?></a>
|
||||||
|
<a href="#map-section-controls" class="nav-tab" data-map-tab="controls"><?php esc_html_e( 'Controls', 'modern-audio-player' ); ?></a>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="map-settings-panels">
|
||||||
|
<?php foreach ( $schema as $section_key => $section ) : ?>
|
||||||
|
<section id="map-section-<?php echo esc_attr( $section_key ); ?>" class="map-settings-card map-settings-panel<?php echo 'presets' === $section_key ? ' is-active' : ''; ?>" data-map-panel="<?php echo esc_attr( $section_key ); ?>">
|
||||||
|
<div class="map-settings-card__header">
|
||||||
|
<h2><?php echo esc_html( $section['title'] ); ?></h2>
|
||||||
|
<p><?php echo esc_html( $section['description'] ); ?></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-field-grid">
|
||||||
|
<?php foreach ( $section['fields'] as $field_key => $field ) : ?>
|
||||||
|
<div class="map-field-card map-field-card--<?php echo esc_attr( $field['type'] ); ?>">
|
||||||
|
<div class="map-field-card__top">
|
||||||
|
<label class="map-field-card__label" for="<?php echo esc_attr( $field_key ); ?>"><?php echo esc_html( $field['label'] ); ?></label>
|
||||||
|
<?php $this->render_field( $field_key, $field, $settings, $resolved_design ); ?>
|
||||||
|
</div>
|
||||||
|
<?php if ( ! empty( $field['description'] ) ) : ?>
|
||||||
|
<p class="description"><?php echo esc_html( $field['description'] ); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-settings-actions map-settings-actions--footer">
|
||||||
|
<?php submit_button( __( 'Save Design Settings', 'modern-audio-player' ), 'primary', 'submit', false ); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<aside class="map-preview-panel">
|
||||||
|
<div class="map-settings-card map-settings-card--sticky">
|
||||||
|
<div class="map-settings-card__header">
|
||||||
|
<h2><?php esc_html_e( 'Live Preview', 'modern-audio-player' ); ?></h2>
|
||||||
|
<p><?php esc_html_e( 'This static preview reflects the current saved values and updates as you edit the form.', 'modern-audio-player' ); ?></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-admin-preview-shell">
|
||||||
|
<div class="map-player map-theme-<?php echo esc_attr( $settings['default_theme'] ); ?><?php echo empty( $resolved_design['player_show_cover_image'] ) ? ' map-player--no-cover' : ''; ?>" data-map-admin-preview data-map-has-cover="<?php echo empty( $resolved_design['player_show_cover_image'] ) ? 'false' : 'true'; ?>" style="<?php echo esc_attr( $preview_style ); ?>">
|
||||||
|
<div class="map-player__cover-wrap"<?php echo empty( $resolved_design['player_show_cover_image'] ) ? ' style="display:none;"' : ''; ?>>
|
||||||
|
<div class="map-admin-preview-cover"></div>
|
||||||
|
</div>
|
||||||
|
<div class="map-player__content">
|
||||||
|
<div class="map-player__header">
|
||||||
|
<div class="map-player__eyebrow" data-map-preview-theme<?php echo empty( $resolved_design['player_show_theme_label'] ) ? ' style="display:none;"' : ''; ?>><?php echo esc_html( $preview_preset ); ?></div>
|
||||||
|
<div class="map-player__title"><?php esc_html_e( 'Velora Weekly Mix', 'modern-audio-player' ); ?></div>
|
||||||
|
</div>
|
||||||
|
<div class="map-player__controls">
|
||||||
|
<div class="map-player__actions">
|
||||||
|
<button type="button" class="map-player__toggle" aria-pressed="false">
|
||||||
|
<span class="map-player__toggle-icon map-player__toggle-icon--play" aria-hidden="true"></span>
|
||||||
|
<span class="map-player__toggle-text"><?php esc_html_e( 'Play', 'modern-audio-player' ); ?></span>
|
||||||
|
</button>
|
||||||
|
<div class="map-player__transport">
|
||||||
|
<button type="button" class="map-player__icon-button" disabled>
|
||||||
|
<span class="map-player__icon map-player__icon--previous" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="map-player__icon-button">
|
||||||
|
<span class="map-player__icon map-player__icon--next" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="map-player__icon-button">
|
||||||
|
<span class="map-player__icon map-player__icon--repeat" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="map-player__timeline">
|
||||||
|
<input type="range" class="map-player__progress" min="0" max="100" value="38" step="0.1" />
|
||||||
|
<div class="map-player__time">
|
||||||
|
<span><?php esc_html_e( '1:12', 'modern-audio-player' ); ?></span>
|
||||||
|
<span><?php esc_html_e( '3:08', 'modern-audio-player' ); ?></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a field based on schema metadata.
|
||||||
|
*
|
||||||
|
* @param string $field_key Field key.
|
||||||
|
* @param array<string, mixed> $field Field definition.
|
||||||
|
* @param array<string, mixed> $settings Saved settings.
|
||||||
|
* @param array<string, mixed> $resolved_design Resolved design values.
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
private function render_field( $field_key, $field, $settings, $resolved_design ) {
|
||||||
|
$option_name = MAP_OPTION_KEY . '[' . $field_key . ']';
|
||||||
|
$value = isset( $settings[ $field_key ] ) && '' !== $settings[ $field_key ] ? $settings[ $field_key ] : $resolved_design[ $field_key ];
|
||||||
|
$override = isset( $settings[ $field_key ] ) && '' !== $settings[ $field_key ];
|
||||||
|
|
||||||
|
switch ( $field['type'] ) {
|
||||||
|
case 'color':
|
||||||
|
?>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
class="map-color-field"
|
||||||
|
name="<?php echo esc_attr( $option_name ); ?>"
|
||||||
|
value="<?php echo esc_attr( (string) $value ); ?>"
|
||||||
|
data-map-field="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
data-default-color="<?php echo esc_attr( (string) $resolved_design[ $field_key ] ); ?>"
|
||||||
|
/>
|
||||||
|
<?php
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'range':
|
||||||
|
?>
|
||||||
|
<div class="map-range-control">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
name="<?php echo esc_attr( $option_name ); ?>"
|
||||||
|
value="<?php echo esc_attr( (string) $value ); ?>"
|
||||||
|
min="<?php echo esc_attr( (string) $field['min'] ); ?>"
|
||||||
|
max="<?php echo esc_attr( (string) $field['max'] ); ?>"
|
||||||
|
step="<?php echo esc_attr( (string) $field['step'] ); ?>"
|
||||||
|
data-map-field="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
data-unit="<?php echo esc_attr( (string) $field['unit'] ); ?>"
|
||||||
|
/>
|
||||||
|
<span class="map-range-control__value" data-map-range-value="<?php echo esc_attr( $field_key ); ?>">
|
||||||
|
<?php echo esc_html( (string) $value . (string) $field['unit'] ); ?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'checkbox':
|
||||||
|
?>
|
||||||
|
<label class="map-switch" for="<?php echo esc_attr( $field_key ); ?>">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
name="<?php echo esc_attr( $option_name ); ?>"
|
||||||
|
value="1"
|
||||||
|
data-map-field="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
<?php checked( ! empty( $value ) ); ?>
|
||||||
|
/>
|
||||||
|
<span class="map-switch__track" aria-hidden="true"></span>
|
||||||
|
<span class="map-switch__label"><?php esc_html_e( 'Enabled', 'modern-audio-player' ); ?></span>
|
||||||
|
</label>
|
||||||
|
<?php
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'checkbox_group':
|
||||||
|
?>
|
||||||
|
<fieldset class="map-checkbox-group">
|
||||||
|
<?php foreach ( $field['options'] as $option_value => $option_label ) : ?>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="<?php echo esc_attr( $option_name ); ?>[]"
|
||||||
|
value="<?php echo esc_attr( $option_value ); ?>"
|
||||||
|
<?php checked( in_array( $option_value, (array) $settings[ $field_key ], true ) ); ?>
|
||||||
|
/>
|
||||||
|
<span><?php echo esc_html( $option_label ); ?></span>
|
||||||
|
</label>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</fieldset>
|
||||||
|
<?php
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'select':
|
||||||
|
?>
|
||||||
|
<select
|
||||||
|
id="<?php echo esc_attr( $field_key ); ?>"
|
||||||
|
name="<?php echo esc_attr( $option_name ); ?>"
|
||||||
|
class="map-select-control"
|
||||||
|
data-map-preset-select="true"
|
||||||
|
>
|
||||||
|
<?php foreach ( $field['options'] as $option_value => $option_label ) : ?>
|
||||||
|
<option value="<?php echo esc_attr( $option_value ); ?>" <?php selected( $settings[ $field_key ], $option_value ); ?>>
|
||||||
|
<?php echo esc_html( $option_label ); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
<p class="description"><?php esc_html_e( 'Selecting a preset updates the visible field values immediately. Saved customizations remain layered over the chosen preset.', 'modern-audio-player' ); ?></p>
|
||||||
|
<?php
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( 0 === strpos( $field_key, 'player_' ) ) {
|
||||||
|
?>
|
||||||
|
<p class="map-field-state">
|
||||||
|
<?php
|
||||||
|
echo $override
|
||||||
|
? esc_html__( 'Custom override saved for this token.', 'modern-audio-player' )
|
||||||
|
: esc_html__( 'Currently inherited from the selected preset.', 'modern-audio-player' );
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render analytics page.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function render_analytics_page() {
|
||||||
|
if ( ! current_user_can( 'manage_options' ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$summary = Analytics::get_summary();
|
||||||
|
$tracks = Analytics::get_top_tracks( 50 );
|
||||||
|
?>
|
||||||
|
<div class="wrap">
|
||||||
|
<h1><?php esc_html_e( 'Velora Player Analytics', 'modern-audio-player' ); ?></h1>
|
||||||
|
<div style="display:flex;gap:16px;flex-wrap:wrap;margin:20px 0;">
|
||||||
|
<div class="postbox" style="padding:16px;min-width:180px;">
|
||||||
|
<strong><?php esc_html_e( 'Tracked Sources', 'modern-audio-player' ); ?></strong>
|
||||||
|
<div style="font-size:24px;"><?php echo esc_html( number_format_i18n( $summary['track_count'] ) ); ?></div>
|
||||||
|
</div>
|
||||||
|
<div class="postbox" style="padding:16px;min-width:180px;">
|
||||||
|
<strong><?php esc_html_e( 'Total Plays', 'modern-audio-player' ); ?></strong>
|
||||||
|
<div style="font-size:24px;"><?php echo esc_html( number_format_i18n( $summary['total_plays'] ) ); ?></div>
|
||||||
|
</div>
|
||||||
|
<div class="postbox" style="padding:16px;min-width:220px;">
|
||||||
|
<strong><?php esc_html_e( 'Last Played', 'modern-audio-player' ); ?></strong>
|
||||||
|
<div style="font-size:16px;">
|
||||||
|
<?php echo $summary['last_played'] ? esc_html( get_date_from_gmt( $summary['last_played'], get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ) ) : esc_html__( 'No data yet', 'modern-audio-player' ); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="widefat striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th><?php esc_html_e( 'Track', 'modern-audio-player' ); ?></th>
|
||||||
|
<th><?php esc_html_e( 'Audio Source', 'modern-audio-player' ); ?></th>
|
||||||
|
<th><?php esc_html_e( 'Plays', 'modern-audio-player' ); ?></th>
|
||||||
|
<th><?php esc_html_e( 'Last Played', 'modern-audio-player' ); ?></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<?php if ( empty( $tracks ) ) : ?>
|
||||||
|
<tr>
|
||||||
|
<td colspan="4"><?php esc_html_e( 'No analytics recorded yet.', 'modern-audio-player' ); ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php else : ?>
|
||||||
|
<?php foreach ( $tracks as $track ) : ?>
|
||||||
|
<tr>
|
||||||
|
<td><?php echo esc_html( $track->track_title ? $track->track_title : __( 'Untitled Track', 'modern-audio-player' ) ); ?></td>
|
||||||
|
<td>
|
||||||
|
<a href="<?php echo esc_url( $track->audio_src ); ?>" target="_blank" rel="noopener noreferrer">
|
||||||
|
<?php echo esc_html( $track->audio_src ); ?>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td><?php echo esc_html( number_format_i18n( (int) $track->play_count ) ); ?></td>
|
||||||
|
<td><?php echo $track->last_played ? esc_html( get_date_from_gmt( $track->last_played, get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ) ) : esc_html__( 'Never', 'modern-audio-player' ); ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
361
assets/css/admin-settings.css
Normal file
361
assets/css/admin-settings.css
Normal file
@ -0,0 +1,361 @@
|
|||||||
|
.map-admin-page {
|
||||||
|
max-width: 1480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-admin-page__intro {
|
||||||
|
max-width: 820px;
|
||||||
|
margin: 0 0 18px;
|
||||||
|
color: #5f6c7b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-admin-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
|
||||||
|
gap: 20px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-design-form,
|
||||||
|
.map-preview-panel {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-shell {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 14px;
|
||||||
|
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
border-radius: 18px;
|
||||||
|
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-shell__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 18px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-shell__meta h2 {
|
||||||
|
margin: 2px 0 4px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-shell__meta p {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 720px;
|
||||||
|
color: #5f6c7b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-shell__eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #eef4ff;
|
||||||
|
color: #2754c5;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-actions--header {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-actions--footer {
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-design-form .nav-tab-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-design-form .nav-tab {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #f6f8fb;
|
||||||
|
color: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-design-form .nav-tab:hover {
|
||||||
|
background: #edf2f7;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-design-form .nav-tab.nav-tab-active {
|
||||||
|
border-color: #c9d9ff;
|
||||||
|
background: #eaf1ff;
|
||||||
|
color: #1d4ed8;
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panels {
|
||||||
|
position: relative;
|
||||||
|
max-height: calc(100vh - 265px);
|
||||||
|
padding-right: 4px;
|
||||||
|
overflow-y: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #c3cfdf transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panels::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panels::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #c3cfdf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panels::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-card {
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panel {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panel.is-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-card__header {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-card__header h2 {
|
||||||
|
margin: 0 0 2px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-card__header p {
|
||||||
|
margin: 0;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid #e7edf4;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: #fbfdff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-card--checkbox,
|
||||||
|
.map-field-card--select,
|
||||||
|
.map-field-card--checkbox_group {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-card__top {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-card__label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-card .description {
|
||||||
|
margin: 0;
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-select-control {
|
||||||
|
min-width: 220px;
|
||||||
|
max-width: 340px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-color-field {
|
||||||
|
max-width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-checkbox-group {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-checkbox-group label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid #d9e3ee;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-range-control {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-range-control__value {
|
||||||
|
min-width: 56px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #eef4ff;
|
||||||
|
color: #1e40af;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: fit-content;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch__track {
|
||||||
|
position: relative;
|
||||||
|
width: 48px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #dbe4ee;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch__track::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 3px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch input:checked + .map-switch__track {
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch input:checked + .map-switch__track::after {
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-switch__label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-state {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #7b8794;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-preview-panel {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-card--sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-admin-preview-shell {
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 34%),
|
||||||
|
linear-gradient(180deg, #f8fafc, #eef2ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-actions--footer {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-actions--footer .button-primary {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-admin-preview-shell .map-player {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-admin-preview-cover {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent),
|
||||||
|
linear-gradient(145deg, #fb7185, #0ea5e9);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.map-admin-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-panels {
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-settings-card--sticky {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.map-settings-shell__header {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-field-grid,
|
||||||
|
.map-checkbox-group {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
assets/css/editor.css
Normal file
8
assets/css/editor.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.map-editor-preview .map-player {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-editor-preview .map-player__audio {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
445
assets/css/player.css
Normal file
445
assets/css/player.css
Normal file
@ -0,0 +1,445 @@
|
|||||||
|
.map-player {
|
||||||
|
--velora-bg: #0f172a;
|
||||||
|
--velora-surface: #111827;
|
||||||
|
--velora-text: #f9fafb;
|
||||||
|
--velora-muted: #94a3b8;
|
||||||
|
--velora-accent: #7dd3fc;
|
||||||
|
--velora-button-bg: #7dd3fc;
|
||||||
|
--velora-button-text: #0f172a;
|
||||||
|
--velora-progress-bg: #334155;
|
||||||
|
--velora-progress-fill: #7dd3fc;
|
||||||
|
--velora-border: #1f2937;
|
||||||
|
--velora-shadow: #0f172a;
|
||||||
|
--velora-radius: 18px;
|
||||||
|
--velora-padding: 16px;
|
||||||
|
--velora-font-size: 16px;
|
||||||
|
--map-progress-percent: 0%;
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(96px, 144px) 1fr;
|
||||||
|
gap: calc(var(--velora-padding) * 0.75);
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--velora-padding);
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
border: 1px solid var(--velora-border);
|
||||||
|
border-radius: var(--velora-radius);
|
||||||
|
color: var(--velora-text);
|
||||||
|
font-size: var(--velora-font-size);
|
||||||
|
background:
|
||||||
|
linear-gradient(140deg, color-mix(in srgb, var(--velora-bg) 92%, white 8%), var(--velora-surface)),
|
||||||
|
var(--velora-bg);
|
||||||
|
box-shadow:
|
||||||
|
0 24px 48px color-mix(in srgb, var(--velora-shadow) 28%, transparent),
|
||||||
|
inset 0 1px 0 color-mix(in srgb, var(--velora-border) 35%, white 65%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: auto auto -35% -10%;
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
background: radial-gradient(circle, color-mix(in srgb, var(--velora-accent) 28%, transparent), transparent 70%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__cover-wrap {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--velora-border) 85%, white 15%);
|
||||||
|
border-radius: calc(var(--velora-radius) - 4px);
|
||||||
|
overflow: hidden;
|
||||||
|
background: linear-gradient(145deg, var(--velora-surface), color-mix(in srgb, var(--velora-bg) 70%, black 30%));
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__cover {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__header {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__eyebrow {
|
||||||
|
font-size: 0.72em;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--velora-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__title {
|
||||||
|
font-size: 1.15em;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__editor-note {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.88em;
|
||||||
|
color: var(--velora-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--velora-button-bg) 82%, black 18%);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--velora-button-bg);
|
||||||
|
color: var(--velora-button-text);
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
box-shadow: 0 12px 24px color-mix(in srgb, var(--velora-shadow) 24%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__toggle:hover,
|
||||||
|
.map-player__toggle:focus-visible {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 16px 28px color-mix(in srgb, var(--velora-shadow) 34%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__toggle-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 8px solid transparent;
|
||||||
|
border-bottom: 8px solid transparent;
|
||||||
|
border-left: 12px solid var(--velora-button-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player.is-playing .map-player__toggle-icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 14px;
|
||||||
|
border: 0;
|
||||||
|
border-left: 4px solid var(--velora-button-text);
|
||||||
|
border-right: 4px solid var(--velora-button-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__transport {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon-button {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--velora-border) 72%, white 28%);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: color-mix(in srgb, var(--velora-surface) 88%, white 12%);
|
||||||
|
color: var(--velora-text);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
box-shadow: 0 8px 18px color-mix(in srgb, var(--velora-shadow) 16%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon-button:hover,
|
||||||
|
.map-player__icon-button:focus-visible {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
border-color: color-mix(in srgb, var(--velora-accent) 68%, white 32%);
|
||||||
|
background: color-mix(in srgb, var(--velora-surface) 72%, var(--velora-accent) 28%);
|
||||||
|
box-shadow: 0 12px 20px color-mix(in srgb, var(--velora-shadow) 20%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon-button[disabled] {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon-button.is-active {
|
||||||
|
border-color: color-mix(in srgb, var(--velora-accent) 76%, white 24%);
|
||||||
|
background: color-mix(in srgb, var(--velora-accent) 20%, var(--velora-surface) 80%);
|
||||||
|
color: var(--velora-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--previous::before,
|
||||||
|
.map-player__icon--next::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--previous::after,
|
||||||
|
.map-player__icon--next::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
width: 2px;
|
||||||
|
height: 12px;
|
||||||
|
background: currentColor;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--previous::before {
|
||||||
|
left: 2px;
|
||||||
|
border-right: 8px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--previous::after {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--next::before {
|
||||||
|
right: 2px;
|
||||||
|
border-left: 8px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--next::after {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--repeat::before,
|
||||||
|
.map-player__icon--repeat::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--repeat::before {
|
||||||
|
top: 3px;
|
||||||
|
left: 1px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-top: 2px solid currentColor;
|
||||||
|
border-left: 2px solid currentColor;
|
||||||
|
transform: rotate(-35deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__icon--repeat::after {
|
||||||
|
right: 1px;
|
||||||
|
bottom: 3px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-right: 2px solid currentColor;
|
||||||
|
border-bottom: 2px solid currentColor;
|
||||||
|
transform: rotate(-35deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__timeline {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__progress {
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
margin: 0;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--velora-border) 52%, transparent);
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
var(--velora-progress-fill) 0%,
|
||||||
|
var(--velora-progress-fill) var(--map-progress-percent),
|
||||||
|
var(--velora-progress-bg) var(--map-progress-percent),
|
||||||
|
var(--velora-progress-bg) 100%
|
||||||
|
);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__progress::-webkit-slider-runnable-track {
|
||||||
|
height: 6px;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__progress::-moz-range-track {
|
||||||
|
height: 6px;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__progress::-webkit-slider-thumb {
|
||||||
|
appearance: none;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-top: -5px;
|
||||||
|
border: 2px solid var(--velora-progress-fill);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--velora-surface);
|
||||||
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--velora-shadow) 18%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__progress::-moz-range-thumb {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: 2px solid var(--velora-progress-fill);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--velora-surface);
|
||||||
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--velora-shadow) 18%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__time {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.88em;
|
||||||
|
color: var(--velora-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover .map-player__content {
|
||||||
|
gap: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover .map-player__controls {
|
||||||
|
grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
column-gap: clamp(0.9rem, 2vw, 1.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover .map-player__timeline {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover .map-player__progress,
|
||||||
|
.map-player--no-cover .map-player__time {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--placeholder {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
background: linear-gradient(145deg, var(--velora-surface), var(--velora-bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-theme-glassmorphism {
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-theme-podcast-style {
|
||||||
|
grid-template-columns: minmax(120px, 160px) 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-theme-podcast-style .map-player__header {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--velora-border) 75%, white 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.map-player {
|
||||||
|
grid-template-columns: minmax(92px, 132px) 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-theme-podcast-style {
|
||||||
|
grid-template-columns: minmax(92px, 132px) 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__content {
|
||||||
|
gap: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__controls,
|
||||||
|
.map-player--no-cover .map-player__controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.85rem;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__actions {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__transport {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__timeline,
|
||||||
|
.map-player--no-cover .map-player__timeline {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.map-player,
|
||||||
|
.map-theme-podcast-style {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__cover-wrap {
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__toggle {
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__actions {
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player__transport {
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover .map-player__controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-player--no-cover .map-player__timeline {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
170
assets/js/admin-settings.js
Normal file
170
assets/js/admin-settings.js
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
( function( $, window ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var config = window.mapAdminSettings || {};
|
||||||
|
var optionKey = config.optionKey || 'map_settings';
|
||||||
|
var presetTokens = config.presets || {};
|
||||||
|
|
||||||
|
function getFieldSelector( key ) {
|
||||||
|
return '[name="' + optionKey + '[' + key + ']"]';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFieldValue( key ) {
|
||||||
|
var $field = $( getFieldSelector( key ) );
|
||||||
|
|
||||||
|
if ( ! $field.length ) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( 'checkbox' === $field.attr( 'type' ) ) {
|
||||||
|
return $field.is( ':checked' ) ? 1 : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $field.val();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFieldValue( key, value ) {
|
||||||
|
var $field = $( getFieldSelector( key ) );
|
||||||
|
|
||||||
|
if ( ! $field.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( 'checkbox' === $field.attr( 'type' ) ) {
|
||||||
|
$field.prop( 'checked', !! Number( value ) ).trigger( 'change' );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( $field.hasClass( 'map-color-field' ) ) {
|
||||||
|
$field.wpColorPicker( 'color', value );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$field.val( value ).trigger( 'input' ).trigger( 'change' );
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRangeLabels() {
|
||||||
|
$( '[data-map-range-value]' ).each( function() {
|
||||||
|
var key = $( this ).data( 'mapRangeValue' );
|
||||||
|
var $input = $( getFieldSelector( key ) );
|
||||||
|
var unit = $input.data( 'unit' ) || '';
|
||||||
|
$( this ).text( $input.val() + unit );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildPreviewStyles() {
|
||||||
|
return {
|
||||||
|
'--velora-bg': getFieldValue( 'player_background_color' ),
|
||||||
|
'--velora-surface': getFieldValue( 'player_surface_color' ),
|
||||||
|
'--velora-text': getFieldValue( 'player_text_color' ),
|
||||||
|
'--velora-muted': getFieldValue( 'player_muted_text_color' ),
|
||||||
|
'--velora-accent': getFieldValue( 'player_accent_color' ),
|
||||||
|
'--velora-button-bg': getFieldValue( 'player_button_background_color' ),
|
||||||
|
'--velora-button-text': getFieldValue( 'player_button_text_color' ),
|
||||||
|
'--velora-progress-bg': getFieldValue( 'player_progress_background_color' ),
|
||||||
|
'--velora-progress-fill': getFieldValue( 'player_progress_fill_color' ),
|
||||||
|
'--velora-border': getFieldValue( 'player_border_color' ),
|
||||||
|
'--velora-shadow': getFieldValue( 'player_shadow_color' ),
|
||||||
|
'--velora-radius': getFieldValue( 'player_border_radius' ) + 'px',
|
||||||
|
'--velora-padding': getFieldValue( 'player_padding' ) + 'px',
|
||||||
|
'--velora-font-size': getFieldValue( 'player_font_size' ) + 'px',
|
||||||
|
'--map-progress-percent': '38%'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePreview() {
|
||||||
|
var preset = $( '[data-map-preset-select]' ).val();
|
||||||
|
var $preview = $( '[data-map-admin-preview]' );
|
||||||
|
var styles = buildPreviewStyles();
|
||||||
|
var hasCover = Number( getFieldValue( 'player_show_cover_image' ) );
|
||||||
|
|
||||||
|
$preview.css( styles );
|
||||||
|
$preview
|
||||||
|
.removeClass( 'map-theme-modern-dark map-theme-glassmorphism map-theme-podcast-style map-player--no-cover' )
|
||||||
|
.addClass( 'map-theme-' + preset );
|
||||||
|
|
||||||
|
$( '[data-map-preview-theme]' ).text(
|
||||||
|
$( '[data-map-preset-select] option:selected' ).text()
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( hasCover ) {
|
||||||
|
$preview.find( '.map-player__cover-wrap' ).show();
|
||||||
|
$preview.attr( 'data-map-has-cover', 'true' );
|
||||||
|
} else {
|
||||||
|
$preview.find( '.map-player__cover-wrap' ).hide();
|
||||||
|
$preview
|
||||||
|
.addClass( 'map-player--no-cover' )
|
||||||
|
.attr( 'data-map-has-cover', 'false' );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( Number( getFieldValue( 'player_show_theme_label' ) ) ) {
|
||||||
|
$preview.find( '.map-player__eyebrow' ).show();
|
||||||
|
} else {
|
||||||
|
$preview.find( '.map-player__eyebrow' ).hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateRangeLabels();
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyPreset( preset ) {
|
||||||
|
if ( ! presetTokens[ preset ] ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.keys( presetTokens[ preset ] ).forEach( function( key ) {
|
||||||
|
setFieldValue( key, presetTokens[ preset ][ key ] );
|
||||||
|
} );
|
||||||
|
|
||||||
|
updatePreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initColorPickers() {
|
||||||
|
$( '.map-color-field' ).wpColorPicker( {
|
||||||
|
change: function() {
|
||||||
|
window.setTimeout( updatePreview, 0 );
|
||||||
|
},
|
||||||
|
clear: function() {
|
||||||
|
window.setTimeout( updatePreview, 0 );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function setActivePanel( panelKey ) {
|
||||||
|
$( '.map-design-form .nav-tab' ).removeClass( 'nav-tab-active' );
|
||||||
|
$( '.map-design-form .nav-tab[data-map-tab="' + panelKey + '"]' ).addClass( 'nav-tab-active' );
|
||||||
|
|
||||||
|
$( '.map-settings-panel' ).removeClass( 'is-active' );
|
||||||
|
$( '.map-settings-panel[data-map-panel="' + panelKey + '"]' ).addClass( 'is-active' );
|
||||||
|
|
||||||
|
$( '.map-settings-panels' ).scrollTop( 0 );
|
||||||
|
}
|
||||||
|
|
||||||
|
function initTabs() {
|
||||||
|
$( '.map-design-form .nav-tab' ).on( 'click', function( event ) {
|
||||||
|
event.preventDefault();
|
||||||
|
setActivePanel( $( this ).data( 'mapTab' ) );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function initResetConfirmation() {
|
||||||
|
$( '.map-reset-button' ).on( 'click', function( event ) {
|
||||||
|
if ( ! window.confirm( config.i18n.resetConfirm ) ) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
$( function() {
|
||||||
|
initColorPickers();
|
||||||
|
initTabs();
|
||||||
|
initResetConfirmation();
|
||||||
|
|
||||||
|
$( document ).on( 'input change', '[data-map-field], [data-map-preset-select]', updatePreview );
|
||||||
|
$( '[data-map-preset-select]' ).on( 'change', function() {
|
||||||
|
applyPreset( $( this ).val() );
|
||||||
|
} );
|
||||||
|
|
||||||
|
setActivePanel( 'presets' );
|
||||||
|
updatePreview();
|
||||||
|
} );
|
||||||
|
}( jQuery, window ) );
|
||||||
18
assets/js/block-editor.asset.php
Normal file
18
assets/js/block-editor.asset.php
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Asset metadata for block editor script.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
return array(
|
||||||
|
'dependencies' => array(
|
||||||
|
'wp-blocks',
|
||||||
|
'wp-block-editor',
|
||||||
|
'wp-components',
|
||||||
|
'wp-element',
|
||||||
|
'wp-i18n',
|
||||||
|
'wp-server-side-render',
|
||||||
|
),
|
||||||
|
'version' => '1.0.0',
|
||||||
|
);
|
||||||
221
assets/js/block-editor.js
Normal file
221
assets/js/block-editor.js
Normal file
@ -0,0 +1,221 @@
|
|||||||
|
( function( wp ) {
|
||||||
|
const { __ } = wp.i18n;
|
||||||
|
const { getBlockType, registerBlockType } = wp.blocks;
|
||||||
|
const { createElement: el, Fragment, useState } = wp.element;
|
||||||
|
const { InspectorControls, MediaUpload, MediaUploadCheck } = wp.blockEditor;
|
||||||
|
const { PanelBody, TextControl, TextareaControl, Button, ToggleControl, SelectControl, BaseControl, Notice } = wp.components;
|
||||||
|
const ServerSideRender = wp.serverSideRender;
|
||||||
|
|
||||||
|
const themeOptions = [
|
||||||
|
{ label: __( 'Modern Dark', 'modern-audio-player' ), value: 'modern-dark' },
|
||||||
|
{ label: __( 'Glassmorphism', 'modern-audio-player' ), value: 'glassmorphism' },
|
||||||
|
{ label: __( 'Podcast Style', 'modern-audio-player' ), value: 'podcast-style' }
|
||||||
|
];
|
||||||
|
|
||||||
|
function getAudioUrlWarning( value ) {
|
||||||
|
if ( ! value ) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const url = new window.URL( value, window.location.origin );
|
||||||
|
const hostname = url.hostname.toLowerCase();
|
||||||
|
const pathname = url.pathname.toLowerCase();
|
||||||
|
|
||||||
|
if ( [ 'youtube.com', 'www.youtube.com', 'youtu.be', 'soundcloud.com', 'open.spotify.com', 'music.apple.com' ].includes( hostname ) ) {
|
||||||
|
return __( 'This URL looks like a page, not a direct audio file. Please use a direct MP3 or other audio file URL.', 'modern-audio-player' );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( /\.(html?|php)$/i.test( pathname ) ) {
|
||||||
|
return __( 'This URL does not look like a direct audio file. Please confirm it points directly to the audio asset.', 'modern-audio-player' );
|
||||||
|
}
|
||||||
|
} catch ( error ) {
|
||||||
|
return __( 'Please enter a valid audio URL.', 'modern-audio-player' );
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatPlaylistText( playlist ) {
|
||||||
|
if ( ! Array.isArray( playlist ) || ! playlist.length ) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return playlist.map( function( track ) {
|
||||||
|
return [
|
||||||
|
track.title || '',
|
||||||
|
track.src || '',
|
||||||
|
track.image || ''
|
||||||
|
].join( ' | ' );
|
||||||
|
} ).join( '\n' );
|
||||||
|
}
|
||||||
|
|
||||||
|
function parsePlaylistText( value ) {
|
||||||
|
return String( value || '' )
|
||||||
|
.split( /\r\n|\r|\n/ )
|
||||||
|
.map( function( line ) {
|
||||||
|
return line.trim();
|
||||||
|
} )
|
||||||
|
.filter( function( line ) {
|
||||||
|
return line.length > 0;
|
||||||
|
} )
|
||||||
|
.map( function( line ) {
|
||||||
|
const parts = line.split( '|' ).map( function( part ) {
|
||||||
|
return part.trim();
|
||||||
|
} );
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: parts[ 0 ] || '',
|
||||||
|
src: parts[ 1 ] || '',
|
||||||
|
image: parts[ 2 ] || ''
|
||||||
|
};
|
||||||
|
} )
|
||||||
|
.filter( function( track ) {
|
||||||
|
return !! track.src;
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
const blockSettings = {
|
||||||
|
edit: function( props ) {
|
||||||
|
const attributes = props.attributes;
|
||||||
|
const setAttributes = props.setAttributes;
|
||||||
|
const initialPlaylistText = formatPlaylistText( attributes.playlist || [] );
|
||||||
|
const playlistState = useState( initialPlaylistText );
|
||||||
|
const playlistText = playlistState[ 0 ];
|
||||||
|
const setPlaylistText = playlistState[ 1 ];
|
||||||
|
const firstPlaylistTrack = Array.isArray( attributes.playlist ) && attributes.playlist.length ? attributes.playlist[ 0 ] : null;
|
||||||
|
const audioUrlWarning = getAudioUrlWarning( attributes.src || ( firstPlaylistTrack && firstPlaylistTrack.src ) || '' );
|
||||||
|
|
||||||
|
function onSelectAudio( media ) {
|
||||||
|
setAttributes( {
|
||||||
|
src: media && media.url ? media.url : '',
|
||||||
|
title: attributes.title || ( media && media.title ? media.title : '' )
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSelectImage( media ) {
|
||||||
|
setAttributes( {
|
||||||
|
image: media && media.url ? media.url : ''
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
return el(
|
||||||
|
Fragment,
|
||||||
|
{},
|
||||||
|
el(
|
||||||
|
InspectorControls,
|
||||||
|
{},
|
||||||
|
el(
|
||||||
|
PanelBody,
|
||||||
|
{ title: __( 'Player Content', 'modern-audio-player' ), initialOpen: true },
|
||||||
|
el( TextControl, {
|
||||||
|
label: __( 'Track Title', 'modern-audio-player' ),
|
||||||
|
value: attributes.title || '',
|
||||||
|
onChange: function( value ) {
|
||||||
|
setAttributes( { title: value } );
|
||||||
|
}
|
||||||
|
} ),
|
||||||
|
el( TextControl, {
|
||||||
|
label: __( 'Audio Source URL', 'modern-audio-player' ),
|
||||||
|
value: attributes.src || '',
|
||||||
|
help: __( 'Paste a direct audio URL or choose one from the media library below. This remains the fallback single-track source.', 'modern-audio-player' ),
|
||||||
|
onChange: function( value ) {
|
||||||
|
setAttributes( { src: value } );
|
||||||
|
}
|
||||||
|
} ),
|
||||||
|
audioUrlWarning ? el( Notice, {
|
||||||
|
status: 'warning',
|
||||||
|
isDismissible: false
|
||||||
|
}, audioUrlWarning ) : null,
|
||||||
|
el(
|
||||||
|
BaseControl,
|
||||||
|
{ label: __( 'Audio File', 'modern-audio-player' ) },
|
||||||
|
el(
|
||||||
|
MediaUploadCheck,
|
||||||
|
{},
|
||||||
|
el( MediaUpload, {
|
||||||
|
onSelect: onSelectAudio,
|
||||||
|
allowedTypes: [ 'audio' ],
|
||||||
|
render: function( renderProps ) {
|
||||||
|
return el(
|
||||||
|
Button,
|
||||||
|
{ variant: 'secondary', onClick: renderProps.open },
|
||||||
|
attributes.src ? __( 'Replace Audio File', 'modern-audio-player' ) : __( 'Choose Audio File', 'modern-audio-player' )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} )
|
||||||
|
)
|
||||||
|
),
|
||||||
|
el(
|
||||||
|
BaseControl,
|
||||||
|
{ label: __( 'Cover Image', 'modern-audio-player' ) },
|
||||||
|
el(
|
||||||
|
MediaUploadCheck,
|
||||||
|
{},
|
||||||
|
el( MediaUpload, {
|
||||||
|
onSelect: onSelectImage,
|
||||||
|
allowedTypes: [ 'image' ],
|
||||||
|
render: function( renderProps ) {
|
||||||
|
return el(
|
||||||
|
Button,
|
||||||
|
{ variant: 'secondary', onClick: renderProps.open },
|
||||||
|
attributes.image ? __( 'Replace Cover Image', 'modern-audio-player' ) : __( 'Choose Cover Image', 'modern-audio-player' )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} )
|
||||||
|
)
|
||||||
|
),
|
||||||
|
el( TextareaControl, {
|
||||||
|
label: __( 'Playlist Tracks', 'modern-audio-player' ),
|
||||||
|
help: __( 'One track per line in this format: Title | Audio URL | Image URL. If empty, the single-track fields above are used.', 'modern-audio-player' ),
|
||||||
|
value: playlistText,
|
||||||
|
onChange: function( value ) {
|
||||||
|
setPlaylistText( value );
|
||||||
|
setAttributes( { playlist: parsePlaylistText( value ) } );
|
||||||
|
}
|
||||||
|
} )
|
||||||
|
),
|
||||||
|
el(
|
||||||
|
PanelBody,
|
||||||
|
{ title: __( 'Theme', 'modern-audio-player' ), initialOpen: false },
|
||||||
|
el( ToggleControl, {
|
||||||
|
label: __( 'Inherit Global Theme', 'modern-audio-player' ),
|
||||||
|
checked: !! attributes.useGlobalTheme,
|
||||||
|
onChange: function( value ) {
|
||||||
|
setAttributes( { useGlobalTheme: value } );
|
||||||
|
}
|
||||||
|
} ),
|
||||||
|
el( SelectControl, {
|
||||||
|
label: __( 'Theme Override', 'modern-audio-player' ),
|
||||||
|
value: attributes.theme || 'modern-dark',
|
||||||
|
options: themeOptions,
|
||||||
|
disabled: !! attributes.useGlobalTheme,
|
||||||
|
onChange: function( value ) {
|
||||||
|
setAttributes( { theme: value } );
|
||||||
|
}
|
||||||
|
} )
|
||||||
|
)
|
||||||
|
),
|
||||||
|
el(
|
||||||
|
'div',
|
||||||
|
{ className: 'map-editor-preview' },
|
||||||
|
el( ServerSideRender, {
|
||||||
|
block: props.name,
|
||||||
|
attributes: attributes
|
||||||
|
} )
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
save: function() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( ! getBlockType( 'velora/audio-player' ) ) {
|
||||||
|
registerBlockType( 'velora/audio-player', blockSettings );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! getBlockType( 'map/audio-player' ) ) {
|
||||||
|
registerBlockType( 'map/audio-player', blockSettings );
|
||||||
|
}
|
||||||
|
} )( window.wp );
|
||||||
11
assets/js/player.asset.php
Normal file
11
assets/js/player.asset.php
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Asset metadata for frontend player script.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
return array(
|
||||||
|
'dependencies' => array(),
|
||||||
|
'version' => '1.0.0',
|
||||||
|
);
|
||||||
382
assets/js/player.js
Normal file
382
assets/js/player.js
Normal file
@ -0,0 +1,382 @@
|
|||||||
|
( function() {
|
||||||
|
function formatTime( totalSeconds ) {
|
||||||
|
if ( ! Number.isFinite( totalSeconds ) || totalSeconds < 0 ) {
|
||||||
|
return '0:00';
|
||||||
|
}
|
||||||
|
|
||||||
|
const minutes = Math.floor( totalSeconds / 60 );
|
||||||
|
const seconds = Math.floor( totalSeconds % 60 );
|
||||||
|
return minutes + ':' + String( seconds ).padStart( 2, '0' );
|
||||||
|
}
|
||||||
|
|
||||||
|
function initPlayers( root ) {
|
||||||
|
root.querySelectorAll( '[data-map-player]' ).forEach( initPlayer );
|
||||||
|
}
|
||||||
|
|
||||||
|
function initPlayer( root ) {
|
||||||
|
if ( root.dataset.mapInitialized === 'true' ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const audio = root.querySelector( '[data-map-audio]' );
|
||||||
|
const toggle = root.querySelector( '[data-map-toggle]' );
|
||||||
|
const previousButton = root.querySelector( '[data-map-previous]' );
|
||||||
|
const nextButton = root.querySelector( '[data-map-next]' );
|
||||||
|
const repeatButton = root.querySelector( '[data-map-repeat]' );
|
||||||
|
const progress = root.querySelector( '[data-map-progress]' );
|
||||||
|
const currentTime = root.querySelector( '[data-map-current]' );
|
||||||
|
const duration = root.querySelector( '[data-map-duration]' );
|
||||||
|
const title = root.querySelector( '[data-map-title]' );
|
||||||
|
const coverWrap = root.querySelector( '.map-player__cover-wrap' );
|
||||||
|
const cover = root.querySelector( '[data-map-cover]' );
|
||||||
|
const toggleText = root.querySelector( '.map-player__toggle-text' );
|
||||||
|
const editorNotice = root.querySelector( '[data-map-editor-notice]' );
|
||||||
|
const isEditorPreview = root.dataset.mapEditorPreview === 'true';
|
||||||
|
const showCoverSetting = root.dataset.mapShowCoverSetting === 'true';
|
||||||
|
const trackedHashes = new Set();
|
||||||
|
let isRepeatEnabled = root.dataset.mapRepeatEnabled === 'true';
|
||||||
|
let currentIndex = Number( root.dataset.mapCurrentIndex || 0 );
|
||||||
|
let playlist = [];
|
||||||
|
|
||||||
|
if ( ! audio || ! toggle || ! progress || ! currentTime || ! duration ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parsedPlaylist = JSON.parse( root.dataset.mapPlaylist || '[]' );
|
||||||
|
|
||||||
|
if ( Array.isArray( parsedPlaylist ) ) {
|
||||||
|
playlist = parsedPlaylist.filter( function( track ) {
|
||||||
|
return track && track.src;
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
} catch ( error ) {
|
||||||
|
playlist = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! playlist.length && root.dataset.trackSrc ) {
|
||||||
|
playlist = [
|
||||||
|
{
|
||||||
|
src: root.dataset.trackSrc,
|
||||||
|
title: root.dataset.trackTitle || 'Untitled Track',
|
||||||
|
image: cover && cover.getAttribute( 'src' ) ? cover.getAttribute( 'src' ) : '',
|
||||||
|
hash: root.dataset.trackHash || '',
|
||||||
|
nonce: root.dataset.trackNonce || ''
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! playlist.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentIndex = Math.max( 0, Math.min( currentIndex, playlist.length - 1 ) );
|
||||||
|
root.dataset.mapInitialized = 'true';
|
||||||
|
|
||||||
|
function getCurrentTrack() {
|
||||||
|
return playlist[ currentIndex ] || playlist[ 0 ];
|
||||||
|
}
|
||||||
|
|
||||||
|
function setEditorNotice( message ) {
|
||||||
|
if ( ! editorNotice ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
editorNotice.textContent = message;
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncTrackDataset( track ) {
|
||||||
|
root.dataset.mapCurrentIndex = String( currentIndex );
|
||||||
|
root.dataset.trackSrc = track.src || '';
|
||||||
|
root.dataset.trackTitle = track.title || '';
|
||||||
|
root.dataset.trackHash = track.hash || '';
|
||||||
|
root.dataset.trackNonce = track.nonce || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCoverUI( track ) {
|
||||||
|
const shouldShowCover = showCoverSetting && !! track.image;
|
||||||
|
|
||||||
|
root.classList.toggle( 'map-player--no-cover', ! shouldShowCover );
|
||||||
|
root.dataset.mapHasCover = shouldShowCover ? 'true' : 'false';
|
||||||
|
|
||||||
|
if ( ! coverWrap || ! cover ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
coverWrap.style.display = shouldShowCover ? '' : 'none';
|
||||||
|
|
||||||
|
if ( shouldShowCover ) {
|
||||||
|
cover.src = track.image;
|
||||||
|
cover.alt = track.title || 'Audio cover';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTransportState() {
|
||||||
|
const atFirstTrack = currentIndex === 0;
|
||||||
|
const atLastTrack = currentIndex === playlist.length - 1;
|
||||||
|
|
||||||
|
if ( previousButton ) {
|
||||||
|
previousButton.disabled = atFirstTrack;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( nextButton ) {
|
||||||
|
nextButton.disabled = atLastTrack;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( repeatButton ) {
|
||||||
|
repeatButton.classList.toggle( 'is-active', isRepeatEnabled );
|
||||||
|
repeatButton.setAttribute( 'aria-pressed', isRepeatEnabled ? 'true' : 'false' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProgressUI() {
|
||||||
|
if ( ! Number.isFinite( audio.duration ) || audio.duration <= 0 ) {
|
||||||
|
progress.value = 0;
|
||||||
|
duration.textContent = '0:00';
|
||||||
|
currentTime.textContent = '0:00';
|
||||||
|
progress.style.setProperty( '--map-progress-percent', '0%' );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const percent = ( audio.currentTime / audio.duration ) * 100;
|
||||||
|
progress.value = percent;
|
||||||
|
progress.style.setProperty( '--map-progress-percent', percent + '%' );
|
||||||
|
currentTime.textContent = formatTime( audio.currentTime );
|
||||||
|
duration.textContent = formatTime( audio.duration );
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPlayingState( isPlaying ) {
|
||||||
|
root.classList.toggle( 'is-playing', isPlaying );
|
||||||
|
toggle.setAttribute( 'aria-pressed', isPlaying ? 'true' : 'false' );
|
||||||
|
toggle.setAttribute( 'aria-label', isPlaying ? 'Pause audio' : 'Play audio' );
|
||||||
|
toggleText.textContent = isPlaying ? 'Pause' : 'Play';
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyTrack( options ) {
|
||||||
|
const track = getCurrentTrack();
|
||||||
|
const autoplay = !! ( options && options.autoplay );
|
||||||
|
|
||||||
|
if ( title ) {
|
||||||
|
title.textContent = track.title || 'Untitled Track';
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCoverUI( track );
|
||||||
|
updateTransportState();
|
||||||
|
syncTrackDataset( track );
|
||||||
|
|
||||||
|
if ( audio.getAttribute( 'src' ) !== track.src ) {
|
||||||
|
audio.setAttribute( 'src', track.src );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( audio.src !== track.src ) {
|
||||||
|
audio.src = track.src;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.load();
|
||||||
|
updateProgressUI();
|
||||||
|
|
||||||
|
if ( autoplay ) {
|
||||||
|
audio.play().catch( function() {
|
||||||
|
if ( isEditorPreview ) {
|
||||||
|
setEditorNotice( 'Playback preview is limited in the editor. Test full playback on the frontend.' );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function ensureAudioLoaded() {
|
||||||
|
const track = getCurrentTrack();
|
||||||
|
|
||||||
|
if ( ! track || ! track.src ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( audio.getAttribute( 'src' ) !== track.src ) {
|
||||||
|
applyTrack( { autoplay: false } );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( audio.networkState === HTMLMediaElement.NETWORK_EMPTY || ! Number.isFinite( audio.duration ) || audio.duration <= 0 ) {
|
||||||
|
try {
|
||||||
|
audio.load();
|
||||||
|
} catch ( error ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function trackPlay() {
|
||||||
|
const track = getCurrentTrack();
|
||||||
|
|
||||||
|
if ( ! track || ! track.src || ! track.hash || ! track.nonce || ! root.dataset.restEndpoint || trackedHashes.has( track.hash ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
trackedHashes.add( track.hash );
|
||||||
|
|
||||||
|
window.fetch( root.dataset.restEndpoint, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify( {
|
||||||
|
src: track.src,
|
||||||
|
title: track.title || '',
|
||||||
|
hash: track.hash,
|
||||||
|
nonce: track.nonce
|
||||||
|
} ),
|
||||||
|
credentials: 'same-origin'
|
||||||
|
} ).catch( function() {
|
||||||
|
return null;
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchTrack( nextIndex, options ) {
|
||||||
|
if ( nextIndex < 0 || nextIndex >= playlist.length || nextIndex === currentIndex ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentIndex = nextIndex;
|
||||||
|
applyTrack( options );
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle.addEventListener( 'click', function() {
|
||||||
|
ensureAudioLoaded();
|
||||||
|
|
||||||
|
if ( audio.paused ) {
|
||||||
|
audio.play().catch( function() {
|
||||||
|
if ( isEditorPreview ) {
|
||||||
|
setEditorNotice( 'Playback preview is limited in the editor. Test full playback on the frontend.' );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio.pause();
|
||||||
|
} );
|
||||||
|
|
||||||
|
if ( previousButton ) {
|
||||||
|
previousButton.addEventListener( 'click', function() {
|
||||||
|
if ( previousButton.disabled ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( audio.currentTime > 5 ) {
|
||||||
|
audio.currentTime = 0;
|
||||||
|
updateProgressUI();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switchTrack( currentIndex - 1, { autoplay: ! audio.paused } );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( nextButton ) {
|
||||||
|
nextButton.addEventListener( 'click', function() {
|
||||||
|
if ( nextButton.disabled ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switchTrack( currentIndex + 1, { autoplay: ! audio.paused } );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( repeatButton ) {
|
||||||
|
repeatButton.addEventListener( 'click', function() {
|
||||||
|
isRepeatEnabled = ! isRepeatEnabled;
|
||||||
|
root.dataset.mapRepeatEnabled = isRepeatEnabled ? 'true' : 'false';
|
||||||
|
updateTransportState();
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
audio.addEventListener( 'play', function() {
|
||||||
|
setPlayingState( true );
|
||||||
|
trackPlay();
|
||||||
|
} );
|
||||||
|
|
||||||
|
audio.addEventListener( 'pause', function() {
|
||||||
|
setPlayingState( false );
|
||||||
|
} );
|
||||||
|
|
||||||
|
audio.addEventListener( 'loadedmetadata', updateProgressUI );
|
||||||
|
audio.addEventListener( 'durationchange', updateProgressUI );
|
||||||
|
audio.addEventListener( 'canplay', updateProgressUI );
|
||||||
|
audio.addEventListener( 'timeupdate', updateProgressUI );
|
||||||
|
audio.addEventListener( 'error', function() {
|
||||||
|
updateProgressUI();
|
||||||
|
setEditorNotice( 'Unable to load audio preview. Confirm the URL points directly to an audio file.' );
|
||||||
|
} );
|
||||||
|
audio.addEventListener( 'ended', function() {
|
||||||
|
if ( isRepeatEnabled ) {
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.play().catch( function() {
|
||||||
|
return null;
|
||||||
|
} );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( currentIndex < playlist.length - 1 ) {
|
||||||
|
switchTrack( currentIndex + 1, { autoplay: true } );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPlayingState( false );
|
||||||
|
audio.currentTime = 0;
|
||||||
|
updateProgressUI();
|
||||||
|
} );
|
||||||
|
|
||||||
|
progress.addEventListener( 'input', function() {
|
||||||
|
if ( ! Number.isFinite( audio.duration ) || audio.duration <= 0 ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetTime = ( Number( progress.value ) / 100 ) * audio.duration;
|
||||||
|
audio.currentTime = targetTime;
|
||||||
|
updateProgressUI();
|
||||||
|
} );
|
||||||
|
|
||||||
|
applyTrack( { autoplay: false } );
|
||||||
|
}
|
||||||
|
|
||||||
|
function observePlayerMounts() {
|
||||||
|
if ( ! document.body || typeof MutationObserver === 'undefined' ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = new MutationObserver( function( mutations ) {
|
||||||
|
mutations.forEach( function( mutation ) {
|
||||||
|
mutation.addedNodes.forEach( function( node ) {
|
||||||
|
if ( ! node || node.nodeType !== 1 ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( node.matches && node.matches( '[data-map-player]' ) ) {
|
||||||
|
initPlayer( node );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( node.querySelectorAll ) {
|
||||||
|
initPlayers( node );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
observer.observe( document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function boot() {
|
||||||
|
initPlayers( document );
|
||||||
|
observePlayerMounts();
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( document.readyState === 'loading' ) {
|
||||||
|
document.addEventListener( 'DOMContentLoaded', boot );
|
||||||
|
} else {
|
||||||
|
boot();
|
||||||
|
}
|
||||||
|
} )();
|
||||||
46
blocks/block.json
Normal file
46
blocks/block.json
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||||
|
"apiVersion": 2,
|
||||||
|
"name": "velora/audio-player",
|
||||||
|
"version": "1.2.0",
|
||||||
|
"title": "Velora Player",
|
||||||
|
"category": "media",
|
||||||
|
"icon": "format-audio",
|
||||||
|
"description": "Insert a modern themed audio player with analytics tracking.",
|
||||||
|
"textdomain": "modern-audio-player",
|
||||||
|
"keywords": [ "audio", "player", "podcast" ],
|
||||||
|
"supports": {
|
||||||
|
"html": false,
|
||||||
|
"align": [ "wide", "full" ]
|
||||||
|
},
|
||||||
|
"attributes": {
|
||||||
|
"title": {
|
||||||
|
"type": "string",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
"src": {
|
||||||
|
"type": "string",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"type": "string",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
"playlist": {
|
||||||
|
"type": "array",
|
||||||
|
"default": []
|
||||||
|
},
|
||||||
|
"theme": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "modern-dark"
|
||||||
|
},
|
||||||
|
"useGlobalTheme": {
|
||||||
|
"type": "boolean",
|
||||||
|
"default": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"editorScript": "file:../assets/js/block-editor.js",
|
||||||
|
"style": "file:../assets/css/player.css",
|
||||||
|
"editorStyle": "file:../assets/css/editor.css",
|
||||||
|
"script": "file:../assets/js/player.js"
|
||||||
|
}
|
||||||
174
includes/class-analytics.php
Normal file
174
includes/class-analytics.php
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Analytics service.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Analytics {
|
||||||
|
/**
|
||||||
|
* Create database table on activation.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public static function create_table() {
|
||||||
|
global $wpdb;
|
||||||
|
|
||||||
|
$table_name = self::table_name();
|
||||||
|
$charset_collate = $wpdb->get_charset_collate();
|
||||||
|
|
||||||
|
require_once ABSPATH . 'wp-admin/includes/upgrade.php';
|
||||||
|
|
||||||
|
$sql = "CREATE TABLE {$table_name} (
|
||||||
|
id bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||||
|
source_hash varchar(64) NOT NULL,
|
||||||
|
audio_src text NOT NULL,
|
||||||
|
track_title varchar(255) NOT NULL DEFAULT '',
|
||||||
|
play_count bigint(20) unsigned NOT NULL DEFAULT 0,
|
||||||
|
last_played datetime NULL DEFAULT NULL,
|
||||||
|
created_at datetime NOT NULL,
|
||||||
|
updated_at datetime NOT NULL,
|
||||||
|
PRIMARY KEY (id),
|
||||||
|
UNIQUE KEY source_hash (source_hash),
|
||||||
|
KEY play_count (play_count),
|
||||||
|
KEY last_played (last_played)
|
||||||
|
) {$charset_collate};";
|
||||||
|
|
||||||
|
dbDelta( $sql );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the analytics table name.
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public static function table_name() {
|
||||||
|
global $wpdb;
|
||||||
|
return $wpdb->prefix . 'map_analytics';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build a stable source hash.
|
||||||
|
*
|
||||||
|
* @param string $audio_src Audio URL.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public static function build_source_hash( $audio_src ) {
|
||||||
|
return hash( 'sha256', esc_url_raw( trim( (string) $audio_src ) ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Record a play.
|
||||||
|
*
|
||||||
|
* Count rule:
|
||||||
|
* One request counts once for the rendered player instance session. The frontend
|
||||||
|
* only sends this call on the first meaningful play event per player rendered on a page.
|
||||||
|
*
|
||||||
|
* @param string $audio_src Audio source URL.
|
||||||
|
* @param string $track_title Track title.
|
||||||
|
* @return bool
|
||||||
|
*/
|
||||||
|
public static function record_play( $audio_src, $track_title = '' ) {
|
||||||
|
global $wpdb;
|
||||||
|
|
||||||
|
$audio_src = esc_url_raw( $audio_src );
|
||||||
|
$track_title = sanitize_text_field( $track_title );
|
||||||
|
$source_hash = self::build_source_hash( $audio_src );
|
||||||
|
$table_name = self::table_name();
|
||||||
|
$current_time = current_time( 'mysql', true );
|
||||||
|
|
||||||
|
if ( empty( $audio_src ) ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$existing_id = $wpdb->get_var(
|
||||||
|
$wpdb->prepare(
|
||||||
|
"SELECT id FROM {$table_name} WHERE source_hash = %s LIMIT 1",
|
||||||
|
$source_hash
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( $existing_id ) {
|
||||||
|
$result = $wpdb->query(
|
||||||
|
$wpdb->prepare(
|
||||||
|
"UPDATE {$table_name}
|
||||||
|
SET play_count = play_count + 1,
|
||||||
|
track_title = %s,
|
||||||
|
last_played = %s,
|
||||||
|
updated_at = %s
|
||||||
|
WHERE source_hash = %s",
|
||||||
|
$track_title,
|
||||||
|
$current_time,
|
||||||
|
$current_time,
|
||||||
|
$source_hash
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
return false !== $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
$result = $wpdb->insert(
|
||||||
|
$table_name,
|
||||||
|
array(
|
||||||
|
'source_hash' => $source_hash,
|
||||||
|
'audio_src' => $audio_src,
|
||||||
|
'track_title' => $track_title,
|
||||||
|
'play_count' => 1,
|
||||||
|
'last_played' => $current_time,
|
||||||
|
'created_at' => $current_time,
|
||||||
|
'updated_at' => $current_time,
|
||||||
|
),
|
||||||
|
array( '%s', '%s', '%s', '%d', '%s', '%s', '%s' )
|
||||||
|
);
|
||||||
|
|
||||||
|
return false !== $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch top tracks.
|
||||||
|
*
|
||||||
|
* @param int $limit Row limit.
|
||||||
|
* @return array<int, object>
|
||||||
|
*/
|
||||||
|
public static function get_top_tracks( $limit = 20 ) {
|
||||||
|
global $wpdb;
|
||||||
|
|
||||||
|
$table_name = self::table_name();
|
||||||
|
$limit = max( 1, absint( $limit ) );
|
||||||
|
|
||||||
|
return $wpdb->get_results(
|
||||||
|
$wpdb->prepare(
|
||||||
|
"SELECT source_hash, audio_src, track_title, play_count, last_played
|
||||||
|
FROM {$table_name}
|
||||||
|
ORDER BY play_count DESC, last_played DESC
|
||||||
|
LIMIT %d",
|
||||||
|
$limit
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get aggregate stats.
|
||||||
|
*
|
||||||
|
* @return array<string, int|string|null>
|
||||||
|
*/
|
||||||
|
public static function get_summary() {
|
||||||
|
global $wpdb;
|
||||||
|
|
||||||
|
$table_name = self::table_name();
|
||||||
|
$row = $wpdb->get_row(
|
||||||
|
"SELECT COUNT(*) AS track_count, COALESCE(SUM(play_count), 0) AS total_plays, MAX(last_played) AS last_played FROM {$table_name}",
|
||||||
|
ARRAY_A
|
||||||
|
);
|
||||||
|
|
||||||
|
return array(
|
||||||
|
'track_count' => isset( $row['track_count'] ) ? (int) $row['track_count'] : 0,
|
||||||
|
'total_plays' => isset( $row['total_plays'] ) ? (int) $row['total_plays'] : 0,
|
||||||
|
'last_played' => $row['last_played'] ?? null,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
142
includes/class-plugin.php
Normal file
142
includes/class-plugin.php
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Main plugin bootstrap.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Plugin {
|
||||||
|
/**
|
||||||
|
* Settings service.
|
||||||
|
*
|
||||||
|
* @var Settings
|
||||||
|
*/
|
||||||
|
private $settings;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Admin service.
|
||||||
|
*
|
||||||
|
* @var Admin
|
||||||
|
*/
|
||||||
|
private $admin;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shortcode service.
|
||||||
|
*
|
||||||
|
* @var Shortcode
|
||||||
|
*/
|
||||||
|
private $shortcode;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* REST service.
|
||||||
|
*
|
||||||
|
* @var Rest_API
|
||||||
|
*/
|
||||||
|
private $rest_api;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize service objects.
|
||||||
|
*/
|
||||||
|
public function __construct() {
|
||||||
|
$this->settings = new Settings();
|
||||||
|
$this->admin = new Admin();
|
||||||
|
$this->shortcode = new Shortcode();
|
||||||
|
$this->rest_api = new Rest_API();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Plugin activation callback.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public static function activate() {
|
||||||
|
Settings::maybe_install_defaults();
|
||||||
|
Analytics::create_table();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register hooks.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function init() {
|
||||||
|
add_action( 'init', array( $this, 'load_textdomain' ) );
|
||||||
|
add_action( 'init', array( $this, 'register_block' ) );
|
||||||
|
|
||||||
|
$this->shortcode->register();
|
||||||
|
$this->admin->register();
|
||||||
|
$this->rest_api->register();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load translations.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function load_textdomain() {
|
||||||
|
load_plugin_textdomain( 'modern-audio-player', false, dirname( plugin_basename( MAP_PLUGIN_FILE ) ) . '/languages' );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register the Gutenberg block.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register_block() {
|
||||||
|
register_block_type_from_metadata(
|
||||||
|
MAP_PLUGIN_DIR . 'blocks/block.json',
|
||||||
|
array(
|
||||||
|
'render_callback' => array( $this, 'render_block' ),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->register_legacy_block_alias();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Server-render block markup.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $attributes Block attributes.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public function render_block( $attributes ) {
|
||||||
|
return Renderer::render_player( (array) $attributes, is_admin() ? 'editor' : 'frontend' );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register the legacy block name as an alias for backward compatibility.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
private function register_legacy_block_alias() {
|
||||||
|
$primary_block = \WP_Block_Type_Registry::get_instance()->get_registered( 'velora/audio-player' );
|
||||||
|
|
||||||
|
if ( ! $primary_block ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
register_block_type(
|
||||||
|
'map/audio-player',
|
||||||
|
array(
|
||||||
|
'api_version' => $primary_block->api_version,
|
||||||
|
'title' => $primary_block->title,
|
||||||
|
'category' => $primary_block->category,
|
||||||
|
'icon' => $primary_block->icon,
|
||||||
|
'description' => $primary_block->description,
|
||||||
|
'keywords' => $primary_block->keywords,
|
||||||
|
'attributes' => $primary_block->attributes,
|
||||||
|
'supports' => $primary_block->supports,
|
||||||
|
'style_handles' => $primary_block->style_handles,
|
||||||
|
'editor_style_handles' => $primary_block->editor_style_handles,
|
||||||
|
'script_handles' => $primary_block->script_handles,
|
||||||
|
'editor_script_handles'=> $primary_block->editor_script_handles,
|
||||||
|
'render_callback' => array( $this, 'render_block' ),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
348
includes/class-renderer.php
Normal file
348
includes/class-renderer.php
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Frontend renderer.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Renderer {
|
||||||
|
/**
|
||||||
|
* Render a player instance.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $attributes Player attributes.
|
||||||
|
* @param string $context Rendering context.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public static function render_player( $attributes, $context = 'frontend' ) {
|
||||||
|
self::enqueue_block_assets();
|
||||||
|
|
||||||
|
$settings = Settings::get();
|
||||||
|
$args = self::normalize_attributes( $attributes, $settings );
|
||||||
|
$theme_data = self::get_theme_presets();
|
||||||
|
$theme_name = isset( $theme_data[ $args['theme'] ] ) ? $theme_data[ $args['theme'] ]['label'] : $theme_data[ Settings::get_default_preset_slug() ]['label'];
|
||||||
|
$design_settings = Settings::get_resolved_design_settings( $args['theme'], $settings );
|
||||||
|
$style_attr = Settings::build_design_css_variables( $design_settings );
|
||||||
|
$is_editor_context = self::is_editor_context( $context );
|
||||||
|
$playlist_payload = self::prepare_playlist_payload( $args['playlist'] );
|
||||||
|
$current_track = $playlist_payload[ $args['currentIndex'] ];
|
||||||
|
$show_cover_image = ! empty( $current_track['image'] ) && ! empty( $design_settings['player_show_cover_image'] );
|
||||||
|
$instance_id = 'map-player-' . wp_unique_id();
|
||||||
|
|
||||||
|
if ( empty( $current_track['src'] ) ) {
|
||||||
|
if ( $is_editor_context ) {
|
||||||
|
return self::render_placeholder( $args['theme'], $theme_name, $style_attr, $design_settings );
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
ob_start();
|
||||||
|
?>
|
||||||
|
<div
|
||||||
|
id="<?php echo esc_attr( $instance_id ); ?>"
|
||||||
|
class="map-player map-theme-<?php echo esc_attr( $args['theme'] ); ?><?php echo $show_cover_image ? '' : ' map-player--no-cover'; ?>"
|
||||||
|
data-map-player
|
||||||
|
data-map-editor-preview="<?php echo $is_editor_context ? 'true' : 'false'; ?>"
|
||||||
|
data-map-show-cover-setting="<?php echo ! empty( $design_settings['player_show_cover_image'] ) ? 'true' : 'false'; ?>"
|
||||||
|
data-map-playlist="<?php echo esc_attr( wp_json_encode( $playlist_payload ) ); ?>"
|
||||||
|
data-map-current-index="<?php echo esc_attr( (string) $args['currentIndex'] ); ?>"
|
||||||
|
data-map-repeat-enabled="false"
|
||||||
|
data-map-has-cover="<?php echo $show_cover_image ? 'true' : 'false'; ?>"
|
||||||
|
data-track-src="<?php echo esc_url( $current_track['src'] ); ?>"
|
||||||
|
data-track-title="<?php echo esc_attr( $current_track['title'] ); ?>"
|
||||||
|
data-track-hash="<?php echo esc_attr( $current_track['hash'] ); ?>"
|
||||||
|
data-track-nonce="<?php echo esc_attr( $current_track['nonce'] ); ?>"
|
||||||
|
data-rest-endpoint="<?php echo esc_url( rest_url( 'map/v1/track-play' ) ); ?>"
|
||||||
|
style="<?php echo esc_attr( $style_attr ); ?>"
|
||||||
|
>
|
||||||
|
<div class="map-player__cover-wrap"<?php echo $show_cover_image ? '' : ' style="display:none;"'; ?>>
|
||||||
|
<img class="map-player__cover" src="<?php echo esc_url( $current_track['image'] ); ?>" alt="<?php echo esc_attr( $current_track['title'] ); ?>" loading="lazy" data-map-cover />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-player__content">
|
||||||
|
<div class="map-player__header">
|
||||||
|
<?php if ( ! empty( $design_settings['player_show_theme_label'] ) ) : ?>
|
||||||
|
<div class="map-player__eyebrow"><?php echo esc_html( $theme_name ); ?></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<div class="map-player__title" data-map-title><?php echo esc_html( $current_track['title'] ); ?></div>
|
||||||
|
<?php if ( $is_editor_context ) : ?>
|
||||||
|
<p class="map-player__editor-note" data-map-editor-notice><?php esc_html_e( 'Playback preview is limited in the editor. Test full playback on the frontend.', 'modern-audio-player' ); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-player__controls">
|
||||||
|
<div class="map-player__actions">
|
||||||
|
<button type="button" class="map-player__toggle" data-map-toggle aria-label="<?php esc_attr_e( 'Play audio', 'modern-audio-player' ); ?>" aria-pressed="false">
|
||||||
|
<span class="map-player__toggle-icon map-player__toggle-icon--play" aria-hidden="true"></span>
|
||||||
|
<span class="map-player__toggle-text"><?php esc_html_e( 'Play', 'modern-audio-player' ); ?></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="map-player__transport">
|
||||||
|
<button type="button" class="map-player__icon-button" data-map-previous aria-label="<?php esc_attr_e( 'Previous track', 'modern-audio-player' ); ?>" disabled>
|
||||||
|
<span class="map-player__icon map-player__icon--previous" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="map-player__icon-button" data-map-next aria-label="<?php esc_attr_e( 'Next track', 'modern-audio-player' ); ?>">
|
||||||
|
<span class="map-player__icon map-player__icon--next" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="map-player__icon-button" data-map-repeat aria-label="<?php esc_attr_e( 'Repeat track', 'modern-audio-player' ); ?>" aria-pressed="false">
|
||||||
|
<span class="map-player__icon map-player__icon--repeat" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-player__timeline">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
class="map-player__progress"
|
||||||
|
data-map-progress
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
value="0"
|
||||||
|
step="0.1"
|
||||||
|
aria-label="<?php esc_attr_e( 'Track progress', 'modern-audio-player' ); ?>"
|
||||||
|
/>
|
||||||
|
<div class="map-player__time">
|
||||||
|
<span data-map-current><?php esc_html_e( '0:00', 'modern-audio-player' ); ?></span>
|
||||||
|
<span data-map-duration><?php esc_html_e( '0:00', 'modern-audio-player' ); ?></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<audio class="map-player__audio" preload="metadata" src="<?php echo esc_url( $current_track['src'] ); ?>" data-map-audio></audio>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
return (string) ob_get_clean();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get available theme presets.
|
||||||
|
*
|
||||||
|
* @return array<string, array<string, mixed>>
|
||||||
|
*/
|
||||||
|
public static function get_theme_presets() {
|
||||||
|
return Settings::get_design_presets();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Normalize and sanitize player attributes.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $attributes Raw attributes.
|
||||||
|
* @param array<string, mixed> $settings Global settings.
|
||||||
|
* @return array<string, mixed>
|
||||||
|
*/
|
||||||
|
public static function normalize_attributes( $attributes, $settings = array() ) {
|
||||||
|
if ( empty( $settings ) ) {
|
||||||
|
$settings = Settings::get();
|
||||||
|
}
|
||||||
|
|
||||||
|
$defaults = array(
|
||||||
|
'src' => '',
|
||||||
|
'title' => __( 'Untitled Track', 'modern-audio-player' ),
|
||||||
|
'image' => '',
|
||||||
|
'playlist' => array(),
|
||||||
|
'theme' => $settings['default_theme'],
|
||||||
|
'useGlobalTheme' => true,
|
||||||
|
);
|
||||||
|
|
||||||
|
$args = wp_parse_args( is_array( $attributes ) ? $attributes : array(), $defaults );
|
||||||
|
|
||||||
|
$args['src'] = esc_url_raw( $args['src'] );
|
||||||
|
$args['title'] = sanitize_text_field( $args['title'] );
|
||||||
|
$args['image'] = esc_url_raw( $args['image'] );
|
||||||
|
|
||||||
|
$use_global_theme = rest_sanitize_boolean( $args['useGlobalTheme'] );
|
||||||
|
$enabled_themes = isset( $settings['enabled_themes'] ) && is_array( $settings['enabled_themes'] ) ? $settings['enabled_themes'] : array_keys( self::get_theme_presets() );
|
||||||
|
$requested_theme = sanitize_key( $args['theme'] );
|
||||||
|
|
||||||
|
if ( $use_global_theme || ! in_array( $requested_theme, $enabled_themes, true ) ) {
|
||||||
|
$args['theme'] = $settings['default_theme'];
|
||||||
|
} else {
|
||||||
|
$args['theme'] = $requested_theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
$args['playlist'] = self::normalize_playlist_items( $args['playlist'], $args );
|
||||||
|
|
||||||
|
if ( empty( $args['playlist'] ) ) {
|
||||||
|
$args['playlist'] = array(
|
||||||
|
self::prepare_track(
|
||||||
|
array(
|
||||||
|
'src' => $args['src'],
|
||||||
|
'title' => $args['title'],
|
||||||
|
'image' => $args['image'],
|
||||||
|
)
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
$args['currentIndex'] = 0;
|
||||||
|
$args['src'] = $args['playlist'][0]['src'];
|
||||||
|
$args['title'] = $args['playlist'][0]['title'];
|
||||||
|
$args['image'] = $args['playlist'][0]['image'];
|
||||||
|
$args['useGlobalTheme'] = $use_global_theme;
|
||||||
|
|
||||||
|
return $args;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Detect whether the current render is happening inside the block editor.
|
||||||
|
*
|
||||||
|
* @param string $context Rendering context.
|
||||||
|
* @return bool
|
||||||
|
*/
|
||||||
|
private static function is_editor_context( $context ) {
|
||||||
|
if ( 'editor' === $context || is_admin() ) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$request_uri = isset( $_SERVER['REQUEST_URI'] ) ? wp_unslash( $_SERVER['REQUEST_URI'] ) : '';
|
||||||
|
$rest_context = isset( $_REQUEST['context'] ) ? sanitize_key( wp_unslash( $_REQUEST['context'] ) ) : '';
|
||||||
|
$referer = wp_get_referer();
|
||||||
|
|
||||||
|
if ( 'edit' === $rest_context || false !== strpos( $request_uri, '/wp/v2/block-renderer/' ) ) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return is_string( $referer ) && false !== strpos( $referer, 'post.php' );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a visible placeholder for editor previews without an audio source.
|
||||||
|
*
|
||||||
|
* @param string $theme_slug Theme class suffix.
|
||||||
|
* @param string $theme_name Human-readable theme name.
|
||||||
|
* @param string $style_attr Inline CSS variable string.
|
||||||
|
* @param array<string, mixed> $design_settings Resolved design settings.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
private static function render_placeholder( $theme_slug, $theme_name, $style_attr, $design_settings ) {
|
||||||
|
ob_start();
|
||||||
|
?>
|
||||||
|
<div
|
||||||
|
class="map-player map-player--placeholder map-theme-<?php echo esc_attr( $theme_slug ); ?>"
|
||||||
|
data-map-player
|
||||||
|
data-map-editor-preview="true"
|
||||||
|
style="<?php echo esc_attr( $style_attr ); ?>"
|
||||||
|
>
|
||||||
|
<div class="map-player__content">
|
||||||
|
<div class="map-player__header">
|
||||||
|
<?php if ( ! empty( $design_settings['player_show_theme_label'] ) ) : ?>
|
||||||
|
<div class="map-player__eyebrow"><?php echo esc_html( $theme_name ); ?></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<div class="map-player__title"><?php esc_html_e( 'Select an audio file to preview', 'modern-audio-player' ); ?></div>
|
||||||
|
<p class="map-player__editor-note" data-map-editor-notice><?php esc_html_e( 'Playback preview is limited in the editor. Test full playback on the frontend.', 'modern-audio-player' ); ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
return (string) ob_get_clean();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Normalize playlist items and preserve backward compatibility.
|
||||||
|
*
|
||||||
|
* @param mixed $playlist Raw playlist attribute.
|
||||||
|
* @param array<string, mixed> $args Normalized player arguments.
|
||||||
|
* @return array<int, array<string, string>>
|
||||||
|
*/
|
||||||
|
private static function normalize_playlist_items( $playlist, $args ) {
|
||||||
|
$normalized = array();
|
||||||
|
|
||||||
|
if ( is_array( $playlist ) ) {
|
||||||
|
foreach ( $playlist as $track ) {
|
||||||
|
$prepared = self::prepare_track( is_array( $track ) ? $track : array() );
|
||||||
|
|
||||||
|
if ( '' !== $prepared['src'] ) {
|
||||||
|
$normalized[] = $prepared;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( empty( $normalized ) && ! empty( $args['src'] ) ) {
|
||||||
|
$normalized[] = self::prepare_track(
|
||||||
|
array(
|
||||||
|
'src' => $args['src'],
|
||||||
|
'title' => $args['title'],
|
||||||
|
'image' => $args['image'],
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $normalized;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sanitize a track item.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $track Track data.
|
||||||
|
* @return array<string, string>
|
||||||
|
*/
|
||||||
|
private static function prepare_track( $track ) {
|
||||||
|
return array(
|
||||||
|
'src' => esc_url_raw( $track['src'] ?? '' ),
|
||||||
|
'title' => sanitize_text_field( $track['title'] ?? __( 'Untitled Track', 'modern-audio-player' ) ),
|
||||||
|
'image' => esc_url_raw( $track['image'] ?? '' ),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepare playlist payload for the frontend runtime.
|
||||||
|
*
|
||||||
|
* @param array<int, array<string, string>> $playlist Playlist items.
|
||||||
|
* @return array<int, array<string, string>>
|
||||||
|
*/
|
||||||
|
private static function prepare_playlist_payload( $playlist ) {
|
||||||
|
$payload = array();
|
||||||
|
|
||||||
|
foreach ( $playlist as $track ) {
|
||||||
|
$hash = Analytics::build_source_hash( $track['src'] );
|
||||||
|
$payload[] = array(
|
||||||
|
'src' => $track['src'],
|
||||||
|
'title' => $track['title'],
|
||||||
|
'image' => $track['image'],
|
||||||
|
'hash' => $hash,
|
||||||
|
'nonce' => wp_create_nonce( 'map_track_play_' . $hash ),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $payload;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enqueue frontend block assets for shortcode and dynamic rendering.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
private static function enqueue_block_assets() {
|
||||||
|
if ( is_admin() ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$registry = \WP_Block_Type_Registry::get_instance();
|
||||||
|
$block = $registry->get_registered( 'velora/audio-player' );
|
||||||
|
|
||||||
|
if ( ! $block ) {
|
||||||
|
$block = $registry->get_registered( 'map/audio-player' );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $block ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach ( $block->style_handles as $handle ) {
|
||||||
|
wp_enqueue_style( $handle );
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach ( $block->script_handles as $handle ) {
|
||||||
|
wp_enqueue_script( $handle );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
98
includes/class-rest-api.php
Normal file
98
includes/class-rest-api.php
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* REST API endpoints.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
use WP_Error;
|
||||||
|
use WP_REST_Request;
|
||||||
|
use WP_REST_Response;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Rest_API {
|
||||||
|
/**
|
||||||
|
* Register REST routes.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register() {
|
||||||
|
add_action( 'rest_api_init', array( $this, 'register_routes' ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register endpoint definitions.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register_routes() {
|
||||||
|
register_rest_route(
|
||||||
|
'map/v1',
|
||||||
|
'/track-play',
|
||||||
|
array(
|
||||||
|
'methods' => 'POST',
|
||||||
|
'callback' => array( $this, 'track_play' ),
|
||||||
|
'permission_callback' => '__return_true',
|
||||||
|
'args' => array(
|
||||||
|
'src' => array(
|
||||||
|
'type' => 'string',
|
||||||
|
'required' => true,
|
||||||
|
'sanitize_callback' => 'esc_url_raw',
|
||||||
|
),
|
||||||
|
'title' => array(
|
||||||
|
'type' => 'string',
|
||||||
|
'required' => false,
|
||||||
|
'sanitize_callback' => 'sanitize_text_field',
|
||||||
|
),
|
||||||
|
'hash' => array(
|
||||||
|
'type' => 'string',
|
||||||
|
'required' => true,
|
||||||
|
'sanitize_callback' => 'sanitize_text_field',
|
||||||
|
),
|
||||||
|
'nonce' => array(
|
||||||
|
'type' => 'string',
|
||||||
|
'required' => true,
|
||||||
|
'sanitize_callback' => 'sanitize_text_field',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Persist a play event.
|
||||||
|
*
|
||||||
|
* @param WP_REST_Request $request Request object.
|
||||||
|
* @return WP_REST_Response|WP_Error
|
||||||
|
*/
|
||||||
|
public function track_play( WP_REST_Request $request ) {
|
||||||
|
$src = (string) $request->get_param( 'src' );
|
||||||
|
$title = (string) $request->get_param( 'title' );
|
||||||
|
$hash = (string) $request->get_param( 'hash' );
|
||||||
|
$nonce = (string) $request->get_param( 'nonce' );
|
||||||
|
|
||||||
|
if ( empty( $src ) || empty( $hash ) || empty( $nonce ) ) {
|
||||||
|
return new WP_Error( 'map_invalid_request', __( 'Missing analytics parameters.', 'modern-audio-player' ), array( 'status' => 400 ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( Analytics::build_source_hash( $src ) !== $hash ) {
|
||||||
|
return new WP_Error( 'map_invalid_hash', __( 'Audio source validation failed.', 'modern-audio-player' ), array( 'status' => 400 ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! wp_verify_nonce( $nonce, 'map_track_play_' . $hash ) ) {
|
||||||
|
return new WP_Error( 'map_invalid_nonce', __( 'Analytics nonce validation failed.', 'modern-audio-player' ), array( 'status' => 403 ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
Analytics::record_play( $src, $title );
|
||||||
|
|
||||||
|
return new WP_REST_Response(
|
||||||
|
array(
|
||||||
|
'success' => true,
|
||||||
|
),
|
||||||
|
200
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
516
includes/class-settings.php
Normal file
516
includes/class-settings.php
Normal file
@ -0,0 +1,516 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Settings service.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Settings {
|
||||||
|
/**
|
||||||
|
* Get default option values.
|
||||||
|
*
|
||||||
|
* @return array<string, mixed>
|
||||||
|
*/
|
||||||
|
public static function defaults() {
|
||||||
|
$defaults = array(
|
||||||
|
'default_theme' => self::get_default_preset_slug(),
|
||||||
|
'enabled_themes' => array_keys( self::get_design_presets() ),
|
||||||
|
);
|
||||||
|
|
||||||
|
foreach ( self::get_design_field_keys() as $field_key ) {
|
||||||
|
$defaults[ $field_key ] = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return $defaults;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current settings merged with defaults.
|
||||||
|
*
|
||||||
|
* @return array<string, mixed>
|
||||||
|
*/
|
||||||
|
public static function get() {
|
||||||
|
$settings = get_option( MAP_OPTION_KEY, array() );
|
||||||
|
|
||||||
|
if ( ! is_array( $settings ) ) {
|
||||||
|
$settings = array();
|
||||||
|
}
|
||||||
|
|
||||||
|
$settings = self::migrate_legacy_settings( $settings );
|
||||||
|
|
||||||
|
return wp_parse_args( $settings, self::defaults() );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the centralized design settings schema.
|
||||||
|
*
|
||||||
|
* @return array<string, array<string, mixed>>
|
||||||
|
*/
|
||||||
|
public static function get_design_schema() {
|
||||||
|
return array(
|
||||||
|
'presets' => array(
|
||||||
|
'title' => __( 'Presets', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Choose the default player preset and which presets can be selected in blocks or shortcodes.', 'modern-audio-player' ),
|
||||||
|
'fields' => array(
|
||||||
|
'default_theme' => array(
|
||||||
|
'label' => __( 'Default preset', 'modern-audio-player' ),
|
||||||
|
'type' => 'select',
|
||||||
|
'description' => __( 'Used when a block or shortcode inherits the global design preset.', 'modern-audio-player' ),
|
||||||
|
'options' => self::get_preset_options(),
|
||||||
|
),
|
||||||
|
'enabled_themes' => array(
|
||||||
|
'label' => __( 'Available presets', 'modern-audio-player' ),
|
||||||
|
'type' => 'checkbox_group',
|
||||||
|
'description' => __( 'Controls which presets editors can choose per player instance.', 'modern-audio-player' ),
|
||||||
|
'options' => self::get_preset_options(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'colors' => array(
|
||||||
|
'title' => __( 'Colors', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Core palette tokens output to CSS variables for every rendered player.', 'modern-audio-player' ),
|
||||||
|
'fields' => array(
|
||||||
|
'player_background_color' => array(
|
||||||
|
'label' => __( 'Player background', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Primary background tone behind the player card.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_surface_color' => array(
|
||||||
|
'label' => __( 'Surface color', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Secondary surface used for cover wells and layered areas.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_text_color' => array(
|
||||||
|
'label' => __( 'Primary text', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Main title and control text color.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_muted_text_color' => array(
|
||||||
|
'label' => __( 'Muted text', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Secondary metadata and timer text color.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_accent_color' => array(
|
||||||
|
'label' => __( 'Accent color', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Highlights the preset label and interactive emphasis states.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_button_background_color' => array(
|
||||||
|
'label' => __( 'Button background', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Default play button fill color.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_button_text_color' => array(
|
||||||
|
'label' => __( 'Button text', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Play button text and icon color.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_progress_background_color' => array(
|
||||||
|
'label' => __( 'Progress background', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Unfilled progress track color.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_progress_fill_color' => array(
|
||||||
|
'label' => __( 'Progress fill', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Filled portion of the progress track.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_border_color' => array(
|
||||||
|
'label' => __( 'Border color', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Border used around the player shell and dividers.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
'player_shadow_color' => array(
|
||||||
|
'label' => __( 'Shadow color', 'modern-audio-player' ),
|
||||||
|
'type' => 'color',
|
||||||
|
'description' => __( 'Base color used for depth and glow effects.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'text' => array(
|
||||||
|
'title' => __( 'Text', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Typography defaults for every player instance.', 'modern-audio-player' ),
|
||||||
|
'fields' => array(
|
||||||
|
'player_font_size' => array(
|
||||||
|
'label' => __( 'Base font size', 'modern-audio-player' ),
|
||||||
|
'type' => 'range',
|
||||||
|
'description' => __( 'Applied as the root font size inside the player.', 'modern-audio-player' ),
|
||||||
|
'min' => 12,
|
||||||
|
'max' => 22,
|
||||||
|
'step' => 1,
|
||||||
|
'unit' => 'px',
|
||||||
|
),
|
||||||
|
'player_show_theme_label' => array(
|
||||||
|
'label' => __( 'Show preset label', 'modern-audio-player' ),
|
||||||
|
'type' => 'checkbox',
|
||||||
|
'description' => __( 'Displays the active preset label above the track title.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'layout' => array(
|
||||||
|
'title' => __( 'Layout', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Spacing and shape tokens for the global player layout.', 'modern-audio-player' ),
|
||||||
|
'fields' => array(
|
||||||
|
'player_border_radius' => array(
|
||||||
|
'label' => __( 'Border radius', 'modern-audio-player' ),
|
||||||
|
'type' => 'range',
|
||||||
|
'description' => __( 'Rounds the player card and cover image corners.', 'modern-audio-player' ),
|
||||||
|
'min' => 0,
|
||||||
|
'max' => 40,
|
||||||
|
'step' => 1,
|
||||||
|
'unit' => 'px',
|
||||||
|
),
|
||||||
|
'player_padding' => array(
|
||||||
|
'label' => __( 'Player padding', 'modern-audio-player' ),
|
||||||
|
'type' => 'range',
|
||||||
|
'description' => __( 'Controls the internal spacing of the player shell.', 'modern-audio-player' ),
|
||||||
|
'min' => 12,
|
||||||
|
'max' => 36,
|
||||||
|
'step' => 1,
|
||||||
|
'unit' => 'px',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'controls' => array(
|
||||||
|
'title' => __( 'Controls', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Display options for the shared player controls and media artwork.', 'modern-audio-player' ),
|
||||||
|
'fields' => array(
|
||||||
|
'player_show_cover_image' => array(
|
||||||
|
'label' => __( 'Show cover image', 'modern-audio-player' ),
|
||||||
|
'type' => 'checkbox',
|
||||||
|
'description' => __( 'Displays the cover image whenever the player has artwork.', 'modern-audio-player' ),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get preset tokens.
|
||||||
|
*
|
||||||
|
* @return array<string, array<string, mixed>>
|
||||||
|
*/
|
||||||
|
public static function get_design_presets() {
|
||||||
|
$presets = array(
|
||||||
|
'modern-dark' => array(
|
||||||
|
'label' => __( 'Modern Dark', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'High-contrast dark layout with bold controls.', 'modern-audio-player' ),
|
||||||
|
'tokens' => array(
|
||||||
|
'player_background_color' => '#0f172a',
|
||||||
|
'player_surface_color' => '#111827',
|
||||||
|
'player_text_color' => '#f9fafb',
|
||||||
|
'player_muted_text_color' => '#94a3b8',
|
||||||
|
'player_accent_color' => '#7dd3fc',
|
||||||
|
'player_button_background_color' => '#7dd3fc',
|
||||||
|
'player_button_text_color' => '#0f172a',
|
||||||
|
'player_progress_background_color' => '#334155',
|
||||||
|
'player_progress_fill_color' => '#7dd3fc',
|
||||||
|
'player_border_color' => '#1f2937',
|
||||||
|
'player_shadow_color' => '#0f172a',
|
||||||
|
'player_border_radius' => 18,
|
||||||
|
'player_padding' => 16,
|
||||||
|
'player_font_size' => 16,
|
||||||
|
'player_show_cover_image' => 1,
|
||||||
|
'player_show_theme_label' => 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'glassmorphism' => array(
|
||||||
|
'label' => __( 'Glassmorphism', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Translucent layered card with a soft backdrop effect.', 'modern-audio-player' ),
|
||||||
|
'tokens' => array(
|
||||||
|
'player_background_color' => '#1e293b',
|
||||||
|
'player_surface_color' => '#334155',
|
||||||
|
'player_text_color' => '#f8fafc',
|
||||||
|
'player_muted_text_color' => '#cbd5e1',
|
||||||
|
'player_accent_color' => '#93c5fd',
|
||||||
|
'player_button_background_color' => '#e2e8f0',
|
||||||
|
'player_button_text_color' => '#0f172a',
|
||||||
|
'player_progress_background_color' => '#64748b',
|
||||||
|
'player_progress_fill_color' => '#93c5fd',
|
||||||
|
'player_border_color' => '#94a3b8',
|
||||||
|
'player_shadow_color' => '#0f172a',
|
||||||
|
'player_border_radius' => 24,
|
||||||
|
'player_padding' => 18,
|
||||||
|
'player_font_size' => 16,
|
||||||
|
'player_show_cover_image' => 1,
|
||||||
|
'player_show_theme_label' => 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'podcast-style' => array(
|
||||||
|
'label' => __( 'Podcast Style', 'modern-audio-player' ),
|
||||||
|
'description' => __( 'Editorial player treatment for spoken-word content.', 'modern-audio-player' ),
|
||||||
|
'tokens' => array(
|
||||||
|
'player_background_color' => '#201533',
|
||||||
|
'player_surface_color' => '#0f172a',
|
||||||
|
'player_text_color' => '#fef3c7',
|
||||||
|
'player_muted_text_color' => '#cbd5e1',
|
||||||
|
'player_accent_color' => '#fdba74',
|
||||||
|
'player_button_background_color' => '#f97316',
|
||||||
|
'player_button_text_color' => '#fff7ed',
|
||||||
|
'player_progress_background_color' => '#334155',
|
||||||
|
'player_progress_fill_color' => '#f97316',
|
||||||
|
'player_border_color' => '#1d4ed8',
|
||||||
|
'player_shadow_color' => '#172554',
|
||||||
|
'player_border_radius' => 20,
|
||||||
|
'player_padding' => 20,
|
||||||
|
'player_font_size' => 17,
|
||||||
|
'player_show_cover_image' => 1,
|
||||||
|
'player_show_theme_label' => 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return apply_filters( 'map_theme_presets', $presets );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the default preset slug.
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public static function get_default_preset_slug() {
|
||||||
|
return 'modern-dark';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve effective design settings for a preset with saved overrides.
|
||||||
|
*
|
||||||
|
* @param string $preset_slug Preset slug.
|
||||||
|
* @param array<string, mixed> $settings Optional settings array.
|
||||||
|
* @return array<string, mixed>
|
||||||
|
*/
|
||||||
|
public static function get_resolved_design_settings( $preset_slug = '', $settings = array() ) {
|
||||||
|
if ( empty( $settings ) ) {
|
||||||
|
$settings = self::get();
|
||||||
|
}
|
||||||
|
|
||||||
|
$presets = self::get_design_presets();
|
||||||
|
$preset_slug = sanitize_key( $preset_slug ? $preset_slug : $settings['default_theme'] );
|
||||||
|
|
||||||
|
if ( ! isset( $presets[ $preset_slug ] ) ) {
|
||||||
|
$preset_slug = self::get_default_preset_slug();
|
||||||
|
}
|
||||||
|
|
||||||
|
$resolved = $presets[ $preset_slug ]['tokens'];
|
||||||
|
|
||||||
|
foreach ( self::get_design_field_keys() as $field_key ) {
|
||||||
|
if ( '' !== $settings[ $field_key ] && null !== $settings[ $field_key ] ) {
|
||||||
|
$resolved[ $field_key ] = $settings[ $field_key ];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$resolved['preset_slug'] = $preset_slug;
|
||||||
|
|
||||||
|
return $resolved;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build CSS variable declarations from resolved design settings.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $design_settings Resolved settings.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public static function build_design_css_variables( $design_settings ) {
|
||||||
|
$map = array(
|
||||||
|
'--velora-bg' => sanitize_hex_color( $design_settings['player_background_color'] ),
|
||||||
|
'--velora-surface' => sanitize_hex_color( $design_settings['player_surface_color'] ),
|
||||||
|
'--velora-text' => sanitize_hex_color( $design_settings['player_text_color'] ),
|
||||||
|
'--velora-muted' => sanitize_hex_color( $design_settings['player_muted_text_color'] ),
|
||||||
|
'--velora-accent' => sanitize_hex_color( $design_settings['player_accent_color'] ),
|
||||||
|
'--velora-button-bg' => sanitize_hex_color( $design_settings['player_button_background_color'] ),
|
||||||
|
'--velora-button-text' => sanitize_hex_color( $design_settings['player_button_text_color'] ),
|
||||||
|
'--velora-progress-bg' => sanitize_hex_color( $design_settings['player_progress_background_color'] ),
|
||||||
|
'--velora-progress-fill' => sanitize_hex_color( $design_settings['player_progress_fill_color'] ),
|
||||||
|
'--velora-border' => sanitize_hex_color( $design_settings['player_border_color'] ),
|
||||||
|
'--velora-shadow' => sanitize_hex_color( $design_settings['player_shadow_color'] ),
|
||||||
|
'--velora-radius' => absint( $design_settings['player_border_radius'] ) . 'px',
|
||||||
|
'--velora-padding' => absint( $design_settings['player_padding'] ) . 'px',
|
||||||
|
'--velora-font-size' => absint( $design_settings['player_font_size'] ) . 'px',
|
||||||
|
);
|
||||||
|
|
||||||
|
$styles = array();
|
||||||
|
|
||||||
|
foreach ( $map as $name => $value ) {
|
||||||
|
$styles[] = $name . ':' . $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return implode( ';', $styles );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update settings with sanitization.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $input Raw input.
|
||||||
|
* @return array<string, mixed>
|
||||||
|
*/
|
||||||
|
public static function sanitize( $input ) {
|
||||||
|
$defaults = self::defaults();
|
||||||
|
$presets = self::get_design_presets();
|
||||||
|
$themes = array_keys( $presets );
|
||||||
|
$output = $defaults;
|
||||||
|
|
||||||
|
$output['default_theme'] = in_array( $input['default_theme'] ?? '', $themes, true ) ? $input['default_theme'] : $defaults['default_theme'];
|
||||||
|
|
||||||
|
$output['enabled_themes'] = array_values(
|
||||||
|
array_intersect(
|
||||||
|
$themes,
|
||||||
|
array_map( 'sanitize_key', (array) ( $input['enabled_themes'] ?? $defaults['enabled_themes'] ) )
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( empty( $output['enabled_themes'] ) ) {
|
||||||
|
$output['enabled_themes'] = $defaults['enabled_themes'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! in_array( $output['default_theme'], $output['enabled_themes'], true ) ) {
|
||||||
|
$output['default_theme'] = $output['enabled_themes'][0];
|
||||||
|
}
|
||||||
|
|
||||||
|
$preset_tokens = $presets[ $output['default_theme'] ]['tokens'];
|
||||||
|
|
||||||
|
foreach ( self::get_design_field_definitions() as $field_key => $field ) {
|
||||||
|
$baseline = $preset_tokens[ $field_key ];
|
||||||
|
$sanitized = self::sanitize_field_value( $field_key, $field, $input, $baseline );
|
||||||
|
|
||||||
|
$output[ $field_key ] = self::values_match( $sanitized, $baseline, $field['type'] ) ? '' : $sanitized;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $output;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Install default settings if missing.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public static function maybe_install_defaults() {
|
||||||
|
if ( false === get_option( MAP_OPTION_KEY, false ) ) {
|
||||||
|
add_option( MAP_OPTION_KEY, self::defaults() );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the flat list of design field definitions.
|
||||||
|
*
|
||||||
|
* @return array<string, array<string, mixed>>
|
||||||
|
*/
|
||||||
|
public static function get_design_field_definitions() {
|
||||||
|
$fields = array();
|
||||||
|
|
||||||
|
foreach ( self::get_design_schema() as $section ) {
|
||||||
|
foreach ( $section['fields'] as $field_key => $field ) {
|
||||||
|
if ( 0 === strpos( $field_key, 'player_' ) ) {
|
||||||
|
$fields[ $field_key ] = $field;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $fields;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the list of design field keys.
|
||||||
|
*
|
||||||
|
* @return array<int, string>
|
||||||
|
*/
|
||||||
|
public static function get_design_field_keys() {
|
||||||
|
return array_keys( self::get_design_field_definitions() );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get select-ready preset options.
|
||||||
|
*
|
||||||
|
* @return array<string, string>
|
||||||
|
*/
|
||||||
|
private static function get_preset_options() {
|
||||||
|
$options = array();
|
||||||
|
|
||||||
|
foreach ( self::get_design_presets() as $slug => $preset ) {
|
||||||
|
$options[ $slug ] = $preset['label'];
|
||||||
|
}
|
||||||
|
|
||||||
|
return $options;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sanitize a field value.
|
||||||
|
*
|
||||||
|
* @param string $field_key Field key.
|
||||||
|
* @param array<string, mixed> $field Field config.
|
||||||
|
* @param array<string, mixed> $input Raw input.
|
||||||
|
* @param string|int $baseline Baseline preset value.
|
||||||
|
* @return string|int
|
||||||
|
*/
|
||||||
|
private static function sanitize_field_value( $field_key, $field, $input, $baseline ) {
|
||||||
|
switch ( $field['type'] ) {
|
||||||
|
case 'color':
|
||||||
|
return self::sanitize_color( $input[ $field_key ] ?? '', (string) $baseline );
|
||||||
|
|
||||||
|
case 'checkbox':
|
||||||
|
return empty( $input[ $field_key ] ) ? 0 : 1;
|
||||||
|
|
||||||
|
case 'range':
|
||||||
|
$min = isset( $field['min'] ) ? (int) $field['min'] : 0;
|
||||||
|
$max = isset( $field['max'] ) ? (int) $field['max'] : 999;
|
||||||
|
return max( $min, min( $max, absint( $input[ $field_key ] ?? 0 ) ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
return sanitize_text_field( (string) ( $input[ $field_key ] ?? '' ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether two values match for override storage.
|
||||||
|
*
|
||||||
|
* @param string|int $value Value.
|
||||||
|
* @param string|int $baseline Baseline value.
|
||||||
|
* @param string $type Field type.
|
||||||
|
* @return bool
|
||||||
|
*/
|
||||||
|
private static function values_match( $value, $baseline, $type ) {
|
||||||
|
if ( 'color' === $type ) {
|
||||||
|
return strtolower( (string) $value ) === strtolower( (string) $baseline );
|
||||||
|
}
|
||||||
|
|
||||||
|
return (string) $value === (string) $baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sanitize a hex color.
|
||||||
|
*
|
||||||
|
* @param string $color Input color.
|
||||||
|
* @param string $fallback Fallback color.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
private static function sanitize_color( $color, $fallback ) {
|
||||||
|
$sanitized = sanitize_hex_color( $color );
|
||||||
|
return $sanitized ? $sanitized : $fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Migrate legacy visual settings into the new design keys.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $settings Stored settings.
|
||||||
|
* @return array<string, mixed>
|
||||||
|
*/
|
||||||
|
private static function migrate_legacy_settings( $settings ) {
|
||||||
|
$legacy_map = array(
|
||||||
|
'accent_color' => 'player_accent_color',
|
||||||
|
'surface_color' => 'player_surface_color',
|
||||||
|
'text_color' => 'player_text_color',
|
||||||
|
'border_radius' => 'player_border_radius',
|
||||||
|
'show_cover_image' => 'player_show_cover_image',
|
||||||
|
);
|
||||||
|
|
||||||
|
foreach ( $legacy_map as $legacy_key => $new_key ) {
|
||||||
|
if ( ! isset( $settings[ $new_key ] ) && isset( $settings[ $legacy_key ] ) ) {
|
||||||
|
$settings[ $new_key ] = $settings[ $legacy_key ];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $settings;
|
||||||
|
}
|
||||||
|
}
|
||||||
98
includes/class-shortcode.php
Normal file
98
includes/class-shortcode.php
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Shortcode registration.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace ModernAudioPlayer;
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
class Shortcode {
|
||||||
|
/**
|
||||||
|
* Register shortcode hooks.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function register() {
|
||||||
|
add_shortcode( 'audio_player', array( $this, 'render' ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the shortcode.
|
||||||
|
*
|
||||||
|
* @param array<string, mixed> $atts Shortcode attributes.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public function render( $atts ) {
|
||||||
|
$atts = shortcode_atts(
|
||||||
|
array(
|
||||||
|
'src' => '',
|
||||||
|
'title' => '',
|
||||||
|
'image' => '',
|
||||||
|
'playlist' => '',
|
||||||
|
'theme' => '',
|
||||||
|
),
|
||||||
|
(array) $atts,
|
||||||
|
'audio_player'
|
||||||
|
);
|
||||||
|
|
||||||
|
$settings = Settings::get();
|
||||||
|
$attrs = array(
|
||||||
|
'src' => $atts['src'],
|
||||||
|
'title' => $atts['title'],
|
||||||
|
'image' => $atts['image'],
|
||||||
|
'playlist' => $this->parse_playlist_attribute( $atts['playlist'] ),
|
||||||
|
'theme' => $atts['theme'] ? $atts['theme'] : $settings['default_theme'],
|
||||||
|
'useGlobalTheme' => empty( $atts['theme'] ),
|
||||||
|
);
|
||||||
|
|
||||||
|
return Renderer::render_player( $attrs );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse playlist attribute into normalized track items.
|
||||||
|
*
|
||||||
|
* Supported formats:
|
||||||
|
* - JSON array of objects with src/title/image
|
||||||
|
* - Line-based entries: title|src|image
|
||||||
|
*
|
||||||
|
* @param string $playlist_raw Raw playlist value.
|
||||||
|
* @return array<int, array<string, string>>
|
||||||
|
*/
|
||||||
|
private function parse_playlist_attribute( $playlist_raw ) {
|
||||||
|
$playlist_raw = trim( html_entity_decode( (string) $playlist_raw, ENT_QUOTES, get_bloginfo( 'charset' ) ) );
|
||||||
|
|
||||||
|
if ( '' === $playlist_raw ) {
|
||||||
|
return array();
|
||||||
|
}
|
||||||
|
|
||||||
|
$decoded = json_decode( $playlist_raw, true );
|
||||||
|
|
||||||
|
if ( is_array( $decoded ) ) {
|
||||||
|
return $decoded;
|
||||||
|
}
|
||||||
|
|
||||||
|
$tracks = array();
|
||||||
|
$lines = preg_split( '/\r\n|\r|\n/', $playlist_raw );
|
||||||
|
|
||||||
|
foreach ( (array) $lines as $line ) {
|
||||||
|
$line = trim( (string) $line );
|
||||||
|
|
||||||
|
if ( '' === $line ) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$parts = array_map( 'trim', explode( '|', $line ) );
|
||||||
|
|
||||||
|
$tracks[] = array(
|
||||||
|
'title' => $parts[0] ?? '',
|
||||||
|
'src' => $parts[1] ?? '',
|
||||||
|
'image' => $parts[2] ?? '',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $tracks;
|
||||||
|
}
|
||||||
|
}
|
||||||
40
modern-audio-player.php
Normal file
40
modern-audio-player.php
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Plugin Name: Velora Player
|
||||||
|
* Plugin URI: https://example.com/modern-audio-player
|
||||||
|
* Description: Modern custom audio player with Gutenberg block, shortcode support, themes, and basic analytics.
|
||||||
|
* Version: 1.2.0
|
||||||
|
* Author: Codex
|
||||||
|
* Text Domain: modern-audio-player
|
||||||
|
* Domain Path: /languages
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit;
|
||||||
|
|
||||||
|
define( 'MAP_VERSION', '1.2.0' );
|
||||||
|
define( 'MAP_PLUGIN_FILE', __FILE__ );
|
||||||
|
define( 'MAP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
|
||||||
|
define( 'MAP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
|
||||||
|
define( 'MAP_OPTION_KEY', 'map_settings' );
|
||||||
|
|
||||||
|
require_once MAP_PLUGIN_DIR . 'includes/class-settings.php';
|
||||||
|
require_once MAP_PLUGIN_DIR . 'includes/class-analytics.php';
|
||||||
|
require_once MAP_PLUGIN_DIR . 'includes/class-renderer.php';
|
||||||
|
require_once MAP_PLUGIN_DIR . 'includes/class-shortcode.php';
|
||||||
|
require_once MAP_PLUGIN_DIR . 'includes/class-rest-api.php';
|
||||||
|
require_once MAP_PLUGIN_DIR . 'admin/class-admin.php';
|
||||||
|
require_once MAP_PLUGIN_DIR . 'includes/class-plugin.php';
|
||||||
|
|
||||||
|
register_activation_hook(
|
||||||
|
__FILE__,
|
||||||
|
array( '\ModernAudioPlayer\Plugin', 'activate' )
|
||||||
|
);
|
||||||
|
|
||||||
|
function map_boot_plugin() {
|
||||||
|
$plugin = new \ModernAudioPlayer\Plugin();
|
||||||
|
$plugin->init();
|
||||||
|
}
|
||||||
|
|
||||||
|
map_boot_plugin();
|
||||||
10
uninstall.php
Normal file
10
uninstall.php
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Uninstall handler.
|
||||||
|
*
|
||||||
|
* @package ModernAudioPlayer
|
||||||
|
*/
|
||||||
|
|
||||||
|
defined( 'WP_UNINSTALL_PLUGIN' ) || exit;
|
||||||
|
|
||||||
|
delete_option( 'map_settings' );
|
||||||
Loading…
Reference in New Issue
Block a user