Add local video to Video article type

templaza · Aug 8, 2024 · bf35c8f · bf35c8f
1 parent 9a5c0db
commit bf35c8f
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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,24 +268,31 @@
             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 =    '<div class="entry-video ratio ratio-16x9 overflow-hidden'.$img_border_radius.'">';
+                    $media .=   '<iframe src="' . $video_src . '" title="'.$item->title.'" allowfullscreen></iframe>';
+                    $media .=   '</div>';
                 }
-                $media =    '<div class="entry-video ratio ratio-16x9 overflow-hidden'.$img_border_radius.'">';
-                $media .=   '<iframe src="' . $video_src . '" title="'.$item->title.'" allowfullscreen></iframe>';
-                $media .=   '</div>';
+            } elseif (!empty($video_local_url)) {
+                $document->loadVideoBG();
+                $media = '<div class="as-article-video-local as-image-cover astroid-image-overlay-cover" data-as-video-bg="'.Uri::base('true').'/images/'.$video_local_url.'"'.(!empty($item->image_thumbnail) ? ' data-as-video-poster="'.$item->image_thumbnail.'"' : '').'></div>';
             }
+
             break;
         case 'audio':
             $renderer   =   new FileLayout('blog.audio', JPATH_LIBRARIES . '/astroid/framework/frontend');
             $media      =   $renderer->render(['article' => $item]);
             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  =   '<a href="'.Route::_($link).'" title="'. $item->title . '"><div class="as-image-cover d-block overflow-hidden'.($layout == 'overlay' ? ' astroid-image-overlay-cover' : '').$img_border_radius.'"><img class="object-fit-cover w-100 h-100" src="'. $item->image_thumbnail .'" alt="'.$item->title.'"></div></a>';
     }
     echo '<div class="astroid-article-item astroid-grid '.$item->post_format.'"><div class="card overflow-hidden' . $card_style . $bd_radius . ($enable_grid_match ? ' h-100' : '') . '">';
@@ -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
@@ -40,7 +40,7 @@
 
             <field astroidgroup="general" ngShow="[background_setting] =='image'" name="img_background_color" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
 
-            <field astroidgroup="general" ngShow="[background_setting] =='image'" name="background_image" type="astroidmedia" label="TPL_ASTROID_BACKGROUND_IMAGE_LABEL"/>
+            <field astroidgroup="general" ngShow="[background_setting] =='image' OR [background_setting] =='video'" name="background_image" type="astroidmedia" label="TPL_ASTROID_BACKGROUND_IMAGE_LABEL"/>
 
             <field astroidgroup="general" ngShow="[background_setting] =='image'" name="background_repeat" type="astroidlist" label="TPL_ASTROID_BACKGROUND_REPEAT_LABEL" hint="Background Repeat">
                <option value="">JGLOBAL_INHERIT</option>

diff --git a/framework/forms/article.xml b/framework/forms/article.xml
@@ -15,8 +15,10 @@
             <field showon="astroid_article_type:video" name="astroid_article_video_type" type="radio" default="youtube" label="ASTROID_VIDEO_TYPE" description="ASTROID_VIDEO_TYPE_DESC" class="form-check-inline">
                 <option value="youtube">ASTROID_YOUTUBE</option>
                 <option value="vimeo">ASTROID_VIMEO</option>
+                <option value="local">ASTROID_LOCAL</option>
             </field>
-            <field type="text" name="astroid_article_video_url" label="ASTROID_VIDEO_ID" description="ASTROID_VIDEO_ID_DESC" showon="astroid_article_type:video" />
+            <field type="text" name="astroid_article_video_url" label="ASTROID_VIDEO_ID" description="ASTROID_VIDEO_ID_DESC" showon="astroid_article_type:video[AND]astroid_article_video_type!:local" />
+            <field name="astroid_article_video_local" type="filelist" default="" label="ASTROID_VIDEO_LOCAL_URL" directory="images" fileFilter="\.mov$|\.mpg$|\.mp4$|\.ogv$|\.webm$|\.mts$|\.avi$|\.wmv$" hide_default="true" showon="astroid_article_type:video[AND]astroid_article_video_type:local" />
             <!-- Gallery Options -->
             <field type="spacer" showon="astroid_article_type:gallery" name="astroidarticlegallery" label="ASTROID_ARTICLE_OPTIONS_GALLERY_LABEL" />
             <field showon="astroid_article_type:gallery" name="astroid_article_gallery_width" type="text" hint="ASTROID_GALLERY_WIDTH_PLACEHOLDER" label="ASTROID_GALLERY_WIDTH_LBL" description="ASTROID_GALLERY_WIDTH_DESC" />

diff --git 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
@@ -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 = '<video controls src="images/'.$local_url.'"></video>';
+} else {
+    return;
 }
+
 ?>
 <div itemprop="VideoObject" itemscope itemtype="https://schema.org/VideoObject" class="ratio ratio-16x9 article-video">
    <?php echo $content; ?>

diff --git 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
@@ -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 @@
     <div class="system-unpublished">
     <?php endif; ?>
     <?php
-    $image = $astroidArticle->getImage();
+    if ($astroid_article_type == 'video' && $astroid_article_video_type == 'local') {
+        $astroid_article_video_local = $post_attribs->get('astroid_article_video_local', '');
+        $image = '<div class="as-article-video-local h-100 ratio ratio-16x9" data-as-video-bg="'.Uri::base('true').'/images/'.$astroid_article_video_local.'"'.(!empty($images->image_intro) ? ' data-as-video-poster="'.$images->image_intro.'"' : '').'></div>';
+    } 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 '<div class="item-image">';
-        $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 '</div>';
     } 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
@@ -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
@@ -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
@@ -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
@@ -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));