#115 - albums module: videos support, content centering

inc/js/functions.js

@@ -252,9 +252,15 @@ function bx_loading (elem, b) {
  * sSel - jQuery selector of content to be centered
  * sBlockSel - jquery selector of blocks
  */
-function bx_center_content (sSel, sBlockStyle) {
-    var sId = 'id' + (new Date()).getTime();
-    $(sSel).wrap('<div id="'+sId+'"></div>');
+function bx_center_content (sSel, sBlockStyle, bListenOnResize) {
+
+    var sId;
+    if ($(sSel).parent().hasClass('bx-center-content-wrapper')) {
+        sId = $(sSel).parent().attr('id');
+    } else {
+        sId = 'id' + (new Date()).getTime();
+        $(sSel).wrap('<div id="'+sId+'" class="bx-center-content-wrapper"></div>');
+    }
 
     var eCenter = $('#' + sId);
     var iAll = $('#' + sId + ' ' + sBlockStyle).size();
@@ -266,6 +272,12 @@ function bx_center_content (sSel, sBlockStyle) {
     if (iWidthUnit > iWidthContainer)
         return;
 
+    if ('undefined' != typeof(bListenOnResize) && bListenOnResize) {
+        $(window).on('resize.bx-center-content', function () {
+            bx_center_content(sSel, sBlockStyle);
+        });
+    }
+
     eCenter.css("padding-left", iLeft);
 }
 

modules/base/text/classes/BxBaseModTextTemplate.php

@@ -160,6 +160,14 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
 
         $oStorage = BxDolStorage::getObjectInstance($CNF['OBJECT_STORAGE']);
         $oTranscoder = BxDolTranscoderImage::getObjectInstance($CNF['OBJECT_IMAGES_TRANSCODER_PREVIEW']);
+        $aTranscodersVideo = false;
+
+        if ($CNF['OBJECT_VIDEOS_TRANSCODERS'])
+            $aTranscodersVideo = array (
+                'poster' => BxDolTranscoderImage::getObjectInstance($CNF['OBJECT_VIDEOS_TRANSCODERS']['poster']),
+                'mp4' => BxDolTranscoderImage::getObjectInstance($CNF['OBJECT_VIDEOS_TRANSCODERS']['mp4']),
+                'webm' => BxDolTranscoderImage::getObjectInstance($CNF['OBJECT_VIDEOS_TRANSCODERS']['webm']),
+            );
 
         $aGhostFiles = $oStorage->getGhosts ($aData[$CNF['FIELD_AUTHOR']], $aData[$CNF['FIELD_ID']]);
         if (!$aGhostFiles)
@@ -167,8 +175,8 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
 
         foreach ($aGhostFiles as $k => $a) {
 
-            $isImage = $oTranscoder && (0 == strncmp('image/', $a['mime_type'], 6)); // preview for images and transcoder object for preview must be defined
-            $isVideo = $oTranscoder && (0 == strncmp('video/', $a['mime_type'], 6)); // preview for videos and transcoder object for preview must be defined
+            $isImage = $oTranscoder && (0 == strncmp('image/', $a['mime_type'], 6)); // preview for images, transcoder object for preview must be defined
+            $isVideo = $aTranscodersVideo && (0 == strncmp('video/', $a['mime_type'], 6)); // preview for videos, transcoder object for video must be defined
             $sUrlOriginal = $oStorage->getFileUrlById($a['id']);
             $sImgPopupId = 'bx-messages-atachment-popup-' . $a['id'];
 
@@ -184,9 +192,22 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
                 ),
             );
 
+            // videos are displayed inline
+            $aGhostFiles[$k]['bx_if:video'] = array (
+                'condition' => $isVideo,
+                'content' => array (
+                    'video' => $aTranscodersVideo ? BxTemplFunctions::getInstance()->videoPlayer(
+                        $aTranscodersVideo['poster']->getFileUrl($a['id']), 
+                        $aTranscodersVideo['mp4']->getFileUrl($a['id']), 
+                        $aTranscodersVideo['webm']->getFileUrl($a['id']),
+                        false, ''
+                    ) : '',
+                ),
+            );
+
             // non-images are displayed as text links to original file
             $aGhostFiles[$k]['bx_if:not_image'] = array (
-                'condition' => !$isImage,
+                'condition' => !$isImage && !$isVideo,
                 'content' => array (
                     'url_original' => $sUrlOriginal,
                     'attr_file_name' => bx_html_attribute($a['file_name']),

modules/base/text/template/attachments.html

@@ -8,6 +8,9 @@
                 </a>
                 __popup__
             </bx_if:image>
+            <bx_if:video>
+                __video__
+            </bx_if:video>
             <bx_if:not_image>
                 <a target="_blank" href="__url_original__" title="__attr_file_name__">
                     <div class="bx-def-round-corners bx-def-padding-sec">__file_name__</div>
@@ -17,4 +20,10 @@
         </div>
     </bx_repeat:attachments>
 
+    <script>
+        $(document).ready(function() {
+            bx_center_content('.bx-base-text-attachments', '.bx-base-text-attachment', true);
+        });
+    </script>
+
 </div>

modules/base/text/template/css/main.css

@@ -70,3 +70,8 @@
 	float: left;
 }
 
+.bx-base-text-attachments .bx-base-text-attachment video,
+.bx-base-text-attachments .bx-base-text-attachment {
+    width:18.75rem;
+    height:12.5rem;
+}

modules/boonex/albums/classes/BxAlbumsConfig.php

@@ -57,6 +57,7 @@ class BxAlbumsConfig extends BxBaseModTextConfig
             // objects
             'OBJECT_STORAGE' => 'bx_albums_files',
             'OBJECT_IMAGES_TRANSCODER_PREVIEW' => 'bx_albums_proxy_preview',
+            'OBJECT_VIDEOS_TRANSCODERS' => array('poster' => 'bx_albums_video_poster', 'mp4' => 'bx_albums_video_mp4', 'webm' => 'bx_albums_video_webm'),
             'OBJECT_TRANSCODER_BROWSE' => 'bx_albums_proxy_browse',
             'OBJECT_VIEWS' => 'bx_albums',
             'OBJECT_VOTES' => 'bx_albums',

modules/boonex/albums/install/sql/enable.sql

@@ -50,7 +50,7 @@ INSERT INTO `sys_objects_page`(`object`, `title_system`, `title`, `module`, `lay
 
 INSERT INTO `sys_pages_blocks`(`object`, `cell_id`, `module`, `title`, `designbox_id`, `visible_for_levels`, `type`, `content`, `deletable`, `copyable`, `active`, `order`) VALUES 
 ('bx_albums_view_entry', 4, 'bx_albums', '_bx_albums_page_block_title_entry_text', 13, 2147483647, 'service', 'a:2:{s:6:\"module\";s:9:\"bx_albums\";s:6:\"method\";s:17:\"entity_text_block\";}', 0, 0, 1, 0),
-('bx_albums_view_entry', 4, 'bx_albums', '_bx_albums_page_block_title_entry_attachments', 11, 2147483647, 'service', 'a:2:{s:6:\"module\";s:9:\"bx_albums\";s:6:\"method\";s:18:\"entity_attachments\";}', 0, 0, 1, 1),
+('bx_albums_view_entry', 4, 'bx_albums', '_bx_albums_page_block_title_entry_attachments', 13, 2147483647, 'service', 'a:2:{s:6:\"module\";s:9:\"bx_albums\";s:6:\"method\";s:18:\"entity_attachments\";}', 0, 0, 1, 1),
 ('bx_albums_view_entry', 4, 'bx_albums', '_bx_albums_page_block_title_entry_comments', 11, 2147483647, 'service', 'a:2:{s:6:\"module\";s:9:\"bx_albums\";s:6:\"method\";s:15:\"entity_comments\";}', 0, 0, 1, 2),
 ('bx_albums_view_entry', 1, 'bx_albums', '_bx_albums_page_block_title_entry_actions', 3, 2147483647, 'service', 'a:2:{s:6:\"module\";s:9:\"bx_albums\";s:6:\"method\";s:14:\"entity_actions\";}', 0, 0, 1, 0),
 ('bx_albums_view_entry', 2, 'bx_albums', '_bx_albums_page_block_title_entry_author', 3, 2147483647, 'service', 'a:2:{s:6:\"module\";s:9:\"bx_albums\";s:6:\"method\";s:13:\"entity_author\";}', 0, 0, 1, 0),

modules/boonex/convos/classes/BxCnvConfig.php

@@ -51,6 +51,7 @@ class BxCnvConfig extends BxBaseModTextConfig
             'OBJECT_GRID' => 'bx_convos',
             'OBJECT_STORAGE' => 'bx_convos_files',
             'OBJECT_IMAGES_TRANSCODER_PREVIEW' => 'bx_convos_preview',
+            'OBJECT_VIDEOS_TRANSCODERS' => array(),
             'OBJECT_VIEWS' => 'bx_convos',
             'OBJECT_VOTES' => '',
             'OBJECT_COMMENTS' => 'bx_convos',

modules/boonex/posts/classes/BxPostsConfig.php

@@ -57,6 +57,7 @@ class BxPostsConfig extends BxBaseModTextConfig
             // objects
             'OBJECT_STORAGE' => 'bx_posts_files',
             'OBJECT_IMAGES_TRANSCODER_PREVIEW' => 'bx_posts_preview',
+            'OBJECT_VIDEOS_TRANSCODERS' => array(),
             'OBJECT_VIEWS' => 'bx_posts',
             'OBJECT_VOTES' => 'bx_posts',
             'OBJECT_METATAGS' => 'bx_posts',

template/scripts/BxBaseFunctions.php

@@ -380,7 +380,7 @@ class BxBaseFunctions extends BxDol implements iBxDolSingleton
      * @param $aAttrs custom attributes, defaults are: controls="" preload="none" autobuffer=""
      * @param $sStyles custom styles, defaults are: width:100%; height:auto;
      */
-    function videoPlayer ($sUrlPoster, $sUrlMP4, $sUrlWebM = '', $aAttrs = false, $sStyles = '')
+    function videoPlayer ($sUrlPoster, $sUrlMP4, $sUrlWebM = '', $aAttrs = false, $sStyles = 'width:100%; height:auto;')
     {
         $aAttrsDefaults = array(
             'controls' => '',
@@ -388,7 +388,7 @@ class BxBaseFunctions extends BxDol implements iBxDolSingleton
             'autobuffer' => '', 
         );
         $aAttrs = array_merge($aAttrsDefaults, is_array($aAttrs) ? $aAttrs : array());
-        $sAttrs = bx_convert_array2attrs($aAttrs, '', 'width:100%; height:auto;' . trim($sStyles));
+        $sAttrs = bx_convert_array2attrs($aAttrs, '', $sStyles);
 
         return '<video ' . $sAttrs . ' poster="' . $sUrlPoster . '">
                     ' . ($sUrlWebM ? '<source type="video/webm; codecs="vp8, vorbis" src="' . $sUrlWebM . '" />' : '') . '

template/scripts/BxBaseSearchResult.php

@@ -61,7 +61,7 @@ class BxBaseSearchResult extends BxDolSearchResult
                 $sCode .= "
                     <script>
                         $(document).ready(function() {
-                            bx_center_content('#{$sSearchResultBlockId}', '{$this->sCenterContentUnitSelector}');
+                            bx_center_content('#{$sSearchResultBlockId}', '{$this->sCenterContentUnitSelector}', true);
                         });
                     </script>";
             }