Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Adding audio player block with Plyr integration and necessary assets
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-10-29 17:14:36 +01:00
parent 5545258efa
commit 47ff454ff0
28 changed files with 14888 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/carhop-blocks/blocks/audio-player/.editorconfig Normal file
View 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
View 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
View 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');

46
plugins/carhop-blocks/blocks/audio-player/build/audio-player/block.json Normal file
View File

@ -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"
}

14
plugins/carhop-blocks/blocks/audio-player/build/audio-player/index-rtl.css Normal file
View File

@ -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%;
}

1
plugins/carhop-blocks/blocks/audio-player/build/audio-player/index.asset.php Normal file
View File

@ -0,0 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '6ac76ce8fc2124b02c68');

16
plugins/carhop-blocks/blocks/audio-player/build/audio-player/index.css Normal file
View File

@ -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*/

1
plugins/carhop-blocks/blocks/audio-player/build/audio-player/index.css.map Normal file
View File

@ -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":""}

506
plugins/carhop-blocks/blocks/audio-player/build/audio-player/index.js Normal file
View File

@ -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

1
plugins/carhop-blocks/blocks/audio-player/build/audio-player/index.js.map Normal file
View File

File diff suppressed because one or more lines are too long

42
plugins/carhop-blocks/blocks/audio-player/build/audio-player/style-index-rtl.css Normal file
View File

@ -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;
}

44
plugins/carhop-blocks/blocks/audio-player/build/audio-player/style-index.css Normal file
View File

@ -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*/

1
plugins/carhop-blocks/blocks/audio-player/build/audio-player/style-index.css.map Normal file
View File

@ -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":""}

1
plugins/carhop-blocks/blocks/audio-player/build/audio-player/view.asset.php Normal file
View File

@ -0,0 +1 @@
<?php return array('dependencies' => array(), 'version' => '310e5a9c86a8da715108');

37
plugins/carhop-blocks/blocks/audio-player/build/audio-player/view.js Normal file
View File

@ -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

1
plugins/carhop-blocks/blocks/audio-player/build/audio-player/view.js.map Normal file
View File

@ -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":""}

52
plugins/carhop-blocks/blocks/audio-player/build/blocks-manifest.php Normal file
View File

@ -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
View 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
View File

File diff suppressed because it is too large Load Diff

55
plugins/carhop-blocks/blocks/audio-player/readme.txt Normal file
View 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.

46
plugins/carhop-blocks/blocks/audio-player/src/audio-player/block.json Normal file
View File

@ -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"
}

141
plugins/carhop-blocks/blocks/audio-player/src/audio-player/edit.js Normal file
View File

@ -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>
);
}

15
plugins/carhop-blocks/blocks/audio-player/src/audio-player/editor.scss Normal file
View File

@ -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%;
}
}
}

19
plugins/carhop-blocks/blocks/audio-player/src/audio-player/index.js Normal file
View File

@ -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,
});

28
plugins/carhop-blocks/blocks/audio-player/src/audio-player/save.js Normal file
View File

@ -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>
);
}

89
plugins/carhop-blocks/blocks/audio-player/src/audio-player/style.scss Normal file
View File

@ -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;
// }

40
plugins/carhop-blocks/blocks/audio-player/src/audio-player/view.js Normal file
View File

@ -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 */
}
});

1
plugins/carhop-blocks/index.php
View File

@ -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/decouvrez-prochainement/decouvrez-prochainement.php';
// require_once __DIR__ . '/blocks/cta-group/cta-group.php'; // require_once __DIR__ . '/blocks/cta-group/cta-group.php';
require_once __DIR__ . '/blocks/chapo/chapo.php'; require_once __DIR__ . '/blocks/chapo/chapo.php';
require_once __DIR__ . '/blocks/audio-player/audio-player.php';