IMBoxのタイムラインで動画をvideo.jsで表示する

intra-mart Accel Platform IMBox ユーザ操作ガイド - IMBox について
intra-mart Accel Platform IMBox 管理者操作ガイド - IMBox について

IMBoxに動画ファイルを投稿しても画像ファイルと違ってただの添付ファイルとして扱われてしまい、表示するにはダウンロード→ローカルで再生する必要がありとても不便だったので、カスタマイズしてみた。

カスタマイズ前：

カスタマイズ後：

タイムライン上で再生できるようになり便利になった。
もちろん、ダウンロードしたければ画面上のUIからダウンロード可能。

カスタマイズしたのは以下の2ファイル。

• imart\WEB-INF\jssp\platform\src\imbox\views\timeline\timeline_thread_attach_file.js
• imart\WEB-INF\jssp\platform\src\imbox\views\timeline\timeline_thread_attach_file.html

timeline_thread_attach_file.js

/**
 * @fileOverview スレッド共通部品です。
 * @name timeline_thread_attach_file.js
 * @author NTT DATA INTRAMART CORPORATION
 * @version 1.0.0
*/
var $imbox = {};
var $CONST = {};
/**
 * スレッド(添付ファイル)初期処理
 * @param  {Object} request リクエストパラメータ
 */
function init(request){

  let message = request.message;
  if(message.deleteFlag || message.attachFiles.length===0){
    $imbox.isAttachFile = false; 
    return false;
  }
  let i, length;
  let attachFileIconInfo;
  let attachFiles =[];
  let clientType = request.client_type;
  let thumnailSize = imbox.constants.TIMELINE_ATTACH_ICON_SIZE_LIST[clientType];
  let cryption = new Packages.jp.co.intra_mart.system.imtag.SecureParameterCryption();
  let downLoad = MessageManager.getMessage('CAP.Z.IWP.IMBOX.UI.COMMON.DOWNLOAD')

  for(i = 0, length = message.attachFiles.length; i < length; i++){
    attachFileIconInfo = imbox.util.getAttachFileIconInfo(message.attachFiles[i].attachMimeType, message.attachFiles[i].attachPath, thumnailSize);
    let size  = formatSize(message.attachFiles[i]);
	let attachFile = {
         attachId         : message.attachFiles[i].attachId,
         attachMimeType   : message.attachFiles[i].attachMimeType,
         attachName       : message.attachFiles[i].attachName,
         attachPath       : message.attachFiles[i].attachPath,
         attachSize       : downLoad + size,
         imgFlag          : attachFileIconInfo.imgFlag,
		 videoFlag        : !attachFileIconInfo.imgFlag && isVideo(message.attachFiles[i].attachName),
         iconClass        : attachFileIconInfo.iconClass ? attachFileIconInfo.iconClass : null ,
         iconPath         : attachFileIconInfo.iconPath ?  attachFileIconInfo.iconPath + imbox.util.getAttachName(message.attachFiles[i].attachPath,message.attachFiles[i].attachName,message.attachFiles[i].attachId) : null,
         iconOriginalPath : attachFileIconInfo.iconOriginalPath? attachFileIconInfo.iconOriginalPath : null ,
         noViewer         : attachFileIconInfo.noViewer
	};
    attachFile.fileFlag = !attachFile.imgFlag && !attachFile.videoFlag;
    attachFiles.push(attachFile);
  }

  message.attachFiles = attachFiles;
  $imbox.message = message;
  $imbox.isAttachFile = true;
  $imbox.displayId = request.display_id;
}

function formatSize(attachFile){
  let size = attachFile.attachSize;
  if (size <= 0){
     let storage = new PublicStorage(attachFile.attachPath);
     size = storage.length();
  }
  if (typeof size !== 'number') {
      return '';
  }
  if (size >= 1000000000) {
    size = (size / 1000000000).toFixed(2) + ' GB';
  }else if (size >= 1000000) {
    size =  (size / 1000000).toFixed(2) + ' MB';
  }else {
     size = (size / 1000).toFixed(2) + ' KB';
  }
  return '(' + size + ')';
}

