MokoConsulting/MokoJoomHero
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases 1 Wiki Activity

feat: add local video mode with media picker and install script
Generic: Repo Health / Site Health (push) Has been cancelled
Details
Generic: Repo Health / Access control (push) Has been cancelled
Details
Universal: Auto Version Bump / Version Bump (push) Has been cancelled
Details
Update Server / Update Server (push) Has been cancelled
Details
Generic: Repo Health / Release configuration (push) Has been cancelled
Details
Generic: Repo Health / Scripts governance (push) Has been cancelled
Details
Generic: Repo Health / Repository health (push) Has been cancelled
Details

Browse Source 
- New "Local Video" hero mode with Joomla Media Manager file picker
- Install script creates images/heroes/ folder on install/update
- Updated showMuteToggle to show for both video and localvideo modes
- All language strings (en-US/en-GB, ini + sys.ini) updated with new
  keys: MODE_LOCALVIDEO, LOCAL_VIDEO_LABEL/DESC, CARD_DELAY, MUTE_TOGGLE

Authored-by: Moko Consulting
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-05-30 15:22:24 -05:00
parent c054267dff
commit 2fea58db47
8 changed files with 97 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/language/en-GB/mod_mokojoomhero.ini
+9 -4
View File
@@ -20,9 +20,10 @@ MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white backgro
; Hero mode
MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images, an embedded video (YouTube/Vimeo), or a local video file."
MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video (YouTube/Vimeo)"
MOD_MOKOJOOMHERO_MODE_LOCALVIDEO="Local Video"
; Image settings
MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
@@ -32,9 +33,13 @@ MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slid
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
; Video settings
; Video settings (embedded)
MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works — the module auto-detects the source."
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="YouTube or Vimeo URL. The module auto-detects the source."
; Local video settings
MOD_MOKOJOOMHERO_LOCAL_VIDEO_LABEL="Video File"
MOD_MOKOJOOMHERO_LOCAL_VIDEO_DESC="Select a video file from the Media Manager (mp4, webm, ogg)."
; Card delay
MOD_MOKOJOOMHERO_CARD_DELAY_LABEL="Card Fade-in Delay (ms)"
src/language/en-GB/mod_mokojoomhero.sys.ini
+17 -4
View File
@@ -21,9 +21,10 @@ MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white backgro
; Hero mode
MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images, an embedded video (YouTube/Vimeo), or a local video file."
MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video (YouTube/Vimeo)"
MOD_MOKOJOOMHERO_MODE_LOCALVIDEO="Local Video"
; Image settings
MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
@@ -33,9 +34,21 @@ MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slid
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
; Video settings
; Video settings (embedded)
MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works — the module auto-detects the source."
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="YouTube or Vimeo URL. The module auto-detects the source."
; Local video settings
MOD_MOKOJOOMHERO_LOCAL_VIDEO_LABEL="Video File"
MOD_MOKOJOOMHERO_LOCAL_VIDEO_DESC="Select a video file from the Media Manager (mp4, webm, ogg)."
; Card delay
MOD_MOKOJOOMHERO_CARD_DELAY_LABEL="Card Fade-in Delay (ms)"
MOD_MOKOJOOMHERO_CARD_DELAY_DESC="Delay in milliseconds before the content card fades in. Set to 0 for no delay."
; Mute toggle
MOD_MOKOJOOMHERO_MUTE_TOGGLE_LABEL="Show Mute Toggle"
MOD_MOKOJOOMHERO_MUTE_TOGGLE_DESC="Show a mute/unmute button on the hero video. Videos always start muted (required for autoplay)."
; Hero height
MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
src/language/en-US/mod_mokojoomhero.ini
+9 -4
View File
@@ -20,9 +20,10 @@ MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white backgro
; Hero mode
MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images, an embedded video (YouTube/Vimeo), or a local video file."
MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video (YouTube/Vimeo)"
MOD_MOKOJOOMHERO_MODE_LOCALVIDEO="Local Video"
; Image settings
MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
@@ -32,9 +33,13 @@ MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slid
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
; Video settings
; Video settings (embedded)
MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works - the module auto-detects the source."
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="YouTube or Vimeo URL. The module auto-detects the source."
; Local video settings
MOD_MOKOJOOMHERO_LOCAL_VIDEO_LABEL="Video File"
MOD_MOKOJOOMHERO_LOCAL_VIDEO_DESC="Select a video file from the Media Manager (mp4, webm, ogg)."
; Hero height
MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
src/language/en-US/mod_mokojoomhero.sys.ini
+17 -4
View File
@@ -21,9 +21,10 @@ MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white backgro
; Hero mode
MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images, an embedded video (YouTube/Vimeo), or a local video file."
MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
MOD_MOKOJOOMHERO_MODE_VIDEO="Video (YouTube/Vimeo)"
MOD_MOKOJOOMHERO_MODE_LOCALVIDEO="Local Video"
; Image settings
MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
@@ -33,9 +34,21 @@ MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slid
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
; Video settings
; Video settings (embedded)
MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works - the module auto-detects the source."
MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="YouTube or Vimeo URL. The module auto-detects the source."
; Local video settings
MOD_MOKOJOOMHERO_LOCAL_VIDEO_LABEL="Video File"
MOD_MOKOJOOMHERO_LOCAL_VIDEO_DESC="Select a video file from the Media Manager (mp4, webm, ogg)."
; Card delay
MOD_MOKOJOOMHERO_CARD_DELAY_LABEL="Card Fade-in Delay (ms)"
MOD_MOKOJOOMHERO_CARD_DELAY_DESC="Delay in milliseconds before the content card fades in. Set to 0 for no delay."
; Mute toggle
MOD_MOKOJOOMHERO_MUTE_TOGGLE_LABEL="Show Mute Toggle"
MOD_MOKOJOOMHERO_MUTE_TOGGLE_DESC="Show a mute/unmute button on the hero video. Videos always start muted (required for autoplay)."
; Hero height
MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
src/mod_mokojoomhero.php
+4 -1
View File
@@ -37,6 +37,7 @@ $heroContent = $params->get('heroContent', '');
$showCard = (bool) $params->get('showCard', 1);
$cardDelay = (int) $params->get('cardDelay', 0);
$showMuteToggle = (bool) $params->get('showMuteToggle', 0);
$localVideoFile = $params->get('localVideoFile', '');
// Collect hero images
$heroImages = [];
@@ -70,7 +71,9 @@ $videoUrl = '';
$youtubeId = '';
$vimeoId = '';
if ($heroMode === 'video' && $videoFile) {
if ($heroMode === 'localvideo' && $localVideoFile) {
$videoUrl = Uri::root() . ltrim($localVideoFile, '/');
} elseif ($heroMode === 'video' && $videoFile) {
// YouTube: watch, embed, shorts, youtu.be, with optional timestamps/params
if (preg_match('/(?:youtube\.com\/(?:watch\?.*v=|embed\/|shorts\/|v\/)|youtu\.be\/)([\w-]{11})/', $videoFile, $m)) {
$youtubeId = $m[1];
src/mod_mokojoomhero.xml
+13 -1
View File
@@ -25,9 +25,12 @@
<version>01.00.20-dev</version>
<description>Displays a random hero image slideshow or background video with content overlaid. Designed for MokoOnyx template. By Moko Consulting.</description>
<scriptfile>script.php</scriptfile>
<files>
<filename module="mod_mokojoomhero">mod_mokojoomhero.php</filename>
<filename>mod_mokojoomhero.xml</filename>
<filename>script.php</filename>
<folder>tmpl</folder>
<folder>language</folder>
</files>
@@ -57,6 +60,7 @@
>
<option value="images">MOD_MOKOJOOMHERO_MODE_IMAGES</option>
<option value="video">MOD_MOKOJOOMHERO_MODE_VIDEO</option>
<option value="localvideo">MOD_MOKOJOOMHERO_MODE_LOCALVIDEO</option>
</field>
<field
name="imageFolder"
@@ -95,6 +99,14 @@
filter="string"
showon="heroMode:video"
/>
<field
name="localVideoFile"
type="media"
label="MOD_MOKOJOOMHERO_LOCAL_VIDEO_LABEL"
description="MOD_MOKOJOOMHERO_LOCAL_VIDEO_DESC"
types="videos"
showon="heroMode:localvideo"
/>
<field
name="heroHeight"
type="text"
@@ -111,7 +123,7 @@
label="MOD_MOKOJOOMHERO_MUTE_TOGGLE_LABEL"
description="MOD_MOKOJOOMHERO_MUTE_TOGGLE_DESC"
default="0"
showon="heroMode:video"
showon="heroMode:video,localvideo"
>
<option value="0">JNO</option>
<option value="1">JYES</option>
src/script.php
+26
View File
@@ -0,0 +1,26 @@
<?php
/**
* @package Joomla.Site
* @subpackage mod_mokojoomhero
*
* @copyright Copyright (C) 2026 Moko Consulting. All rights reserved.
* @license GPL-3.0-or-later
*/
defined('_JEXEC') or die;
use Joomla\CMS\Filesystem\Folder;
use Joomla\CMS\Installer\InstallerAdapter;
class Mod_MokojoomheroInstallerScript
{
public function postflight(string $type, InstallerAdapter $adapter): void
{
$heroesPath = JPATH_ROOT . '/images/heroes';
if (!is_dir($heroesPath)) {
Folder::create($heroesPath);
}
}
}
src/tmpl/default.php
+2 -2
View File
@@ -50,7 +50,7 @@ $heightAttr = htmlspecialchars($heroHeight, ENT_QUOTES, 'UTF-8');
<iframe class="mokojoomhero__video" src="https://www.youtube-nocookie.com/embed/<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&mute=1&loop=1&playlist=<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&origin=<?php echo htmlspecialchars(\Joomla\CMS\Uri\Uri::root(), ENT_QUOTES, 'UTF-8'); ?>" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<?php elseif ($heroMode === 'video' && $vimeoId) : ?>
<iframe class="mokojoomhero__video" src="https://player.vimeo.com/video/<?php echo htmlspecialchars($vimeoId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&muted=1&loop=1&background=1" allow="autoplay" allowfullscreen></iframe>
<?php elseif ($heroMode === 'video' && $videoUrl) : ?>
<?php elseif (($heroMode === 'video' || $heroMode === 'localvideo') && $videoUrl) : ?>
<video class="mokojoomhero__video" autoplay muted loop playsinline>
<source src="<?php echo htmlspecialchars($videoUrl, ENT_QUOTES, 'UTF-8'); ?>">
</video>
@@ -63,7 +63,7 @@ $heightAttr = htmlspecialchars($heroHeight, ENT_QUOTES, 'UTF-8');
<?php endforeach; ?>
<?php endif; ?>
<?php if ($heroMode === 'video' && $showMuteToggle) : ?>
<?php if (($heroMode === 'video' || $heroMode === 'localvideo') && $showMuteToggle) : ?>
<button class="mokojoomhero__mute-toggle" type="button" aria-label="Unmute video" data-muted="true">
<span class="mokojoomhero__mute-icon" aria-hidden="true">&#x1F507;</span>
</button>