playable event preview image, fixes fluxapps#19 (fluxapps#47)

Author: ferishili

classes/Event/class.xoctEventRenderer.php

@@ -91,10 +91,27 @@ public function insert(&$tpl, $variable, $value, $block_title = '') {
      *
      * @throws xoctException
      */
-	public function insertThumbnail(&$tpl, $block_title = 'thumbnail', $variable = 'THUMBNAIL') {
-		$this->insert($tpl, $variable, $this->getThumbnailHTML(), $block_title);
+	public function insertPreviewImage(&$tpl, $block_title = 'preview_image', $variable = 'PREVIEW_IMAGE') {
+		$this->insert($tpl, $variable, $this->getPreviewImageHTML(), $block_title);
 	}
 
+    /**
+     * @return string
+     * @throws xoctException
+     */
+	public function getPreviewImageHTML() {
+		$preview_image_tpl = self::plugin()->template('default/tpl.event_preview_image.html');
+        $preview_image_tpl->setVariable('ID', $this->event->getIdentifier());
+        $preview_image_tpl->setVariable('THUMBNAIL', $this->getThumbnailHTML());
+        return $preview_image_tpl->get();
+	}
+
+    /**
+     * @return string
+     */
+    public function getPreviewLink() {
+	    return 'data-preview_link="' . $this->event->getIdentifier() . '"';
+    }
 
     /**
      * @return string
@@ -135,6 +152,7 @@ public function getPlayerLinkHTML($button_type = 'btn-info') {
 			$link_tpl = self::plugin()->template('default/tpl.player_link.html');
 			$link_tpl->setVariable('LINK_TEXT', self::plugin()->translate($this->event->isLiveEvent() ? 'player_live' : 'player', self::LANG_MODULE));
 			$link_tpl->setVariable('BUTTON_TYPE', $button_type);
+			$link_tpl->setVariable('PREVIEW_LINK', $this->getPreviewLink());
 			$link_tpl->setVariable('TARGET', '_blank');
 			if (PluginConfig::getConfig(PluginConfig::F_USE_MODALS)) {
 				$modal = $this->getPlayerModal();

classes/Event/class.xoctEventTableGUI.php

@@ -145,7 +145,7 @@ public function fillRow($a_set)
         $event = $a_set['object'] ?: $this->event_repository->find($a_set['identifier']);
         $renderer = new xoctEventRenderer($event, $this->objectSettings);
 
-        $renderer->insertThumbnail($this->tpl, null);
+        $renderer->insertPreviewImage($this->tpl, null);
         $renderer->insertPlayerLink($this->tpl);
 
         if (!$this->objectSettings->getStreamingOnly()) {

templates/default/events.css

@@ -9,6 +9,7 @@
 	margin: auto;
 	width: 100%;
 	height: 100%;
+	cursor: pointer;
 }
 
 .tblrow1.xoct-state-running td {

templates/default/events.js

@@ -32,5 +32,20 @@ var xoctEvent = {
   outFunc: function(element) {
     var tooltip = $(element).find('span.xoct_tooltiptext')[0];
     tooltip.innerHTML = this.lang['tooltip_copy_link'];
+  },
+
+  previewPlay: function(element, event) {
+    event.preventDefault();
+    var play_link_obj = $('a[data-preview_link="' + $(element).data('id') + '"]');
+    if (play_link_obj.length) {
+      var play_link = play_link_obj[0];
+      var href = $(play_link).attr('href');
+      if (href && href != '#') {
+        var target = $(play_link).attr('target') ? $(play_link).attr('target') : '_blank';
+        window.open(href, target);
+      } else {
+        $(play_link).click();
+      }
+    }
   }
 };

templates/default/tpl.event_preview_image.html

@@ -0,0 +1,3 @@
+<div class="xoct_preview_image" onclick="xoctEvent.previewPlay(this, event)" data-id="{ID}">
+    {THUMBNAIL}
+</div>

templates/default/tpl.events.html

@@ -1,8 +1,6 @@
 <tr class="{CSS_ROW} {ADDITIONAL_CSS}">
 	<td class="std small">
-		<div class="xoct_preview_image">
-			{THUMBNAIL}
-		</div>
+		{PREVIEW_IMAGE}
 	</td>
 	<td class="std small">
 		<div class="btn-group-vertical" role="group" >

templates/default/tpl.player_link.html

@@ -1 +1 @@
-<a href="{LINK_URL}" target="{TARGET}" class="btn {BUTTON_TYPE}" {MODAL_LINK}>{LINK_TEXT}</a>{MODAL}
+<a href="{LINK_URL}" target="{TARGET}" class="btn {BUTTON_TYPE}" {PREVIEW_LINK} {MODAL_LINK}>{LINK_TEXT}</a>{MODAL}