badmanners/shimmie2
badmanners/shimmie2
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[video] microhtml and no-jquery

Browse source
This commit is contained in:
Shish 2023-12-30 13:01:36 +00:00
parent 9ed58a69a0
commit 2a23c235ec
1 changed files with 26 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
ext/handle_video/theme.php
View file

@ -4,17 +4,13 @@ declare(strict_types=1);
namespace Shimmie2; namespace Shimmie2;
use function MicroHTML\{A, BR, VIDEO, SOURCE, emptyHTML};
class VideoFileHandlerTheme extends Themelet class VideoFileHandlerTheme extends Themelet
{ {
public function display_image(Page $page, Image $image) public function display_image(Page $page, Image $image)
{ {
global $config; global $config;
$ilink = $image->get_image_link();
$thumb_url = make_http($image->get_thumb_link()); //used as fallback image
$mime = strtolower($image->get_mime());
$autoplay = $config->get_bool(VideoFileHandlerConfig::PLAYBACK_AUTOPLAY);
$loop = $config->get_bool(VideoFileHandlerConfig::PLAYBACK_LOOP);
$mute = $config->get_bool(VideoFileHandlerConfig::PLAYBACK_MUTE);
$width = "auto"; $width = "auto";
if ($image->width > 1) { if ($image->width > 1) {
@ -25,31 +21,31 @@ class VideoFileHandlerTheme extends Themelet
$height = $image->height."px"; $height = $image->height."px";
} }
$html = "Video not playing? <a href='$ilink'>Click here</a> to download the file.<br/>"; $html = emptyHTML(
"Video not playing? ",
A(['href' => $image->get_image_link()], "Click here"),
" to download the file.",
BR(),
VIDEO(
[
'controls' => true,
'class' => 'shm-main-image',
'id' => 'main_image',
'alt' => 'main image',
'poster' => make_http($image->get_thumb_link()),
'autoplay' => $config->get_bool(VideoFileHandlerConfig::PLAYBACK_AUTOPLAY),
'loop' => $config->get_bool(VideoFileHandlerConfig::PLAYBACK_LOOP),
'muted' => $config->get_bool(VideoFileHandlerConfig::PLAYBACK_MUTE),
'style' => "height: $height; width: $width; max-width: 100%; object-fit: contain; background-color: black;",
'onloadstart' => 'this.volume = 0.25',
],
SOURCE([
'src' => $image->get_image_link(),
'type' => strtolower($image->get_mime())
])
)
);
//Browser media format support: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
if (MimeType::matches_array($mime, VideoFileHandler::SUPPORTED_MIME)) {
if ($mime == MimeType::WEBM) {
//Several browsers still lack WebM support sadly: https://caniuse.com/#feat=webm
$html .= "<!--[if IE]><p>To view webm files with IE, please <a href='https://tools.google.com/dlpage/webmmf/' target='_blank'>download this plugin</a>.</p><![endif]-->";
}
$autoplay = ($autoplay ? ' autoplay' : '');
$loop = ($loop ? ' loop' : '');
$mute = ($mute ? ' muted' : '');
$html .= "
<video controls class='shm-main-image' id='main_image' alt='main image' poster='$thumb_url' {$autoplay} {$loop} {$mute}
style='height: $height; width: $width; max-width: 100%; object-fit: contain; background-color: black;'>
<source src='{$ilink}' type='{$mime}'>
</video>
<script>$('#main_image').prop('volume', 0.25);</script>
";
} else {
//This should never happen, but just in case let's have a fallback..
$html = "Video type '$mime' not recognised";
}
$page->add_block(new Block("Video", $html, "main", 10)); $page->add_block(new Block("Video", $html, "main", 10));
} }
} }