feat: add new field 'audio' ✨

resources/js/controllers/audio_controller.js

@@ -0,0 +1,31 @@
+export default class extends window.Controller {
+    connect() {
+        const audio = this.element.querySelector('audio')
+
+        $(audio).on('ended', (event) => {
+            const controlPlayBtn = $(this.element.querySelector('.control-play'))
+            const controlPauseBtn = $(this.element.querySelector('.control-pause'))
+
+            controlPlayBtn.removeClass('d-none')
+            controlPauseBtn.addClass('d-none')
+        })
+    }
+
+    audio_play_pause() {
+        const audio = this.element.querySelector('audio')
+        const button = $(this.element.querySelector('button'))
+        const controlPlayBtn = button.find('.control-play')
+        const controlPauseBtn = button.find('.control-pause')
+
+        if (audio.paused) {
+            controlPlayBtn.addClass('d-none')
+            controlPauseBtn.removeClass('d-none')
+            audio.play()
+        } else if (audio.played) {
+            controlPlayBtn.removeClass('d-none')
+            controlPauseBtn.addClass('d-none')
+
+            audio.pause()
+        }
+    }
+}

resources/js/orchid_fields.js

@@ -1,7 +1,9 @@
 import RangeController from './controllers/range_controller';
 import RateController from './controllers/rate_controller';
 import ImageZoomController from './controllers/image_zoom_controller';
+import AudioController from './controllers/audio_controller';
 
 application.register('range', RangeController)
 application.register('rate', RateController)
 application.register('image-zoom', ImageZoomController)
+application.register('audio', AudioController)

resources/views/fields/audio.blade.php

@@ -0,0 +1,13 @@
+@component($typeForm, get_defined_vars())
+    <div data-controller="audio">
+        @if($attributes['value'])
+            <div class="form-group mb-0">
+                <audio src='{{$attributes['value']}}' preload='{{$attributes['preload']}}'></audio>
+                <button type="button" class='btn btn-default' data-action="click->audio#audio_play_pause">
+                    <x-orchid-icon path="{{$attributes['playIcon']}}" class="{{$attributes['playIcon']}}"/>
+                    <x-orchid-icon path="{{$attributes['pauseIcon']}}" class="{{$attributes['pauseIcon']}} d-none"/>
+                </button>
+            </div>
+        @endif
+    </div>
+@endcomponent

src/Fields/Audio.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace agoalofalife\Orchid\Fields;
+
+use Orchid\Screen\Field;
+
+/**
+ * Class Audio
+ *
+ * @method Audio source($value)
+ * @method Audio preload($value = true)
+ * @method Audio playIcon($value = null)
+ * @method Audio pauseIcon($value = null)
+ */
+class Audio extends Field
+{
+    /**
+     * @var string
+     */
+    protected $view = 'platform-fields::fields.audio';
+    /**
+     * Default attributes value.
+     *
+     * @var array
+     */
+    protected $attributes = [
+        'preload' => 'none',
+        'playIcon' => 'control-play',
+        'pauseIcon' => 'control-pause',
+    ];
+
+    /**
+     * Attributes available for a particular tag.
+     *
+     * @var array
+     */
+    protected $inlineAttributes = [
+        'source',
+        'preload',
+        'playIcon',
+        'pauseIcon',
+        'value',
+    ];
+}