MP4ファイルをダウンロードできるようにした

README.md

@@ -116,8 +116,10 @@ Twitter と連携してツイートをキャプチャ付きで投稿する機能
 - **録画番組の再生**
   - YouTube 風の視聴動画選択画面
   - ts ファイルの再生
+  - mp4 ファイルの再生
+  - mp4 ファイルのプログレッシブダウンロード再生
+  - mp4 ファイルのダウンロード
   - mp4 ファイルへのエンコード（予定）
-  - mp4 ファイルの再生（予定）
   - 録画番組の並べ替え(新しい順・古い順・名前昇順・名前降順)
   - 録画番組の検索
   - 録画番組リストの更新
@@ -130,7 +132,6 @@ Twitter と連携してツイートをキャプチャ付きで投稿する機能
   - 画質を選択して再生
   - ffmpeg・QSVEncC・NVEncC でのエンコード
   - ニコニコ実況の過去ログの再生（要設定）（後述）
-  - エンコード動画のダウンロード（予定）
 
 ### Twitter へのツイート投稿
 - **Twitter へのツイート投稿（ TwitterAPI を利用します）（要設定）**

data/tweet_time.txt

@@ -0,0 +1 @@
+1572703081

htdocs/api/listupdate.php

@@ -135,11 +135,13 @@ function duration_calc($duration){
 
 	foreach ($search as $key => $value) {
 
-		$TSfile['data'][$key]['file'] = $value; // パス含めたファイル名
+		$TSfile['data'][$key]['file'] = str_replace($TSfile_dir, '', $value); // ルートフォルダからのパスを含めたファイル名
 		$TSfile['data'][$key]['pathinfo'] = pathinfo($value); // 拡張子なしファイル名など
+		unset($TSfile['data'][$key]['pathinfo']['dirname']); // セキュリティの問題でdirnameは削除
 		$TSfile['data'][$key]['title'] = convertSymbol(str_replace('　', ' ', $TSfile['data'][$key]['pathinfo']['filename'])); // 拡張子なしファイル名を暫定でタイトルに
+		$TSfile['data'][$key]['title_raw'] = str_replace('　', ' ', $TSfile['data'][$key]['pathinfo']['filename']); // HTML抜き
 		$TSfile['data'][$key]['update'] = filemtime($value); // ファイルの更新日時(Unix時間)
-		$md5 = md5($TSfile['data'][$key]['file']); // ファイル名のmd5
+		$md5 = md5($value); // ファイル名のmd5
 
 		// サムネイルが存在するなら
 		if (file_exists($base_dir.'htdocs/files/thumb/'.$md5.'.jpg')){
@@ -196,7 +198,7 @@ function duration_calc($duration){
 			// 上書きされた拡張子情報を以前のものに戻す
 			// MP4からは番組情報を取得できないので、同じファイル名のTSがあればその番組情報を使う
 			// そのままだと拡張子情報までTSとして上書きされてしまうのでここでMP4に戻しておく
-			$TSfile['data'][$key]['file'] = $value;
+			$TSfile['data'][$key]['file'] = $TSfile['data'][$key]['file'] = str_replace($TSfile_dir, '', $value);
 			$TSfile['data'][$key]['pathinfo']['extension'] = $extension;
 
 			// 番組情報取得フラグ
@@ -217,7 +219,7 @@ function duration_calc($duration){
 			// 上書きされた拡張子情報を以前のものに戻す
 			// MP4からは番組情報を取得できないので、同じファイル名のTSがあればその番組情報を使う
 			// そのままだと拡張子情報までTSとして上書きされてしまうのでここでMP4に戻しておく
-			$TSfile['data'][$key]['file'] = $value;
+			$TSfile['data'][$key]['file'] = $TSfile['data'][$key]['file'] = str_replace($TSfile_dir, '', $value);
 			$TSfile['data'][$key]['pathinfo']['extension'] = $extension;
 
 			// 番組情報取得フラグ
@@ -244,6 +246,7 @@ function duration_calc($duration){
 
 				// 出力
 				$TSfile['data'][$key]['title'] = convertSymbol(str_replace('　', ' ', mb_convert_kana($fileinfo[4], 'asv', 'UTF-8'))); // 取得した番組名の方が正確なので修正
+				$TSfile['data'][$key]['title_raw'] = str_replace('　', ' ', mb_convert_kana($fileinfo[4], 'asv', 'UTF-8')); // 取得した番組名の方が正確なので修正
 				$TSfile['data'][$key]['date'] = $fileinfo[0]; // 録画日付
 				$TSfile['data'][$key]['info_state'] = 'generated'; // 番組情報取得フラグ
 				$TSfile['data'][$key]['info'] = str_replace('　', ' ', mb_convert_kana($fileinfo[5], 'asv', 'UTF-8')); // 番組情報

htdocs/api/stream.php

@@ -6,13 +6,11 @@
 	// 設定ファイル読み込み
 	$ini = json_decode(file_get_contents($inifile), true);
 
-	// MP4のみ
-	if ($ini['state'] == 'File' and $ini['fileext'] == 'mp4' and $ini['encoder'] == 'Progressive'){
-
-		// https://blog.logicky.com/2019/05/29/151209?utm_source=feed
-		// を大変参考にさせていただきました、ありがとうございます
+	// MP4を出力する関数
+	// https://blog.logicky.com/2019/05/29/151209?utm_source=feed
+	// を大変参考にさせていただきました、ありがとうございます
+	function loadMP4 ($file){
 
-		$file = $ini['filepath'];
 		$fp = @fopen($file, 'rb'); // ファイルを開く
 		$size   = filesize($file); // ファイルサイズ
 		$length = $size;           // Content length
@@ -91,12 +89,29 @@
 
 		// ファイルを閉じる
 		fclose($fp);
-		exit();
+	}
+
+	if (isset($_GET['file'])){
+		$file = rawurldecode($_GET['file']);
+		$pathinfo = pathinfo($TSfile_dir.'/'.$file);
+	}
+
+	// 指定されたファイル
+	if (isset($file) and file_exists($TSfile_dir.'/'.$file) and isset($pathinfo['extension']) and $pathinfo['extension'] == 'mp4'){
+
+		loadMP4($TSfile_dir.'/'.$_GET['file']);
+		exit();	
+
+	// MP4のみ
+	} else if ($ini['state'] == 'File' and $ini['fileext'] == 'mp4' and $ini['encoder'] == 'Progressive'){
+
+		loadMP4($TSfile_dir.'/'.$ini['filepath']);
+		exit();	 
 
 	} else {
 
 		// エラー画像
-		header('Content-Type: image/jpg');
+		header('Content-Type: image/jpeg');
 		readfile('../files/thumb_default.jpg');
 
 		exit();

htdocs/files/watch.css

@@ -140,8 +140,10 @@ section {
     transition: 0.15s ease-in-out;
 }
 
-.search-file-box:hover {
-    background-color: #F5F5F5;
+@media screen and (min-width: 1025px){
+    .search-file-box:hover {
+        background-color: #F5F5F5;
+    }
 }
 
 .search-file-thumb {
@@ -179,6 +181,36 @@ section {
     background-color: #007cff;
 }
 
+.search-file-download, .search-file-encode {
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    bottom: 5px;
+    right: 5px;
+    color: #ffffff;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 4px;
+    font-size: 20px;
+    width: 35px;
+    height: 35px;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+@media screen and (min-width: 1025px){
+    .search-file-thumb:hover > .search-file-download,
+    .search-file-thumb:hover > .search-file-encode {
+            opacity: 1;
+    }
+}
+
+.search-file-download.open, .search-file-encode.open {
+    opacity: 1;
+}
+
 .search-file-content {
     display: flex;
     width: 70%;

htdocs/files/watch.js

@@ -78,11 +78,23 @@
         if (fileinfo.length > 0){
 
           for (var i = $('.search-file-box').length; i < length; i++){
+
+            download = 
+              '    <a class="search-file-download" href="../api/stream?file=' + encodeURIComponent(fileinfo[i]['file']) + '" target="blank" download="' + fileinfo[i]['title_raw'] + '.' + fileinfo[i]['pathinfo']['extension'] + '">' + "\n"
+            + '      <i class="fas fa-download"></i>' + "\n"
+            + '    </a>' + "\n"
+
+            encode = 
+              '    <div class="search-file-encode">' + "\n"
+            + '      <i class="fas fa-film"></i>' + "\n"
+            + '    </div>' + "\n"
+
             html += 
               '<div class="search-file-box">' + "\n"
             + '  <div class="search-file-thumb">' + "\n"
             + '    <img class="search-file-thumb-img" src="/files/thumb/' + fileinfo[i]['thumb'] + '">' + "\n"
             + '    <div class="search-file-ext ' + fileinfo[i]['pathinfo']['extension'] + '">' + fileinfo[i]['pathinfo']['extension'].toUpperCase() + '</div>' + "\n"
+            + (fileinfo[i]['pathinfo']['extension'] == 'mp4' ? download : encode)
             + '  </div>' + "\n"
             + '  <div class="search-file-content">' + "\n"
             + '    <div class="search-file-path">' + fileinfo[i]['file'] + '</div>' + "\n"
@@ -309,6 +321,25 @@
 
     });
 
+    // サムネイルクリック時
+    $('body').on('click','.search-file-thumb',function(event){
+      if ($(window).width() <= 1024){
+        event.stopPropagation()
+        $(this).find('.search-file-encode').toggleClass('open');
+        $(this).find('.search-file-download').toggleClass('open');
+      }
+    });
+
+    // ダウンロードボタン
+    $('body').on('click','.search-file-download',function(event){
+      event.stopPropagation();
+    });
+
+    // エンコードボタン
+    $('body').on('click','.search-file-encode',function(event){
+      event.stopPropagation();
+    });
+
     // 再生開始
     $('.bluebutton').click(function(){
       $('.bluebutton').addClass('disabled');

htdocs/setting.php

@@ -100,7 +100,7 @@
 				if (!($ini['fileext'] == 'mp4' and $ini['encoder'] == 'Progressive')){
 
 					// ストリーミング開始
-					$cmd = stream_file($ini['filepath'], $ini['quality'], $ini['encoder'], $ini['subtitle']);
+					$cmd = stream_file($TSfile_dir.'/'.$ini['filepath'], $ini['quality'], $ini['encoder'], $ini['subtitle']);
 
 					// 準備中用の動画を流すためにm3u8をコピー
 					if ($silent == 'true'){

require.php

@@ -69,7 +69,7 @@
 $cookiefile = $base_dir.'data/nico.cookie';
 
 // ツイートのタイムスタンプ記録ファイルのパス
-$tweet_time_file = $base_dir.'data/tweet_time.dat';
+$tweet_time_file = $base_dir.'data/tweet_time.txt';
 
 // オフライン時の m3u8 のパス
 $offline_m3u8 = $base_dir.'data/offline.m3u8';