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

[intra-mart Accel Platform IMBox ユーザ操作ガイド - IMBox について](https://www.intra-mart.jp/document/library/iap/public/imbox/imbox_user_guide/texts/about/about.html)
[intra-mart Accel Platform IMBox 管理者操作ガイド - IMBox について](https://www.intra-mart.jp/document/library/iap/public/imbox/imbox_administrator_guide/texts/about/about.html)

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

カスタマイズ前：
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131196/4e4b8cdd-2a03-c0fd-bdd7-c93ec003b53c.png)

カスタマイズ後：
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131196/1fcf6fa9-6dde-0853-4563-e549afeaa800.png)

タイムライン上で再生できるようになり便利になった。
もちろん、ダウンロードしたければ画面上の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

```js: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;
}

```

```html: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>
```