@@ -12,7 +12,25 @@

     left: 0;

     right: 0;

     top: 0;

-    bottom: 0; }

+    bottom: 0;

+    overflow: hidden; }

+    .slick-slider-container .slick-slider-background video,

+    .slick-slider-container .slick-slider-slide-image video,

+    .slick-slider-slide .slick-slider-background video,

+    .slick-slider-slide .slick-slider-slide-image video {

+      position: absolute;

+      left: -10000%;

+      right: -10000%;

+      top: -10000%;

+      bottom: -10000%;

+      margin: auto auto;

+      min-width: 1000%;

+      min-height: 1000%;

+      -webkit-transform: scale(0.1);

+      transform: scale(0.1);

+      width: auto;

+      height: auto;

+      max-width: none; }

   .slick-slider-container .slide-content,

   .slick-slider-slide .slide-content {

     position: relative; }

@@ -1,6 +1,6 @@

 {

 "version": 3,

-"mappings": "AAAA,uBAAwB;EACtB,QAAQ,EAAE,MAAM;;AAElB;mBACoB;EAClB,QAAQ,EAAE,QAAQ;EAElB;;;+CAC0B;IACxB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;EAGX;oCAAe;IACb,QAAQ,EAAE,QAAQ;EAGpB;gCAAW;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC",

+"mappings": "AAAA,uBAAwB;EACtB,QAAQ,EAAE,MAAM;;AAElB;mBACoB;EAClB,QAAQ,EAAE,QAAQ;EAElB;;;+CAC0B;IACxB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,MAAM;IAEhB;;;uDAAM;MACJ,QAAQ,EAAE,QAAQ;MAClB,IAAI,EAAC,OAAO;MAAE,KAAK,EAAE,OAAO;MAC5B,GAAG,EAAE,OAAO;MAAE,MAAM,EAAE,OAAO;MAC7B,MAAM,EAAE,SAAS;MACjB,SAAS,EAAE,KAAK;MAChB,UAAU,EAAE,KAAK;MACjB,iBAAiB,EAAC,UAAU;MAC5B,SAAS,EAAE,UAAU;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,SAAS,EAAE,IAAI;EAInB;oCAAe;IACb,QAAQ,EAAE,QAAQ;EAGpB;gCAAW;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC",

 "sources": ["slick-addons.scss"],

 "names": [],

 "file": "slick-addons.css"

@@ -12,6 +12,21 @@

     right: 0;

     top: 0;

     bottom: 0;

+    overflow: hidden;

+

+    video {

+      position: absolute;

+      left:-10000%; right: -10000%;

+      top: -10000%; bottom: -10000%;

+      margin: auto auto;

+      min-width: 1000%;

+      min-height: 1000%;

+      -webkit-transform:scale(0.1);

+      transform: scale(0.1);

+      width: auto;

+      height: auto;

+      max-width: none;

+    }

   }

   .slide-content {

@@ -28,10 +28,10 @@ $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderStart'] = '{type_legend

 $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderStop'] = '{type_legend},type;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderSlideStart'] = '{type_legend},type;{slickSlider_legend},eSM_addImage;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderSlideStop'] = '{type_legend},type;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';

-$GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderImage'] = '{type_legend},type;{slickSlider_legend},singleSRC,size,eSM_slick_bgSize,eSM_slick_bgPosition,eSM_slick_minHeight,eSM_slick_bgOpacity,eSM_slick_bgRepeat,eSM_addText;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop';

+$GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderImage'] = '{type_legend},type;{slickSlider_legend},multiSRC,size,eSM_slick_bgSize,eSM_slick_bgPosition,eSM_slick_minHeight,eSM_slick_bgOpacity,eSM_slick_bgRepeat,eSM_addText;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop';

-$GLOBALS['TL_DCA']['tl_content']['subpalettes']['eSM_addImage'] = 'singleSRC,size,eSM_slick_bgSize,eSM_slick_bgPosition,eSM_slick_minHeight,eSM_slick_bgOpacity,eSM_slick_bgRepeat';

+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['eSM_addImage'] = 'multiSRC,size,eSM_slick_bgSize,eSM_slick_bgPosition,eSM_slick_minHeight,eSM_slick_bgOpacity,eSM_slick_bgRepeat';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['eSM_addText'] = 'eSM_slick_text,eSM_slick_url';

 /**

@@ -63,14 +63,33 @@ class ContentSlickSliderImage extends \ContentElement

       $this->Template = $objTemplate;

     }

-    if ($this->singleSRC)

+    if ($this->multiSRC)

     {

-      $objFile = \FilesModel::findByUuid($this->singleSRC);

+      $source = \StringUtil::deserialize($this->multiSRC);

+      $objFiles = \FilesModel::findMultipleByUuids($source);

-      if ($objFile !== null && is_file(TL_ROOT . '/' . $objFile->path))

+      if ($objFiles !== null) {

+        $imageFiles = array();

+        $videoFiles = array();

+

+        foreach ($objFiles as $file) {

+          if (is_file(TL_ROOT . '/' . $file->path))

+          {

+            if (in_array($file->extension, array_map('trim', explode(',', \Config::get('validImageTypes')))))

+            {

+              $imageFiles[] = $file;

+            } else if (in_array($file->extension, array_map('trim', array('mp4', 'm4v', 'mov', 'wmv', 'webm', 'ogv', 'm4a', 'mp3', 'wma', 'mpeg', 'wav', 'ogg'))))

+            {

+              $videoFiles[] = $file;

+            }

+          }

+        }

+      }

+

+      if (isset($imageFiles[0]))

       {

-        $this->singleSRC = $objFile->path;

+        $this->singleSRC = $imageFiles[0]->path;

         $this->addImageToTemplate($this->Template, array('singleSRC'=>$this->singleSRC, 'size'=>$this->size));

@@ -86,6 +105,7 @@ class ContentSlickSliderImage extends \ContentElement

           $backgroundStyle .= '.slide_'.$this->id.':before { content: ""; display: block; float: left; padding-top: '.$minHeight.'; }';

         }

+

         $backgroundStyle .= '.slide_'.$this->id.' .slick-slider-slide-image { background-image: url(\''.$this->Template->src.'\');';

         if ($this->eSM_slick_bgSize) {

@@ -131,6 +151,10 @@ class ContentSlickSliderImage extends \ContentElement

         }

       }

+

+      if (count($videoFiles)) {

+        $this->Template->videoFiles = $videoFiles;

+      }

     }

     if ($this->eSM_addText)

@@ -39,14 +39,33 @@ class ContentSlickSliderSlideStart extends \ContentElement

 			$this->Template = $objTemplate;

 		}

-    if ($this->singleSRC)

+    if ($this->eSM_addImage && $this->multiSRC)

     {

-      $objFile = \FilesModel::findByUuid($this->singleSRC);

+      $source = \StringUtil::deserialize($this->multiSRC);

+      $objFiles = \FilesModel::findMultipleByUuids($source);

-      if ($objFile !== null && is_file(TL_ROOT . '/' . $objFile->path))

+      if ($objFiles !== null) {

+        $imageFiles = array();

+        $videoFiles = array();

+

+        foreach ($objFiles as $file) {

+          if (is_file(TL_ROOT . '/' . $file->path))

+          {

+            if (in_array($file->extension, array_map('trim', explode(',', \Config::get('validImageTypes')))))

+            {

+              $imageFiles[] = $file;

+            } else if (in_array($file->extension, array_map('trim', array('mp4', 'm4v', 'mov', 'wmv', 'webm', 'ogv', 'm4a', 'mp3', 'wma', 'mpeg', 'wav', 'ogg'))))

+            {

+              $videoFiles[] = $file;

+            }

+          }

+        }

+      }

+

+      if (isset($imageFiles[0]))

       {

-        $this->singleSRC = $objFile->path;

+        $this->singleSRC = $imageFiles[0]->path;

         $this->addImageToTemplate($this->Template, array('singleSRC'=>$this->singleSRC, 'size'=>$this->size));

@@ -108,6 +127,10 @@ class ContentSlickSliderSlideStart extends \ContentElement

         }

       }

+

+      if (count($videoFiles)) {

+        $this->Template->videoFiles = $videoFiles;

+      }

     }

   }

@@ -44,47 +44,77 @@ class ContentSlickSliderStart extends \ContentElement

 		$this->Template->config = $this->eSM_slick_autoPlaySpeed . ',' . $this->eSM_slick_speed . ',' . $this->eSM_slick_initialSlide . ',' . $this->eSM_slick_lazyLoad . ',' . $this->eSM_slick_infinite . ',' . $this->eSM_slick_arrows . ',' . $this->eSM_slick_pagination . ',' . $this->eSM_slick_pause . ',' . $this->eSM_slick_fade . ',' . $this->eSM_slick_slidesToShow . ',' . $this->eSM_slick_slidesToScroll . ',' . $this->eSM_slick_adaptiveHeight;

 		// Background image

-    if ($this->singleSRC)

+    if ($this->eSM_addImage && $this->multiSRC)

     {

+      $source = \StringUtil::deserialize($this->multiSRC);

+      $objFiles = \FilesModel::findMultipleByUuids($source);

-      $objFile = \FilesModel::findByUuid($this->singleSRC);

+      if ($objFiles !== null) {

+        $imageFiles = array();

+        $videoFiles = array();

-      if ($objFile !== null && is_file(TL_ROOT . '/' . $objFile->path))

+        foreach ($objFiles as $file) {

+          if (is_file(TL_ROOT . '/' . $file->path))

+          {

+            if (in_array($file->extension, array_map('trim', explode(',', \Config::get('validImageTypes')))))

+            {

+              $imageFiles[] = $file;

+            } else if (in_array($file->extension, array_map('trim', array('mp4', 'm4v', 'mov', 'wmv', 'webm', 'ogv', 'm4a', 'mp3', 'wma', 'mpeg', 'wav', 'ogg'))))

+            {

+              $videoFiles[] = $file;

+            }

+          }

+        }

+      }

+

+      if (isset($imageFiles[0]))

       {

-        $this->singleSRC = $objFile->path;

+        $this->singleSRC = $imageFiles[0]->path;

-        $this->addImageToTemplate($this->Template, array('singleSRC'=>$this->singleSRC, 'size'=>$this->size));

+        $this->addImageToTemplate($this->Template, array('singleSRC' => $this->singleSRC, 'size' => $this->size));

-        if ($this->eSM_slick_minHeight) {

-          if ($this->eSM_slick_bgSize && $this->eSM_slick_bgSize == 'auto auto') {

+        if ($this->eSM_slick_minHeight)

+        {

+          if ($this->eSM_slick_bgSize && $this->eSM_slick_bgSize == 'auto auto')

+          {

             $this->Template->minHeight = $this->Template->picture['img']['height'] . 'px';

           } else

           {

             $this->Template->minHeight = round($this->Template->picture['img']['height'] / $this->Template->picture['img']['width'] * 100) . '%';

           }

         }

-      }

-      $backgroundStyle = 'background-image: url(\''.$this->Template->src.'\');';

+        $backgroundStyle = 'background-image: url(\'' . $this->Template->src . '\');';

-      if ($this->eSM_slick_bgSize) {

-        $backgroundStyle .= 'background-size: ' . $this->eSM_slick_bgSize . ';';

-      } else {

-        $backgroundStyle .= 'background-size: cover;';

-      }

-      if ($this->eSM_slick_bgPosition) {

-        $backgroundStyle .= 'background-position: ' . $this->eSM_slick_bgPosition . ';';

-      } else {

-        $backgroundStyle .= 'background-position: 0 0;';

-      }

-      if ($this->eSM_slick_bgOpacity) {

-        $backgroundStyle .= 'opacity:' . $this->eSM_slick_bgOpacity/100 . ';';

-      }

-      if ($this->eSM_slick_bgRepeat) {

-        $backgroundStyle .= 'background-repeat: ' . $this->eSM_slick_bgRepeat . ';';

+        if ($this->eSM_slick_bgSize)

+        {

+          $backgroundStyle .= 'background-size: ' . $this->eSM_slick_bgSize . ';';

+        } else

+        {

+          $backgroundStyle .= 'background-size: cover;';

+        }

+        if ($this->eSM_slick_bgPosition)

+        {

+          $backgroundStyle .= 'background-position: ' . $this->eSM_slick_bgPosition . ';';

+        } else

+        {

+          $backgroundStyle .= 'background-position: 0 0;';

+        }

+        if ($this->eSM_slick_bgOpacity)

+        {

+          $backgroundStyle .= 'opacity:' . $this->eSM_slick_bgOpacity / 100 . ';';

+        }

+        if ($this->eSM_slick_bgRepeat)

+        {

+          $backgroundStyle .= 'background-repeat: ' . $this->eSM_slick_bgRepeat . ';';

+        }

+

+        $this->Template->backgroundStyle = $backgroundStyle;

       }

-      $this->Template->backgroundStyle = $backgroundStyle;

+      if (count($videoFiles)) {

+        $this->Template->videoFiles = $videoFiles;

+      }

     }

 	}

 }

@@ -2,8 +2,16 @@

 <?php $this->block('content'); ?>

 <div class="slick-slider-slide slide_<?= $this->id ?>">

-  <?php if ($this->src): ?>

-    <div class="slick-slider-slide-image"></div>

+  <?php if ($this->src || count($this->videoFiles)): ?>

+    <div class="slick-slider-slide-image">

+      <?php if ($this->videoFiles): ?>

+        <video class="no-mejs" autoplay loop muted>

+          <?php foreach ($this->videoFiles as $video): ?>

+            <source src="<?php echo TL_FILES_URL . $video->path ?>" type="video/<?php echo $video->extension ?>">

+          <?php endforeach ?>

+        </video>

+      <?php endif; ?>

+    </div>

     <style>

       <?= $this->backgroundStyle ?>

@@ -7,10 +7,18 @@

   <?php endif; ?>

   <div class="slick-slider-container slide-container_<?= $this->id ?>">

-    <?php if ($this->eSM_addImage && $this->src): ?>

-    <div class="slick-slider-background" style="<?= $this->backgroundStyle ?>"></div>

-      <?php if ($this->minHeight): ?>

-      <style>.slide-container_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $this->minHeight ?>; float: left; }</style>

+    <?php if ($this->eSM_addImage && ($this->src || count($this->videoFiles))): ?>

+      <div class="slick-slider-background"<?php if ($this->src): ?>style="<?= $this->backgroundStyle ?>"<?php endif; ?>>

+        <?php if ($this->videoFiles): ?>

+          <video class="no-mejs" autoplay loop muted>

+            <?php foreach ($this->videoFiles as $video): ?>

+              <source src="<?php echo TL_FILES_URL . $video->path ?>" type="video/<?php echo $video->extension ?>">

+            <?php endforeach ?>

+          </video>

+        <?php endif; ?>

+      </div>

+      <?php if ($this->src && $this->minHeight): ?>

+        <style>.slide-container_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $this->minHeight ?>; float: left; }</style>

       <?php endif; ?>

     <?php endif; ?>

@@ -1,8 +1,16 @@

 <?php $this->block('content'); ?>

 <div class="slick-slider-slide slide_<?= $this->id ?>">

-  <?php if ($this->eSM_addImage && $this->src): ?>

-    <div class="slick-slider-slide-image"></div>

+  <?php if ($this->eSM_addImage && ($this->src || count($this->videoFiles))): ?>

+    <div class="slick-slider-background">

+      <?php if ($this->videoFiles): ?>

+        <video class="no-mejs" autoplay loop muted>

+          <?php foreach ($this->videoFiles as $video): ?>

+            <source src="<?php echo TL_FILES_URL . $video->path ?>" type="video/<?php echo $video->extension ?>">

+          <?php endforeach ?>

+        </video>

+      <?php endif; ?>

+    </div>

     <style>

       <?= $this->backgroundStyle ?>