function isVideo(name) {
	return name.match(/\.avi$/i)  != null ||
	       name.match(/\.mp4$/i)  != null ||
		   name.match(/\.m4a$/i)  != null ||
           name.match(/\.mov$/i)  != null ||
		   name.match(/\.qt$/i)   != null ||
		   name.match(/\.m2ts$/i) != null ||
		   name.match(/\.ts$/i)   != null ||
		   name.match(/\.mpeg$/i) != null ||
		   name.match(/\.mpg$/i)  != null ||
		   name.match(/\.mkv$/i)  != null ||
		   name.match(/\.wmv$/i)  != null ||
		   name.match(/\.flv$/i)  != null ||
		   name.match(/\.asf$/i)  != null ||
		   name.match(/\.webm$/i) != null ||
		   name.match(/\.ogm$/i)  != null;
}

timeline_thread_attach_file.html

<imart type="repeat" list=$imbox.message.attachFiles item="record">
  <imart type="condition" validity=$imbox.message.deleteFlag negative>
    <imart type="condition" validity=$imbox.isAttachFile>
    <div class="imbox-timeline-thread-attach-file imbox-timeline-thread-attach-file-fn">
      <imart type="condition" validity=record.videoFlag>
      <span class="imbox-timeline-thread-attach-file-left" style="max-height: none;">
      </imart>
      <imart type="condition" validity=record.videoFlag negative>
      <span class="imbox-timeline-thread-attach-file-left">
      </imart>
        
        <imart type="condition" validity=record.imgFlag>
          <span class="imbox-timeline-thread-attach-file-picture">
            <imart type="imuiPicture" class="imbox-timeline-thread-attach-file-thumbnail" src=record.iconPath viewerSrc=record.iconOriginalPath noViewer=record.noViewer escapeXml="true" escapeJs="false" group=$imbox.message.messageId authzUri="service://imbox/user" authzAction="execute" />
          </span>
        </imart>
        <imart type="condition" validity=record.videoFlag>
          <span class="imbox-timeline-thread-attach-file-icon">
            <imart type="imuiVideo" src=record.attachPath width="508px" escapeXml="true" escapeJs="false" authzUri="service://imbox/user" authzAction="execute" />
          </span>
        </imart>
        <imart type="condition" validity=record.fileFlag>
          <span class="imbox-timeline-thread-attach-file-icon">
            <span class="<imart type="string" value=record.iconClass escapeXml="true" escapeJs="false" />"></span>
          </span>
        </imart>
      </span>
      <span class="imbox-timeline-thread-attach-file-right">
        <div class="imbox-timeline-thread-attach-file-name">
          <imart type="string" value=record.attachName escapeXml="true" escapeJs="false" />
        </div>
        <div class="imbox-timeline-thread-attach-file-download">
          <a href="imbox/attachfile/download/<imart type="string" value=$imbox.message.threadId escapeXml="true" escapeJs="false" />/<imart type="string" value=$imbox.message.messageId escapeXml="true" escapeJs="false" />/<imart type="string" value=$imbox.displayId escapeXml="true" escapeJs="false" />/<imart type="string" value=record.attachId escapeXml="true" escapeJs="false" />" data-thread_id="<imart type="string" value=$imbox.message.threadId escapeXml="true" escapeJs="false" />" data-message_id="<imart type="string" value=$imbox.message.messageId escapeXml="true" escapeJs="false" />" data-display_id="<imart type="string" value=$imbox.displayId escapeXml="true" escapeJs="false" />" data-attach_id="<imart type="string" value=record.attachId escapeXml="true" escapeJs="false" />" class="imbox-timeline-thread-attach-file-download-link imbox-timeline-thread-attach-file-download-fn"><!--
            --><span class="imbox-timeline-thread-attach-file-download-icon imbox-icon-common-16-download"></span><!--
            --><span class="imbox-timeline-thread-attach-file-download-label"><imart type="string" value=record.attachSize escapeXml="true" escapeJs="false" /></span><!--
          --></a>
        </div>
      </span>
    </div>
    </imart>
  </imart>
</imart>