FEATURE Adding audio player block with Plyr integration and necessary assets
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Antoine M
parent
5545258efa
commit
47ff454ff0
18
plugins/carhop-blocks/blocks/audio-player/.editorconfig
Normal file
18
plugins/carhop-blocks/blocks/audio-player/.editorconfig
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
plugins/carhop-blocks/blocks/audio-player/.gitignore
vendored
Normal file
30
plugins/carhop-blocks/blocks/audio-player/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
108
plugins/carhop-blocks/blocks/audio-player/audio-player.php
Normal file
108
plugins/carhop-blocks/blocks/audio-player/audio-player.php
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Plugin Name: Audio Player
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Version: 0.1.0
|
||||
* Requires at least: 6.7
|
||||
* Requires PHP: 7.4
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: audio-player
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
if (! defined('ABSPATH')) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
/**
|
||||
* Register Plyr library assets
|
||||
*/
|
||||
function create_block_audio_player_register_plyr()
|
||||
{
|
||||
// Register Plyr CSS
|
||||
wp_register_style(
|
||||
'plyr',
|
||||
plugins_url('node_modules/plyr/dist/plyr.css', __FILE__),
|
||||
array(),
|
||||
'3.8.3'
|
||||
);
|
||||
|
||||
// Register Plyr JS
|
||||
wp_register_script(
|
||||
'plyr',
|
||||
plugins_url('node_modules/plyr/dist/plyr.min.js', __FILE__),
|
||||
array(),
|
||||
'3.8.3',
|
||||
true
|
||||
);
|
||||
}
|
||||
add_action('init', 'create_block_audio_player_register_plyr');
|
||||
|
||||
/**
|
||||
* Enqueue Plyr in the block editor
|
||||
*/
|
||||
function create_block_audio_player_enqueue_editor_assets()
|
||||
{
|
||||
wp_enqueue_style('plyr');
|
||||
wp_enqueue_script('plyr');
|
||||
}
|
||||
add_action('enqueue_block_editor_assets', 'create_block_audio_player_enqueue_editor_assets');
|
||||
|
||||
/**
|
||||
* Enqueue Plyr assets when the block is used
|
||||
*/
|
||||
function create_block_audio_player_enqueue_assets($block_content, $block)
|
||||
{
|
||||
if ('carhop-blocks/audio-player' === $block['blockName']) {
|
||||
wp_enqueue_style('plyr');
|
||||
wp_enqueue_script('plyr');
|
||||
}
|
||||
return $block_content;
|
||||
}
|
||||
add_filter('render_block', 'create_block_audio_player_enqueue_assets', 10, 2);
|
||||
|
||||
/**
|
||||
* Registers the block using a `blocks-manifest.php` file, which improves the performance of block type registration.
|
||||
* Behind the scenes, it also registers all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/
|
||||
* @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/
|
||||
*/
|
||||
function create_block_audio_player_block_init()
|
||||
{
|
||||
/**
|
||||
* Registers the block(s) metadata from the `blocks-manifest.php` and registers the block type(s)
|
||||
* based on the registered block metadata.
|
||||
* Added in WordPress 6.8 to simplify the block metadata registration process added in WordPress 6.7.
|
||||
*
|
||||
* @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/
|
||||
*/
|
||||
if (function_exists('wp_register_block_types_from_metadata_collection')) {
|
||||
wp_register_block_types_from_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block(s) metadata from the `blocks-manifest.php` file.
|
||||
* Added to WordPress 6.7 to improve the performance of block type registration.
|
||||
*
|
||||
* @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/
|
||||
*/
|
||||
if (function_exists('wp_register_block_metadata_collection')) {
|
||||
wp_register_block_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
|
||||
}
|
||||
/**
|
||||
* Registers the block type(s) in the `blocks-manifest.php` file.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
|
||||
foreach (array_keys($manifest_data) as $block_type) {
|
||||
register_block_type(__DIR__ . "/build/{$block_type}");
|
||||
}
|
||||
}
|
||||
add_action('init', 'create_block_audio_player_block_init');
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "carhop-blocks/audio-player",
|
||||
"version": "0.1.0",
|
||||
"title": "Player audio",
|
||||
"category": "carhop-blocks",
|
||||
"icon": "format-audio",
|
||||
"description": "Lecteur audio pour la mise en forme d'éléments de contenu",
|
||||
"example": {},
|
||||
"attributes": {
|
||||
"audioUrl": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"audioId": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"default": "Titre du bloc"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"caption": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"keywords": [
|
||||
"audio",
|
||||
"player",
|
||||
"lecteur audio"
|
||||
],
|
||||
"textdomain": "carhop-blocks",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.93.2_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/audio-player/editor.scss ***!
|
||||
\**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* Styles for the block editor
|
||||
*/
|
||||
.wp-block-create-block-audio-player .audio-player-preview {
|
||||
padding: 16px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.wp-block-create-block-audio-player .audio-player-preview .plyr {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '6ac76ce8fc2124b02c68');
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.93.2_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/audio-player/editor.scss ***!
|
||||
\**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* Styles for the block editor
|
||||
*/
|
||||
.wp-block-create-block-audio-player .audio-player-preview {
|
||||
padding: 16px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.wp-block-create-block-audio-player .audio-player-preview .plyr {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"audio-player/index.css","mappings":";;;AAAA;;EAAA;AAIC;EACC;EACA;EACA;AAAF;AAGE;EACC;AADH,C","sources":["webpack://audio-player/./src/audio-player/editor.scss"],"sourcesContent":["/**\n * Styles for the block editor\n */\n.wp-block-create-block-audio-player {\n\t.audio-player-preview {\n\t\tpadding: 16px;\n\t\tbackground: #f0f0f0;\n\t\tborder-radius: 8px;\n\t\t\n\t\t// Ensure Plyr player has appropriate styling in the editor\n\t\t.plyr {\n\t\t\tmax-width: 100%;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,506 @@
|
|||
/******/ (() => { // webpackBootstrap
|
||||
/******/ "use strict";
|
||||
/******/ var __webpack_modules__ = ({
|
||||
|
||||
/***/ "./src/audio-player/block.json":
|
||||
/*!*************************************!*\
|
||||
!*** ./src/audio-player/block.json ***!
|
||||
\*************************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/audio-player","version":"0.1.0","title":"Player audio","category":"carhop-blocks","icon":"format-audio","description":"Lecteur audio pour la mise en forme d\'éléments de contenu","example":{},"attributes":{"audioUrl":{"type":"string","default":""},"audioId":{"type":"number","default":0},"title":{"type":"string","default":"Titre du bloc"},"description":{"type":"string","default":""},"caption":{"type":"string","default":""}},"supports":{"html":false},"keywords":["audio","player","lecteur audio"],"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js"}');
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/audio-player/edit.js":
|
||||
/*!**********************************!*\
|
||||
!*** ./src/audio-player/edit.js ***!
|
||||
\**********************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": () => (/* binding */ Edit)
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
|
||||
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
|
||||
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
|
||||
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
|
||||
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
|
||||
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_3__);
|
||||
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./editor.scss */ "./src/audio-player/editor.scss");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function Edit({
|
||||
attributes,
|
||||
setAttributes
|
||||
}) {
|
||||
const {
|
||||
audioUrl,
|
||||
audioId,
|
||||
title,
|
||||
description,
|
||||
caption
|
||||
} = attributes;
|
||||
const audioRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
|
||||
const plyrInstance = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
|
||||
const onSelectAudio = media => {
|
||||
setAttributes({
|
||||
audioUrl: media.url,
|
||||
audioId: media.id,
|
||||
// Récupérer les métadonnées depuis la médiathèque
|
||||
description: media.description || "",
|
||||
caption: media.caption || ""
|
||||
});
|
||||
};
|
||||
const onSelectURL = url => {
|
||||
setAttributes({
|
||||
audioUrl: url,
|
||||
audioId: 0
|
||||
});
|
||||
};
|
||||
const onRemoveAudio = () => {
|
||||
setAttributes({
|
||||
audioUrl: "",
|
||||
audioId: 0,
|
||||
description: "",
|
||||
caption: ""
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize Plyr in the editor
|
||||
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.useEffect)(() => {
|
||||
// Wait for Plyr to be loaded (via PHP)
|
||||
if (!audioUrl || !audioRef.current || typeof window.Plyr === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy previous instance if it exists
|
||||
if (plyrInstance.current) {
|
||||
plyrInstance.current.destroy();
|
||||
}
|
||||
|
||||
// Create new Plyr instance
|
||||
plyrInstance.current = new window.Plyr(audioRef.current, {
|
||||
controls: ["play-large", "play", "progress", "current-time", "mute", "volume", "settings"],
|
||||
settings: ["speed"],
|
||||
speed: {
|
||||
selected: 1,
|
||||
options: [0.5, 0.75, 1, 1.25, 1.5, 2]
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
if (plyrInstance.current) {
|
||||
plyrInstance.current.destroy();
|
||||
plyrInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [audioUrl]);
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
|
||||
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
|
||||
className: "audio-player"
|
||||
}),
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText, {
|
||||
className: "audio-player__title",
|
||||
value: title,
|
||||
onChange: value => setAttributes({
|
||||
title: value
|
||||
}),
|
||||
tagName: "h4"
|
||||
}), !audioUrl ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaPlaceholder, {
|
||||
icon: "format-audio",
|
||||
onSelect: onSelectAudio,
|
||||
onSelectURL: onSelectURL,
|
||||
accept: "audio/*",
|
||||
allowedTypes: ["audio"],
|
||||
labels: {
|
||||
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Fichier audio", "carhop-blocks"),
|
||||
instructions: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Téléchargez un fichier audio, sélectionnez-en un depuis la médiathèque ou insérez-en un depuis une URL.", "carhop-blocks")
|
||||
}
|
||||
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.BlockControls, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaReplaceFlow, {
|
||||
mediaId: audioId,
|
||||
mediaURL: audioUrl,
|
||||
allowedTypes: ["audio"],
|
||||
accept: "audio/*",
|
||||
onSelect: onSelectAudio
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ToolbarButton, {
|
||||
onClick: onRemoveAudio,
|
||||
children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Retirer", "carhop-blocks")
|
||||
})]
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
||||
className: "audio-player-preview",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("audio", {
|
||||
ref: audioRef,
|
||||
className: "js-plyr",
|
||||
src: audioUrl,
|
||||
preload: "metadata",
|
||||
children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Votre navigateur ne supporte pas l'élément audio.", "carhop-blocks")
|
||||
})
|
||||
})]
|
||||
}), (description || caption) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("p", {
|
||||
className: "audio-player__details",
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
|
||||
className: "audio-player__details__label",
|
||||
children: "Audio"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
|
||||
className: "audio-player__details__description",
|
||||
children: description || caption
|
||||
})]
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/audio-player/editor.scss":
|
||||
/*!**************************************!*\
|
||||
!*** ./src/audio-player/editor.scss ***!
|
||||
\**************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/audio-player/index.js":
|
||||
/*!***********************************!*\
|
||||
!*** ./src/audio-player/index.js ***!
|
||||
\***********************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
|
||||
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/audio-player/style.scss");
|
||||
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/audio-player/edit.js");
|
||||
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/audio-player/save.js");
|
||||
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/audio-player/block.json");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"],
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/audio-player/save.js":
|
||||
/*!**********************************!*\
|
||||
!*** ./src/audio-player/save.js ***!
|
||||
\**********************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": () => (/* binding */ save)
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
|
||||
|
||||
|
||||
|
||||
function save({
|
||||
attributes
|
||||
}) {
|
||||
const {
|
||||
audioUrl,
|
||||
title,
|
||||
description,
|
||||
caption
|
||||
} = attributes;
|
||||
if (!audioUrl) {
|
||||
return null;
|
||||
}
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
|
||||
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
|
||||
className: "audio-player"
|
||||
}),
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.RichText.Content, {
|
||||
value: title,
|
||||
className: "audio-player__title",
|
||||
tagName: "h4"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("audio", {
|
||||
className: "js-plyr",
|
||||
src: audioUrl,
|
||||
preload: "metadata",
|
||||
children: "Votre navigateur ne supporte pas l'\xE9l\xE9ment audio."
|
||||
}), (description || caption) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("p", {
|
||||
className: "audio-player__details",
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span", {
|
||||
className: "audio-player__details__label",
|
||||
children: "Audio"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span", {
|
||||
className: "audio-player__details__description",
|
||||
children: description || caption
|
||||
})]
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/audio-player/style.scss":
|
||||
/*!*************************************!*\
|
||||
!*** ./src/audio-player/style.scss ***!
|
||||
\*************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "@wordpress/block-editor":
|
||||
/*!*************************************!*\
|
||||
!*** external ["wp","blockEditor"] ***!
|
||||
\*************************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["wp"]["blockEditor"];
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "@wordpress/blocks":
|
||||
/*!********************************!*\
|
||||
!*** external ["wp","blocks"] ***!
|
||||
\********************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["wp"]["blocks"];
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "@wordpress/components":
|
||||
/*!************************************!*\
|
||||
!*** external ["wp","components"] ***!
|
||||
\************************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["wp"]["components"];
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "@wordpress/element":
|
||||
/*!*********************************!*\
|
||||
!*** external ["wp","element"] ***!
|
||||
\*********************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["wp"]["element"];
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "@wordpress/i18n":
|
||||
/*!******************************!*\
|
||||
!*** external ["wp","i18n"] ***!
|
||||
\******************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["wp"]["i18n"];
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "react/jsx-runtime":
|
||||
/*!**********************************!*\
|
||||
!*** external "ReactJSXRuntime" ***!
|
||||
\**********************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["ReactJSXRuntime"];
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
/************************************************************************/
|
||||
/******/ // The module cache
|
||||
/******/ var __webpack_module_cache__ = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/ // Check if module is in cache
|
||||
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
||||
/******/ if (cachedModule !== undefined) {
|
||||
/******/ return cachedModule.exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = __webpack_module_cache__[moduleId] = {
|
||||
/******/ // no module.id needed
|
||||
/******/ // no module.loaded needed
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = __webpack_modules__;
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ /* webpack/runtime/chunk loaded */
|
||||
/******/ (() => {
|
||||
/******/ var deferred = [];
|
||||
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
||||
/******/ if(chunkIds) {
|
||||
/******/ priority = priority || 0;
|
||||
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
||||
/******/ deferred[i] = [chunkIds, fn, priority];
|
||||
/******/ return;
|
||||
/******/ }
|
||||
/******/ var notFulfilled = Infinity;
|
||||
/******/ for (var i = 0; i < deferred.length; i++) {
|
||||
/******/ var [chunkIds, fn, priority] = deferred[i];
|
||||
/******/ var fulfilled = true;
|
||||
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
||||
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
||||
/******/ chunkIds.splice(j--, 1);
|
||||
/******/ } else {
|
||||
/******/ fulfilled = false;
|
||||
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(fulfilled) {
|
||||
/******/ deferred.splice(i--, 1)
|
||||
/******/ var r = fn();
|
||||
/******/ if (r !== undefined) result = r;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/compat get default export */
|
||||
/******/ (() => {
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = (module) => {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ () => (module['default']) :
|
||||
/******/ () => (module);
|
||||
/******/ __webpack_require__.d(getter, { a: getter });
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/define property getters */
|
||||
/******/ (() => {
|
||||
/******/ // define getter functions for harmony exports
|
||||
/******/ __webpack_require__.d = (exports, definition) => {
|
||||
/******/ for(var key in definition) {
|
||||
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
||||
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||
/******/ (() => {
|
||||
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/make namespace object */
|
||||
/******/ (() => {
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = (exports) => {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/jsonp chunk loading */
|
||||
/******/ (() => {
|
||||
/******/ // no baseURI
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
||||
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
||||
/******/ var installedChunks = {
|
||||
/******/ "audio-player/index": 0,
|
||||
/******/ "audio-player/style-index": 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // no chunk on demand loading
|
||||
/******/
|
||||
/******/ // no prefetching
|
||||
/******/
|
||||
/******/ // no preloaded
|
||||
/******/
|
||||
/******/ // no HMR
|
||||
/******/
|
||||
/******/ // no HMR manifest
|
||||
/******/
|
||||
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
||||
/******/
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
||||
/******/ var [chunkIds, moreModules, runtime] = data;
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0;
|
||||
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
||||
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(runtime) var result = runtime(__webpack_require__);
|
||||
/******/ }
|
||||
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
||||
/******/ installedChunks[chunkId][0]();
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ return __webpack_require__.O(result);
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ var chunkLoadingGlobal = globalThis["webpackChunkaudio_player"] = globalThis["webpackChunkaudio_player"] || [];
|
||||
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
||||
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
||||
/******/ })();
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/
|
||||
/******/ // startup
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
||||
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["audio-player/style-index"], () => (__webpack_require__("./src/audio-player/index.js")))
|
||||
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
||||
/******/
|
||||
/******/ })()
|
||||
;
|
||||
//# sourceMappingURL=index.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,42 @@
|
|||
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.93.2_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/audio-player/style.scss ***!
|
||||
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* Styles for Plyr audio player block
|
||||
* These styles are applied both in the editor and on the front-end
|
||||
*/
|
||||
.wp-block-carhop-blocks-audio-player .plyr__controls {
|
||||
padding: 2rem 0 !important;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player {
|
||||
--plyr-color-main: var(--wp--preset--color--primary);
|
||||
--plyr-menu-border-color: var(--wp--preset--color--carhop-green);
|
||||
--plyr-menu-border-shadow-color: var(--wp--preset--color--carhop-green);
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-audio-control-color: var(--wp--preset--color--primary);
|
||||
--plyr-audio-range-track-background: var(
|
||||
--wp--preset--color--carhop-green--200
|
||||
);
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
padding: 2rem;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player button[data-plyr=play],
|
||||
.wp-block-carhop-blocks-audio-player button[data-plyr=mute] {
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
padding: 2rem;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player button[data-plyr=mute] {
|
||||
padding: 1rem;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player .audio-player__title {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--wp--preset--color--primary);
|
||||
margin: 0;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player .audio-player__details__label {
|
||||
margin-left: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.93.2_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/audio-player/style.scss ***!
|
||||
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* Styles for Plyr audio player block
|
||||
* These styles are applied both in the editor and on the front-end
|
||||
*/
|
||||
.wp-block-carhop-blocks-audio-player .plyr__controls {
|
||||
padding: 2rem 0 !important;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player {
|
||||
--plyr-color-main: var(--wp--preset--color--primary);
|
||||
--plyr-menu-border-color: var(--wp--preset--color--carhop-green);
|
||||
--plyr-menu-border-shadow-color: var(--wp--preset--color--carhop-green);
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-audio-control-color: var(--wp--preset--color--primary);
|
||||
--plyr-audio-range-track-background: var(
|
||||
--wp--preset--color--carhop-green--200
|
||||
);
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
padding: 2rem;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player button[data-plyr=play],
|
||||
.wp-block-carhop-blocks-audio-player button[data-plyr=mute] {
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
padding: 2rem;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player button[data-plyr=mute] {
|
||||
padding: 1rem;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player .audio-player__title {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--wp--preset--color--primary);
|
||||
margin: 0;
|
||||
}
|
||||
.wp-block-carhop-blocks-audio-player .audio-player__details__label {
|
||||
margin-right: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style-index.css.map*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"audio-player/style-index.css","mappings":";;;AAAA;;;EAAA;AAMC;EACC;AADF;AADA;EAIC;EACA;EACA;EAGA;EACA;EAGA;;GAAA;EAGA;EACA;AAJD;AAMC;;EAEC;EACA;EACA;AAJF;AAOC;EACC;AALF;AAQC;EACC;EACA;EACA;EACA;EACA;AANF;AAUE;EACC;EACA;AARH,C","sources":["webpack://audio-player/./src/audio-player/style.scss"],"sourcesContent":["/**\n * Styles for Plyr audio player block\n * These styles are applied both in the editor and on the front-end\n */\n\n.wp-block-carhop-blocks-audio-player {\n\t.plyr__controls {\n\t\tpadding: 2rem 0 !important;\n\t}\n\t--plyr-color-main: var(--wp--preset--color--primary);\n\t--plyr-menu-border-color: var(--wp--preset--color--carhop-green);\n\t--plyr-menu-border-shadow-color: var(--wp--preset--color--carhop-green);\n\t// --plyr-control-radius: 50%;\n\n\t--plyr-control-icon-size: 20px;\n\t--plyr-audio-control-color: var(--wp--preset--color--primary);\n\t// Utiliser la couleur directement depuis tailwind.config.js ligne 32\n\t// --plyr-audio-range-track-background: #9df2de;\n\t--plyr-audio-range-track-background: var(\n\t\t--wp--preset--color--carhop-green--200\n\t);\n\tborder: 1px solid var(--wp--preset--color--primary);\n\tpadding: 2rem;\n\n\tbutton[data-plyr=\"play\"],\n\tbutton[data-plyr=\"mute\"] {\n\t\tborder-radius: 50%;\n\t\tborder: 1px solid var(--wp--preset--color--primary);\n\t\tpadding: 2rem;\n\t}\n\n\tbutton[data-plyr=\"mute\"] {\n\t\tpadding: 1rem;\n\t}\n\n\t.audio-player__title {\n\t\ttext-transform: uppercase;\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 600;\n\t\tcolor: var(--wp--preset--color--primary);\n\t\tmargin: 0;\n\t}\n\n\t.audio-player__details {\n\t\t&__label {\n\t\t\tmargin-right: 0.5rem;\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t}\n\n\t// Plyr container styles\n\t// .plyr {\n\t// \tborder-radius: 8px;\n\t// }\n\n\t// // Customize Plyr colors if needed\n\t// .plyr--audio .plyr__control.plyr__tab-focus,\n\t// .plyr--audio .plyr__control:hover,\n\t// .plyr--audio .plyr__control[aria-expanded=\"true\"] {\n\t// \tbackground: #21759b;\n\t// }\n\n\t// .plyr__control--overlaid {\n\t// \tbackground: rgba(33, 117, 155, 0.8);\n\t// }\n}\n\n// .plyr--full-ui input[type=\"range\"] {\n// \tcolor: red;\n// }\n\n// .plyr__control--overlaid {\n// \tbackground: rgba(red, 0.8);\n// }\n\n// .plyr--video .plyr__control.plyr__tab-focus,\n// .plyr--video .plyr__control:hover,\n// .plyr--video .plyr__control[aria-expanded=\"true\"] {\n// \tbackground: red;\n// }\n\n// .plyr__control.plyr__tab-focus {\n// \tbox-shadow: 0 0 0 5px rgba(red, 0.5);\n// }\n\n// .plyr__menu__container\n// \t.plyr__control[role=\"menuitemradio\"][aria-checked=\"true\"]::before {\n// \tbackground: red;\n// }\n"],"names":[],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '310e5a9c86a8da715108');
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/******/ (() => { // webpackBootstrap
|
||||
/*!**********************************!*\
|
||||
!*** ./src/audio-player/view.js ***!
|
||||
\**********************************/
|
||||
/**
|
||||
* Initializes Plyr audio player on the front-end
|
||||
* Note: Plyr is loaded as a dependency via PHP (see audio-player.php)
|
||||
*/
|
||||
|
||||
// Initialize Plyr on all audio elements with the js-plyr class
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Check if Plyr is available (loaded via PHP)
|
||||
if (typeof Plyr === "undefined") {
|
||||
/* eslint-disable no-console */
|
||||
console.error("Plyr library not loaded");
|
||||
/* eslint-enable no-console */
|
||||
return;
|
||||
}
|
||||
const players = Array.from(document.querySelectorAll(".js-plyr")).map(element => new Plyr(element, {
|
||||
controls: ["play-large", "play", "progress", "duration", "current-time", "mute", "volume", "settings"],
|
||||
settings: ["speed"],
|
||||
speed: {
|
||||
selected: 1,
|
||||
options: [0.5, 0.75, 1, 1.25, 1.5, 2]
|
||||
}
|
||||
}));
|
||||
|
||||
// Optional: Log players for debugging
|
||||
if (players.length > 0) {
|
||||
/* eslint-disable no-console */
|
||||
console.log("Plyr audio players initialized:", players.length);
|
||||
/* eslint-enable no-console */
|
||||
}
|
||||
});
|
||||
/******/ })()
|
||||
;
|
||||
//# sourceMappingURL=view.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"audio-player/view.js","mappings":";;;;AAAA;AACA;AACA;AACA;;AAEA;AACAA,QAAQ,CAACC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM;EACnD;EACA,IAAI,OAAOC,IAAI,KAAK,WAAW,EAAE;IAChC;IACAC,OAAO,CAACC,KAAK,CAAC,yBAAyB,CAAC;IACxC;IACA;EACD;EAEA,MAAMC,OAAO,GAAGC,KAAK,CAACC,IAAI,CAACP,QAAQ,CAACQ,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAACC,GAAG,CACnEC,OAAO,IACP,IAAIR,IAAI,CAACQ,OAAO,EAAE;IACjBC,QAAQ,EAAE,CACT,YAAY,EACZ,MAAM,EACN,UAAU,EACV,UAAU,EACV,cAAc,EACd,MAAM,EACN,QAAQ,EACR,UAAU,CACV;IACDC,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnBC,KAAK,EAAE;MAAEC,QAAQ,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;IAAE;EAC7D,CAAC,CACH,CAAC;;EAED;EACA,IAAIV,OAAO,CAACW,MAAM,GAAG,CAAC,EAAE;IACvB;IACAb,OAAO,CAACc,GAAG,CAAC,iCAAiC,EAAEZ,OAAO,CAACW,MAAM,CAAC;IAC9D;EACD;AACD,CAAC,CAAC,C","sources":["webpack://audio-player/./src/audio-player/view.js"],"sourcesContent":["/**\n * Initializes Plyr audio player on the front-end\n * Note: Plyr is loaded as a dependency via PHP (see audio-player.php)\n */\n\n// Initialize Plyr on all audio elements with the js-plyr class\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\t// Check if Plyr is available (loaded via PHP)\n\tif (typeof Plyr === \"undefined\") {\n\t\t/* eslint-disable no-console */\n\t\tconsole.error(\"Plyr library not loaded\");\n\t\t/* eslint-enable no-console */\n\t\treturn;\n\t}\n\n\tconst players = Array.from(document.querySelectorAll(\".js-plyr\")).map(\n\t\t(element) =>\n\t\t\tnew Plyr(element, {\n\t\t\t\tcontrols: [\n\t\t\t\t\t\"play-large\",\n\t\t\t\t\t\"play\",\n\t\t\t\t\t\"progress\",\n\t\t\t\t\t\"duration\",\n\t\t\t\t\t\"current-time\",\n\t\t\t\t\t\"mute\",\n\t\t\t\t\t\"volume\",\n\t\t\t\t\t\"settings\",\n\t\t\t\t],\n\t\t\t\tsettings: [\"speed\"],\n\t\t\t\tspeed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] },\n\t\t\t})\n\t);\n\n\t// Optional: Log players for debugging\n\tif (players.length > 0) {\n\t\t/* eslint-disable no-console */\n\t\tconsole.log(\"Plyr audio players initialized:\", players.length);\n\t\t/* eslint-enable no-console */\n\t}\n});\n"],"names":["document","addEventListener","Plyr","console","error","players","Array","from","querySelectorAll","map","element","controls","settings","speed","selected","options","length","log"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<?php
|
||||
// This file is generated. Do not modify it manually.
|
||||
return array(
|
||||
'audio-player' => array(
|
||||
'$schema' => 'https://schemas.wp.org/trunk/block.json',
|
||||
'apiVersion' => 3,
|
||||
'name' => 'carhop-blocks/audio-player',
|
||||
'version' => '0.1.0',
|
||||
'title' => 'Player audio',
|
||||
'category' => 'carhop-blocks',
|
||||
'icon' => 'format-audio',
|
||||
'description' => 'Lecteur audio pour la mise en forme d\'éléments de contenu',
|
||||
'example' => array(
|
||||
|
||||
),
|
||||
'attributes' => array(
|
||||
'audioUrl' => array(
|
||||
'type' => 'string',
|
||||
'default' => ''
|
||||
),
|
||||
'audioId' => array(
|
||||
'type' => 'number',
|
||||
'default' => 0
|
||||
),
|
||||
'title' => array(
|
||||
'type' => 'string',
|
||||
'default' => 'Titre du bloc'
|
||||
),
|
||||
'description' => array(
|
||||
'type' => 'string',
|
||||
'default' => ''
|
||||
),
|
||||
'caption' => array(
|
||||
'type' => 'string',
|
||||
'default' => ''
|
||||
)
|
||||
),
|
||||
'supports' => array(
|
||||
'html' => false
|
||||
),
|
||||
'keywords' => array(
|
||||
'audio',
|
||||
'player',
|
||||
'lecteur audio'
|
||||
),
|
||||
'textdomain' => 'carhop-blocks',
|
||||
'editorScript' => 'file:./index.js',
|
||||
'editorStyle' => 'file:./index.css',
|
||||
'style' => 'file:./style-index.css',
|
||||
'viewScript' => 'file:./view.js'
|
||||
)
|
||||
);
|
||||
24
plugins/carhop-blocks/blocks/audio-player/package.json
Normal file
24
plugins/carhop-blocks/blocks/audio-player/package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "audio-player",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build --blocks-manifest",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start --blocks-manifest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.26.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd",
|
||||
"dependencies": {
|
||||
"plyr": "^3.8.3"
|
||||
}
|
||||
}
|
||||
13511
plugins/carhop-blocks/blocks/audio-player/pnpm-lock.yaml
Normal file
13511
plugins/carhop-blocks/blocks/audio-player/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
55
plugins/carhop-blocks/blocks/audio-player/readme.txt
Normal file
55
plugins/carhop-blocks/blocks/audio-player/readme.txt
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
=== Audio Player ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.7
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/audio-player` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "carhop-blocks/audio-player",
|
||||
"version": "0.1.0",
|
||||
"title": "Player audio",
|
||||
"category": "carhop-blocks",
|
||||
"icon": "format-audio",
|
||||
"description": "Lecteur audio pour la mise en forme d'éléments de contenu",
|
||||
"example": {},
|
||||
"attributes": {
|
||||
"audioUrl": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"audioId": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"default": "Titre du bloc"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"caption": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"keywords": [
|
||||
"audio",
|
||||
"player",
|
||||
"lecteur audio"
|
||||
],
|
||||
"textdomain": "carhop-blocks",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
import { __ } from "@wordpress/i18n";
|
||||
import {
|
||||
useBlockProps,
|
||||
MediaPlaceholder,
|
||||
BlockControls,
|
||||
MediaReplaceFlow,
|
||||
} from "@wordpress/block-editor";
|
||||
import { ToolbarButton } from "@wordpress/components";
|
||||
import { useEffect, useRef } from "@wordpress/element";
|
||||
import "./editor.scss";
|
||||
import { RichText } from "@wordpress/block-editor";
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const { audioUrl, audioId, title, description, caption } = attributes;
|
||||
const audioRef = useRef(null);
|
||||
const plyrInstance = useRef(null);
|
||||
|
||||
const onSelectAudio = (media) => {
|
||||
setAttributes({
|
||||
audioUrl: media.url,
|
||||
audioId: media.id,
|
||||
// Récupérer les métadonnées depuis la médiathèque
|
||||
description: media.description || "",
|
||||
caption: media.caption || "",
|
||||
});
|
||||
};
|
||||
|
||||
const onSelectURL = (url) => {
|
||||
setAttributes({
|
||||
audioUrl: url,
|
||||
audioId: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const onRemoveAudio = () => {
|
||||
setAttributes({
|
||||
audioUrl: "",
|
||||
audioId: 0,
|
||||
description: "",
|
||||
caption: "",
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize Plyr in the editor
|
||||
useEffect(() => {
|
||||
// Wait for Plyr to be loaded (via PHP)
|
||||
if (!audioUrl || !audioRef.current || typeof window.Plyr === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy previous instance if it exists
|
||||
if (plyrInstance.current) {
|
||||
plyrInstance.current.destroy();
|
||||
}
|
||||
|
||||
// Create new Plyr instance
|
||||
plyrInstance.current = new window.Plyr(audioRef.current, {
|
||||
controls: [
|
||||
"play-large",
|
||||
"play",
|
||||
"progress",
|
||||
"current-time",
|
||||
"mute",
|
||||
"volume",
|
||||
"settings",
|
||||
],
|
||||
settings: ["speed"],
|
||||
speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] },
|
||||
});
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
if (plyrInstance.current) {
|
||||
plyrInstance.current.destroy();
|
||||
plyrInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [audioUrl]);
|
||||
|
||||
return (
|
||||
<div {...useBlockProps({ className: "audio-player" })}>
|
||||
<RichText
|
||||
className="audio-player__title"
|
||||
value={title}
|
||||
onChange={(value) => setAttributes({ title: value })}
|
||||
tagName="h4"
|
||||
/>
|
||||
{!audioUrl ? (
|
||||
<MediaPlaceholder
|
||||
icon="format-audio"
|
||||
onSelect={onSelectAudio}
|
||||
onSelectURL={onSelectURL}
|
||||
accept="audio/*"
|
||||
allowedTypes={["audio"]}
|
||||
labels={{
|
||||
title: __("Fichier audio", "carhop-blocks"),
|
||||
instructions: __(
|
||||
"Téléchargez un fichier audio, sélectionnez-en un depuis la médiathèque ou insérez-en un depuis une URL.",
|
||||
"carhop-blocks"
|
||||
),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<BlockControls>
|
||||
<MediaReplaceFlow
|
||||
mediaId={audioId}
|
||||
mediaURL={audioUrl}
|
||||
allowedTypes={["audio"]}
|
||||
accept="audio/*"
|
||||
onSelect={onSelectAudio}
|
||||
/>
|
||||
<ToolbarButton onClick={onRemoveAudio}>
|
||||
{__("Retirer", "carhop-blocks")}
|
||||
</ToolbarButton>
|
||||
</BlockControls>
|
||||
<div className="audio-player-preview">
|
||||
<audio
|
||||
ref={audioRef}
|
||||
className="js-plyr"
|
||||
src={audioUrl}
|
||||
preload="metadata"
|
||||
>
|
||||
{__(
|
||||
"Votre navigateur ne supporte pas l'élément audio.",
|
||||
"carhop-blocks"
|
||||
)}
|
||||
</audio>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{(description || caption) && (
|
||||
<p className="audio-player__details">
|
||||
<span className="audio-player__details__label">Audio</span>
|
||||
<span className="audio-player__details__description">
|
||||
{description || caption}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
* Styles for the block editor
|
||||
*/
|
||||
.wp-block-create-block-audio-player {
|
||||
.audio-player-preview {
|
||||
padding: 16px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
|
||||
// Ensure Plyr player has appropriate styling in the editor
|
||||
.plyr {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { registerBlockType } from "@wordpress/blocks";
|
||||
|
||||
import "./style.scss";
|
||||
|
||||
import Edit from "./edit";
|
||||
import save from "./save";
|
||||
import metadata from "./block.json";
|
||||
|
||||
registerBlockType(metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { useBlockProps } from "@wordpress/block-editor";
|
||||
import { RichText } from "@wordpress/block-editor";
|
||||
|
||||
export default function save({ attributes }) {
|
||||
const { audioUrl, title, description, caption } = attributes;
|
||||
|
||||
if (!audioUrl) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div {...useBlockProps.save({ className: "audio-player" })}>
|
||||
<RichText.Content value={title} className="audio-player__title" tagName="h4" />
|
||||
<audio className="js-plyr" src={audioUrl} preload="metadata">
|
||||
Votre navigateur ne supporte pas l'élément audio.
|
||||
</audio>
|
||||
|
||||
{(description || caption) && (
|
||||
<p className="audio-player__details">
|
||||
<span className="audio-player__details__label">Audio</span>
|
||||
<span className="audio-player__details__description">
|
||||
{description || caption}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* Styles for Plyr audio player block
|
||||
* These styles are applied both in the editor and on the front-end
|
||||
*/
|
||||
|
||||
.wp-block-carhop-blocks-audio-player {
|
||||
.plyr__controls {
|
||||
padding: 2rem 0 !important;
|
||||
}
|
||||
--plyr-color-main: var(--wp--preset--color--primary);
|
||||
--plyr-menu-border-color: var(--wp--preset--color--carhop-green);
|
||||
--plyr-menu-border-shadow-color: var(--wp--preset--color--carhop-green);
|
||||
// --plyr-control-radius: 50%;
|
||||
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-audio-control-color: var(--wp--preset--color--primary);
|
||||
// Utiliser la couleur directement depuis tailwind.config.js ligne 32
|
||||
// --plyr-audio-range-track-background: #9df2de;
|
||||
--plyr-audio-range-track-background: var(
|
||||
--wp--preset--color--carhop-green--200
|
||||
);
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
padding: 2rem;
|
||||
|
||||
button[data-plyr="play"],
|
||||
button[data-plyr="mute"] {
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
button[data-plyr="mute"] {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.audio-player__title {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--wp--preset--color--primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.audio-player__details {
|
||||
&__label {
|
||||
margin-right: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// Plyr container styles
|
||||
// .plyr {
|
||||
// border-radius: 8px;
|
||||
// }
|
||||
|
||||
// // Customize Plyr colors if needed
|
||||
// .plyr--audio .plyr__control.plyr__tab-focus,
|
||||
// .plyr--audio .plyr__control:hover,
|
||||
// .plyr--audio .plyr__control[aria-expanded="true"] {
|
||||
// background: #21759b;
|
||||
// }
|
||||
|
||||
// .plyr__control--overlaid {
|
||||
// background: rgba(33, 117, 155, 0.8);
|
||||
// }
|
||||
}
|
||||
|
||||
// .plyr--full-ui input[type="range"] {
|
||||
// color: red;
|
||||
// }
|
||||
|
||||
// .plyr__control--overlaid {
|
||||
// background: rgba(red, 0.8);
|
||||
// }
|
||||
|
||||
// .plyr--video .plyr__control.plyr__tab-focus,
|
||||
// .plyr--video .plyr__control:hover,
|
||||
// .plyr--video .plyr__control[aria-expanded="true"] {
|
||||
// background: red;
|
||||
// }
|
||||
|
||||
// .plyr__control.plyr__tab-focus {
|
||||
// box-shadow: 0 0 0 5px rgba(red, 0.5);
|
||||
// }
|
||||
|
||||
// .plyr__menu__container
|
||||
// .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
|
||||
// background: red;
|
||||
// }
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* Initializes Plyr audio player on the front-end
|
||||
* Note: Plyr is loaded as a dependency via PHP (see audio-player.php)
|
||||
*/
|
||||
|
||||
// Initialize Plyr on all audio elements with the js-plyr class
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Check if Plyr is available (loaded via PHP)
|
||||
if (typeof Plyr === "undefined") {
|
||||
/* eslint-disable no-console */
|
||||
console.error("Plyr library not loaded");
|
||||
/* eslint-enable no-console */
|
||||
return;
|
||||
}
|
||||
|
||||
const players = Array.from(document.querySelectorAll(".js-plyr")).map(
|
||||
(element) =>
|
||||
new Plyr(element, {
|
||||
controls: [
|
||||
"play-large",
|
||||
"play",
|
||||
"progress",
|
||||
"duration",
|
||||
"current-time",
|
||||
"mute",
|
||||
"volume",
|
||||
"settings",
|
||||
],
|
||||
settings: ["speed"],
|
||||
speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] },
|
||||
})
|
||||
);
|
||||
|
||||
// Optional: Log players for debugging
|
||||
if (players.length > 0) {
|
||||
/* eslint-disable no-console */
|
||||
console.log("Plyr audio players initialized:", players.length);
|
||||
/* eslint-enable no-console */
|
||||
}
|
||||
});
|
||||
|
|
@ -79,3 +79,4 @@ require_once __DIR__ . '/blocks/localisation-map/localisation-map.php';
|
|||
require_once __DIR__ . '/blocks/decouvrez-prochainement/decouvrez-prochainement.php';
|
||||
// require_once __DIR__ . '/blocks/cta-group/cta-group.php';
|
||||
require_once __DIR__ . '/blocks/chapo/chapo.php';
|
||||
require_once __DIR__ . '/blocks/audio-player/audio-player.php';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user