Extend to video

[Beraldi]

Hi, I'm tring to extend this plugin to show videos (mp4) in lightbox using https://html5box.com/ . But I cant do the mantis stop the download of .mp4 file and the html5lightbox get the url of .mp4 file. Can you help with this fix?

Tks!

[infojunkie]

I cannot help much without seeing your code, but in general to stop a link from downloading, you need to add an onclick handler to it, and the handler should return false to stop the default action: http://javascript.info/tutorial/default-browser-action

[Beraldi]

Sorry, here are my codes:

JS Structure:

Lightbox.php:

<?php

require_api( 'crypto_api.php' );

/**
 * Lightbox Integration
 * Copyright (C) Karim Ratib ([email protected])
 *
 * Lightbox Integration is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License 2
 * as published by the Free Software Foundation.
 *
 * Lightbox Integration is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Lightbox Integration; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA
 * or see http://www.gnu.org/licenses/.
 */
class LightboxPlugin extends MantisPlugin {

    function register() {
        $this->name = plugin_lang_get('title');
        $this->description = plugin_lang_get('description');
        $this->version = '1.0';
        $this->page = 'config_page';
        $this->requires = array(
            'MantisCore' => '2.0.0',
        );
        $this->author = 'Karim Ratib';
        $this->contact = '[email protected]';
        $this->url = 'http://code.meedan.com';
        $this->nonce = crypto_generate_uri_safe_nonce( 16 );
    }

    /**
     * Default plugin configuration.
     */
    function config() {
        return array(
            'display_on_img_preview' => ON,
            'display_on_img_link' => ON,
        );
    }

    function hooks() {
        return array(
            'EVENT_LAYOUT_RESOURCES' => 'add_lightbox',
            'EVENT_CORE_HEADERS' => 'csp_headers',
        );
    }

    function add_lightbox($event) {
        $currentUrl = explode('/', $_SERVER['PHP_SELF']);
        if (end($currentUrl) !== 'view.php') return;

        $lightbox_display_on_img_preview = plugin_config_get('display_on_img_preview');
        $lightbox_display_on_img_link = plugin_config_get('display_on_img_link');
        $lightboxJs = plugin_file('lightbox/js/lightbox.min.js');
        $lightboxCss = plugin_file('lightbox/css/lightbox.min.css');
        $html5lightboxJs = plugin_file('html5lightbox/html5lightbox.js');
        $lightboxMantis = plugin_file('Lightbox.js');
        $images = [
          'prev' => plugin_file('lightbox/img/prev.png'),
          'next' => plugin_file('lightbox/img/next.png'),
          'close' => plugin_file('lightbox/img/close.png'),
          'loading' => plugin_file('lightbox/img/loading.gif'),
          /*
          'html5boxplayer_fullscreen' => plugin_file('html5lightbox/skins/default/html5boxplayer_fullscreen.png'),
          'html5boxplayer_hd' => plugin_file('html5lightbox/skins/default/html5boxplayer_hd.png'),
          'html5boxplayer_playpause' => plugin_file('html5lightbox/skins/default/html5boxplayer_playpause.png'),
          'html5boxplayer_playvideo' => plugin_file('html5lightbox/skins/default/html5boxplayer_playvideo.png'),
          'html5boxplayer_volume' => plugin_file('html5lightbox/skins/default/html5boxplayer_volume.png'),
          'html5boxplayer-close' => plugin_file('html5lightbox/skins/default/lightbox-close.png'),
          'html5boxplayer-fullscreen' => plugin_file('html5lightbox/skins/default/lightbox-close-fullscreen.png'),
          'html5boxplayer-fullscreen-close' => plugin_file('html5lightbox/skins/default/lightbox-fullscreen-close.png'),
          'html5boxplayer-loading' => plugin_file('html5lightbox/skins/default/lightbox-loading.gif'),
          'html5boxplayer-navnext' => plugin_file('html5lightbox/skins/default/lightbox-navnext.png'),
          'html5boxplayer-navprev' => plugin_file('html5lightbox/skins/default/lightbox-navprev.png'),
          'html5boxplayer-next' => plugin_file('html5lightbox/skins/default/lightbox-next.png'),
          'html5boxplayer-next-2' => plugin_file('html5lightbox/skins/default/lightbox-next-2.png'),
          'html5boxplayer-next-fullscreen' => plugin_file('html5lightbox/skins/default/lightbox-next-fullscreen.png'),
          'html5boxplayer-pause' => plugin_file('html5lightbox/skins/default/lightbox-pause.png'),
          'html5boxplayer-pause-2' => plugin_file('html5lightbox/skins/default/lightbox-pause-2.png'),
          'html5boxplayer-play' => plugin_file('html5lightbox/skins/default/lightbox-play.png'),
          'html5boxplayer-play-2' => plugin_file('html5lightbox/skins/default/lightbox-play-2.png'),
          'html5boxplayer-playvideo' => plugin_file('html5lightbox/skins/default/lightbox-playvideo.png'),
          'html5boxplayer-prev' => plugin_file('html5lightbox/skins/default/lightbox-prev.png'),
          'html5boxplayer-prev-2' => plugin_file('html5lightbox/skins/default/lightbox-prev-2.png'),
          'html5boxplayer-prev-fullscreen' => plugin_file('html5lightbox/skins/default/lightbox-prev-fullscreen.png'),
          'html5boxplayer-arrowsnext' => plugin_file('html5lightbox/skins/default/nav-arrows-next.png'),
          'html5boxplayer-arrows-prev' => plugin_file('html5lightbox/skins/default/nav-arrows-prev.png'),
          */
        ];

        return <<<LIGHTBOX
<script type="text/javascript" nonce={$this->nonce}>
var lightbox_display_on_img_preview = {$lightbox_display_on_img_preview};
var lightbox_display_on_img_link = {$lightbox_display_on_img_link};
</script>
<link href="{$lightboxCss}" rel="stylesheet">
<script type="text/javascript" src="{$lightboxJs}"></script>
<script type="text/javascript" src="{$html5lightboxJs}"></script>
<script type="text/javascript" src="{$lightboxMantis}"></script>
<style>
.lb-nav a.lb-prev {
  background-image: url({$images['prev']});
}
.lb-nav a.lb-next {
  background-image: url({$images['next']});
}
.lb-data .lb-close {
  background-image: url({$images['close']});
}
.lb-cancel {
  background-image: url({$images['loading']});
}
</style>
LIGHTBOX;
    }

    /**
     * Add Content Security Policy headers for our script.
     */
    function csp_headers() {
       http_csp_add( 'script-src', "'nonce-{$this->nonce}'" );
       http_csp_add( 'img-src', "data:" );
    }
}

[Beraldi]

Lightbox.js:

(function ($) {
  $(document).ready(function () {
    if (lightbox_display_on_img_preview) {
      $('.bug-attachment-preview-image a').attr('rel', 'lightbox');
    }
    if (lightbox_display_on_img_link) {
      $('div#bugnotes').find('*').filter(function() {
        return this.id.match(/attachment_preview_\d+_(open|closed)/);
      }).find('a:nth-child(2)').attr('rel', 'lightbox');
    }
    $( "a:contains('.mp4')" ).attr('class', 'html5lightbox');
  });
})(jQuery);