From bf35c8fd0bf04d341c31ac15bf613e5053b749aa Mon Sep 17 00:00:00 2001 From: Sonny Le Date: Thu, 8 Aug 2024 14:43:41 +0700 Subject: [PATCH] Add local video to Video article type --- assets/vendor/astroid/scss/_variables.scss | 2 ++ .../vendor/astroid/scss/components/_blog.scss | 13 +++++++++ framework/elements/articles/articles.php | 29 ++++++++++++++----- framework/elements/section-default.xml | 2 +- framework/forms/article.xml | 4 ++- framework/frontend/blog/modules/posttype.php | 5 +++- framework/frontend/blog/video.php | 17 ++++++++--- framework/frontend/comingsoon.php | 2 +- .../html/com_content/category/blog_item.php | 18 ++++++++++-- framework/layouts/system/error.php | 2 +- framework/library/astroid/Document.php | 12 +++++++- .../library/astroid/Element/BaseElement.php | 10 ++++--- js/videobg.js | 19 ++++++++---- js/videobg.min.js | 2 +- 14 files changed, 106 insertions(+), 31 deletions(-) diff --git a/assets/vendor/astroid/scss/_variables.scss b/assets/vendor/astroid/scss/_variables.scss index 2c03bb37..b9e14573 100644 --- a/assets/vendor/astroid/scss/_variables.scss +++ b/assets/vendor/astroid/scss/_variables.scss @@ -98,6 +98,7 @@ $selection-text-color: $white !default; $post-type-quote-bg: #bfe6ff !default; $post-type-gallery-bg: #e5f9f1 !default; $post-type-review-bg: #f5db8b !default; +$post-type-video-local-bg: #fee8eb !default; $post-type-youtube-bg: #fee8eb !default; $post-type-vimeo-bg: #76d3f2 !default; $post-type-soundcloud-bg: #fff1ea !default; @@ -106,6 +107,7 @@ $post-type-regular-color: #fff !default; $post-type-quote-color: #45a9ea !default; $post-type-gallery-color: #0dc772 !default; $post-type-review-color: #bb900b !default; +$post-type-video-local-color: #f23453 !default; $post-type-youtube-color: #f23453 !default; $post-type-vimeo-color: #1dabda !default; $post-type-soundcloud-color: #ff7930 !default; diff --git a/assets/vendor/astroid/scss/components/_blog.scss b/assets/vendor/astroid/scss/components/_blog.scss index 09d3663c..1f0f7c80 100644 --- a/assets/vendor/astroid/scss/components/_blog.scss +++ b/assets/vendor/astroid/scss/components/_blog.scss @@ -130,6 +130,19 @@ $article-posttype-spacing: 40px; } } + &.article-icon-local { + background-color: $post-type-video-local-bg; + color: $post-type-video-local-color; + + &:before { + @include triangle(6px, darken($post-type-video-local-bg, 15%), down-left); + } + + &:after { + @include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-video-local-bg, up); + } + } + &.article-icon-vimeo { background-color: $post-type-vimeo-bg; color: $post-type-vimeo-color; diff --git a/framework/elements/articles/articles.php b/framework/elements/articles/articles.php index 5ceba5bf..5af2a1ec 100644 --- a/framework/elements/articles/articles.php +++ b/framework/elements/articles/articles.php @@ -22,6 +22,7 @@ use Joomla\CMS\Language\Text; use Joomla\CMS\Router\Route; use Joomla\Component\Content\Site\Helper\RouteHelper; +use Joomla\CMS\Uri\Uri; extract($displayData); $catids = json_decode($params->get('catids', '[]'), true); @@ -33,6 +34,7 @@ foreach ($catids as $catid) { $categories[] = $catid['value']; } +$document = Framework::getDocument(); $limit = $params->get('limit', 3); $ordering = $params->get('ordering', 'latest'); $items = Article::getArticles($limit, $ordering, $categories); @@ -266,16 +268,23 @@ break; case 'video': $video_url = $item->params->get('astroid_article_video_url', ''); + $video_local_url = $item->params->get('astroid_article_video_local', ''); $video_type = $item->params->get('astroid_article_video_type', ''); $video_src = Article::getVideoSrc($video_url); - if ($video_src) { - if ($video_type == 'vimeo') { - $video_src .= '?autoplay=1&loop=1&muted=1&autopause=0&title=0&byline=0&portrait=0&controls=0'; + if ($video_type !== 'local') { + if ($video_src) { + if ($video_type == 'vimeo') { + $video_src .= '?autoplay=1&loop=1&muted=1&autopause=0&title=0&byline=0&portrait=0&controls=0'; + } + $media = '
'; + $media .= ''; + $media .= '
'; } - $media = '
'; - $media .= ''; - $media .= '
'; + } elseif (!empty($video_local_url)) { + $document->loadVideoBG(); + $media = '
image_thumbnail) ? ' data-as-video-poster="'.$item->image_thumbnail.'"' : '').'>
'; } + break; case 'audio': $renderer = new FileLayout('blog.audio', JPATH_LIBRARIES . '/astroid/framework/frontend'); @@ -283,7 +292,7 @@ break; } $item_image_cover = !empty($item->image_thumbnail) && ($enable_image_cover || $layout == 'overlay'); - if ($item_image_cover) { + if ($item_image_cover && ($item->post_format !== 'video' || $video_type !== 'local')) { $media = '
'.$item->title.'
'; } echo '
'; @@ -358,7 +367,7 @@ if ($has_gallery) { $wa->useScript('bootstrap.carousel'); } -$document = Framework::getDocument(); + if ($enable_slider) { $document->loadSlick('#'.$element->id.' .astroid-slick', implode(',', $slide_settings)); } elseif ($use_masonry) { @@ -406,11 +415,15 @@ $overlay_color = Style::getColor($params->get('overlay_color', '')); $style->child('.astroid-image-overlay-cover:after')->addCss('background-color', $overlay_color['light']); $style_dark->child('.astroid-image-overlay-cover:after')->addCss('background-color', $overlay_color['dark']); + + $style->child('.astroid-element-overlay:before')->addCss('background-color', $overlay_color['light']); + $style_dark->child('.astroid-element-overlay:before')->addCss('background-color', $overlay_color['dark']); break; case 'background-color': $overlay_gradient = $params->get('overlay_gradient', ''); if (!empty($overlay_gradient)) { $style->child('.astroid-image-overlay-cover:after')->addCss('background-image', Style::getGradientValue($overlay_gradient)); + $style->child('.astroid-element-overlay:before')->addCss('background-image', Style::getGradientValue($overlay_gradient)); } break; } diff --git a/framework/elements/section-default.xml b/framework/elements/section-default.xml index 4ec38171..3adc0728 100644 --- a/framework/elements/section-default.xml +++ b/framework/elements/section-default.xml @@ -40,7 +40,7 @@ - + diff --git a/framework/forms/article.xml b/framework/forms/article.xml index d5329aed..89b8852e 100644 --- a/framework/forms/article.xml +++ b/framework/forms/article.xml @@ -15,8 +15,10 @@ + - + + diff --git a/framework/frontend/blog/modules/posttype.php b/framework/frontend/blog/modules/posttype.php index 152c40c7..d5c4f5ab 100644 --- a/framework/frontend/blog/modules/posttype.php +++ b/framework/frontend/blog/modules/posttype.php @@ -23,7 +23,10 @@ switch ($type) { case 'video': $type = $params->get('astroid_article_video_type', 'youtube'); - $icon = 'fab fa-' . $type; + $icon = match ($type) { + 'local' => 'fa-solid fa-video', + default => 'fab fa-' . $type, + }; break; case 'gallery': $icon = 'far fa-images'; diff --git a/framework/frontend/blog/video.php b/framework/frontend/blog/video.php index 054359f0..3d65a94f 100644 --- a/framework/frontend/blog/video.php +++ b/framework/frontend/blog/video.php @@ -17,11 +17,20 @@ $type = $params->get('astroid_article_video_type', 'youtube'); $url = $params->get('astroid_article_video_url', ''); -$content = Astroid\Helper\Video::getVideoByTypeUrl($type, $url, true); -$thumbnail = Astroid\Helper\Video::getVideoThumbnailByTypeUrl($type, $url); -if (empty($content)) { - return; +$local_url = $params->get('astroid_article_video_local', ''); + +if ($type !== 'local') { + $content = Astroid\Helper\Video::getVideoByTypeUrl($type, $url, true); + $thumbnail = Astroid\Helper\Video::getVideoThumbnailByTypeUrl($type, $url); + if (empty($content)) { + return; + } +} elseif (!empty($local_url)) { + $content = ''; +} else { + return; } + ?>
diff --git a/framework/frontend/comingsoon.php b/framework/frontend/comingsoon.php index c83ffafd..9ff6b257 100644 --- a/framework/frontend/comingsoon.php +++ b/framework/frontend/comingsoon.php @@ -79,7 +79,7 @@ $attributes = []; $background_video = $params->get('background_video', ''); if (!empty($background_video)) { - $attributes['data-jd-video-bg'] = Uri::root() . Astroid\Helper\Media::getPath() . '/' . $background_video; + $attributes['data-as-video-bg'] = Uri::root() . Astroid\Helper\Media::getPath() . '/' . $background_video; $wa->registerAndUseScript('astroid.videobg', 'astroid/videobg.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']); } diff --git a/framework/html/com_content/category/blog_item.php b/framework/html/com_content/category/blog_item.php index 9fb01150..00c20ead 100644 --- a/framework/html/com_content/category/blog_item.php +++ b/framework/html/com_content/category/blog_item.php @@ -44,6 +44,8 @@ // Post Format $post_attribs = new Registry(json_decode($this->item->attribs)); $post_format = $post_attribs->get('post_format', 'standard'); +$astroid_article_type = $post_attribs->get('astroid_article_type', ''); +$astroid_article_video_type = $post_attribs->get('astroid_article_video_type', ''); // Image position $image_width = array(); @@ -78,7 +80,12 @@
getImage(); + if ($astroid_article_type == 'video' && $astroid_article_video_type == 'local') { + $astroid_article_video_local = $post_attribs->get('astroid_article_video_local', ''); + $image = '
image_intro) ? ' data-as-video-poster="'.$images->image_intro.'"' : '').'>
'; + } else { + $image = $astroidArticle->getImage(); + } if (((!empty($images->image_intro)) && $post_format == 'standard') || (is_string($image) && !empty($image))) { if ($image_position == 'left' || $image_position == 'right' || $image_position == 'bottom') { if ($image_position == 'left' || $image_position == 'right') { @@ -90,11 +97,16 @@ } } // Generate media - if ((!empty($images->image_intro)) && $post_format == 'standard') { + if ((!empty($images->image_intro)) && $post_format == 'standard' && ($astroid_article_type !== 'video' || $astroid_article_video_type !== 'local')) { echo LayoutHelper::render('joomla.content.intro_image', $this->item); } else if (is_string($image) && !empty($image)) { echo '
'; - $document->include('blog.modules.image', ['image' => $image, 'title' => $this->item->title, 'item' => $this->item]); + if ($astroid_article_type == 'video' && $astroid_article_video_type == 'local') { + $document->loadVideoBG(); + echo $image; + } else { + $document->include('blog.modules.image', ['image' => $image, 'title' => $this->item->title, 'item' => $this->item]); + } echo '
'; } else { echo LayoutHelper::render('joomla.content.post_formats.post_' . $post_format, array('params' => $post_attribs, 'item' => $this->item)); diff --git a/framework/layouts/system/error.php b/framework/layouts/system/error.php index fbea1489..81b91ad8 100644 --- a/framework/layouts/system/error.php +++ b/framework/layouts/system/error.php @@ -32,7 +32,7 @@ if ($background_setting_404 == 'video' && !empty($background_video_404)) { $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); $wa->registerAndUseScript('astroid.videobg', 'astroid/videobg.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']); - $bodyAttrs[] = 'data-jd-video-bg="' . Uri::root() . Astroid\Helper\Media::getPath() . '/' . $background_video_404 . '"'; + $bodyAttrs[] = 'data-as-video-bg="' . Uri::root() . Astroid\Helper\Media::getPath() . '/' . $background_video_404 . '"'; } ?> diff --git a/framework/library/astroid/Document.php b/framework/library/astroid/Document.php index c162e13e..4a2354cc 100644 --- a/framework/library/astroid/Document.php +++ b/framework/library/astroid/Document.php @@ -36,6 +36,7 @@ class Document protected static $_fancybox = false; protected static $_masonry = false; protected static $_slick = false; + protected static $_videojs = false; protected static $_layout_paths = []; protected $type = null; protected $modules = null; @@ -923,7 +924,7 @@ public function loadMasonry(): void if (!self::$_masonry) { $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); $wa->registerAndUseScript('masonry', 'astroid/masonry.pkgd.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']); - $wa->addInlineScript('jQuery(document).ready(function(){$(\'.as-masonry\').masonry({itemSelector: \'.as-masonry > div\',percentPosition: true});});'); + $wa->addInlineScript('jQuery(window).on("load", function(){$(\'.as-masonry\').masonry({itemSelector: \'.as-masonry > div\',percentPosition: true});});'); self::$_masonry = true; } } @@ -941,6 +942,15 @@ public function loadSlick($obj = '', $config = ''): void } } + public function loadVideoBG(): void + { + if (!self::$_videojs) { + $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); + $wa->registerAndUseScript('astroid.videobg', 'astroid/videobg.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']); + self::$_videojs = true; + } + } + public function moveFile(&$array, $a, $b): void { $out = array_splice($array, $a, 1); diff --git a/framework/library/astroid/Element/BaseElement.php b/framework/library/astroid/Element/BaseElement.php index 9e9377bb..bcd019b3 100644 --- a/framework/library/astroid/Element/BaseElement.php +++ b/framework/library/astroid/Element/BaseElement.php @@ -18,6 +18,7 @@ use Astroid\Helper; use Astroid\Helper\Media; use Astroid\Helper\Style; +use Astroid\Framework; use Joomla\CMS\Factory; use Joomla\Registry\Registry; use Joomla\CMS\Uri\Uri; @@ -210,7 +211,7 @@ protected function _background() $this->style_dark->addCss('background-color', $background_color['dark']); $image = $this->params->get('background_image', ''); if (!empty($image)) { - $this->style->addCss('background-image', 'url(' . Uri::root() . Media::getPath() . '/' . $image . ')'); + $this->style->addCss('background-image', 'url(' . Uri::base(true) . '/' . Media::getPath() . '/' . $image . ')'); $this->style->addCss('background-repeat', $this->params->get('background_repeat', '')); $this->style->addCss('background-size', $this->params->get('background_size', '')); $this->style->addCss('background-attachment', $this->params->get('background_attchment', '')); @@ -220,10 +221,11 @@ protected function _background() break; case 'video': // if video background $video = $this->params->get('background_video', ''); + $poster = $this->params->get('background_image', ''); if (!empty($video)) { - $this->addAttribute('data-jd-video-bg', Uri::root() . Media::getPath() . '/' . $video); - $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); - $wa->registerAndUseScript('astroid.videobg', 'astroid/videobg.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']); + $this->addAttribute('data-as-video-bg', Uri::base(true) . '/' . Media::getPath() . '/' . $video); + $this->addAttribute('data-as-video-poster', Uri::base(true) . '/' . Media::getPath() . '/' . $poster); + Framework::getDocument()->loadVideoBG(); $this->addOverlayColor(); } break; diff --git a/js/videobg.js b/js/videobg.js index 81f0e532..3843118c 100644 --- a/js/videobg.js +++ b/js/videobg.js @@ -1,7 +1,8 @@ (function ($) { - $.fn.JDVideoBG = function () { + $.fn.ASVideoBG = function () { return this.each(function () { - var _url = $(this).data('jd-video-bg'); + var _url = $(this).data('as-video-bg'), + _poster = $(this).data('as-video-poster'); $(this).css('position', 'relative'); $(this).children().css('position', 'relative'); $(this).children().css('z-index', '1'); @@ -20,8 +21,14 @@ playsinline: true, autoplay: true, loop: true, - src: _url + src: _url, }); + + if (typeof _poster !== 'undefined' && _poster) { + _container.css('background', 'url('+_poster+')'); + _container.css('background-size', 'cover'); + _container.css('background-position', 'center center'); + } _video.css('position', 'absolute'); _video.css('top', '50%'); _video.css('left', '50%'); @@ -33,12 +40,14 @@ _video.css('transform', 'translate(-50%, -50%)'); _video.css('max-width', 'inherit'); _video.prop('muted', true); - _container.append(_video); + $(window).on('load', function () { + _container.append(_video); + }); $(this).prepend(_container); }); }; $(function () { - $('[data-jd-video-bg]').JDVideoBG(); + $('[data-as-video-bg]').ASVideoBG(); }); }(jQuery)); diff --git a/js/videobg.min.js b/js/videobg.min.js index 384db30b..7d54c898 100644 --- a/js/videobg.min.js +++ b/js/videobg.min.js @@ -1 +1 @@ -(function($){$.fn.JDVideoBG=function(){return this.each(function(){var _url=$(this).data("jd-video-bg");$(this).css("position","relative");$(this).children().css("position","relative");$(this).children().css("z-index","1");var _container=$("
");_container.addClass("astroid-element-overlay");_container.css("position","absolute");_container.css("top","0");_container.css("left","0");_container.css("width","100%");_container.css("height","100%");_container.css("overflow","hidden");_container.css("z-index","0");var _video=$("