fix play stream

tsukumijima · Jul 25, 2019 · c6db621 · c6db621
1 parent 2096635
commit c6db621
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -278,8 +278,6 @@ TVRemotePlus は、PWA に対応しています。
  - 同梱している動作に必要なソフトウェア（後述）は全て TVRemotePlus 向けに設定やフォルダ構成等を最適化してあります。
 
 ## 既知の問題
- - ライブ再生がなかなか始まらない → 将来的に修正予定ですが、今は何度かリロードしてください（大体直ります）
- - ファイル再生が不安定 → 将来的に修正予定ですが、今は何度かリロードしてください（これも大体直ります）
  - ストリームが起動しているかどうかを監視する機能を実装出来ていないため、ストリーム起動に失敗したかは PC のエンコーダーのログを見ない限り分からない
    - 何度リロードしても「配信準備中…」の動画が流れる場合、ストリーム起動に失敗している可能性が高いです
  - ストリームを終了させる際、ffmpeg・QSVEnc・TSTask 等を taskkill で強制終了させる雑な仕様なため、ストリーム起動時にffmpegなど別のソフトを利用している場合に突然ブッチされる

diff --git a/header.php b/header.php
@@ -30,6 +30,7 @@
   <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" type="text/css" href="files/DPlayer.min.css">
+  <link rel="stylesheet" type="text/css" href="files/toastr.min.css">
   <link rel="stylesheet" type="text/css" href="files/style.css">
   <?php
   if (strpos($backtrace[0]["file"], 'watch.php') !== false){ // watch.phpのみ
@@ -41,10 +42,14 @@
   <script type="text/javascript" src="files/jquery.min.js"></script>
   <script type="text/javascript" src="files/DPlayer.min.js"></script>
   <script type="text/javascript" src="files/hls.min.js"></script>
+  <script type="text/javascript" src="files/toastr.min.js"></script>
   <?php
   if (strpos($backtrace[0]["file"], 'index.php') !== false){ // index.phpのみ
     echo '<script type="text/javascript" src="files/resize.js"></script>';
   }
+  if (strpos($backtrace[0]["file"], 'setting.php') !== false){ // setting.phpのみ
+    echo '<script type="text/javascript" src="files/resize.js"></script>';
+  }
   if (strpos($backtrace[0]["file"], 'watch.php') !== false){ // watch.phpのみ
     echo '<script type="text/javascript" src="files/watch.js"></script>';
   } else if ($ini['state'] == 'ONAir'){

diff --git a/htdocs/files/resize.js b/htdocs/files/resize.js
@@ -8,8 +8,8 @@
         // 何故か上手くいかないので6回繰り返す
         for (var i = 0; i < 8; i++){
           var WindowHeight = $(window).height() - $('#top').height();
-        var width = $('#content-wrap').width();
-          var height= $('#dplayer').width() * (9 / 16) + $('#tweet-box').height();
+          var width = $('#content-wrap').width();
+          var height= $('#dplayer').width() * (9 / 16) + 136; // $('#tweet-box').height()
           $('section').css('max-width',(width * WindowHeight) / height + "px" );
         }
       }

diff --git a/htdocs/files/script.js b/htdocs/files/script.js
@@ -38,7 +38,7 @@
         dataType: "json",
         cache: false,
         success: function(data) {
-				  $("#watchnow").text(data["watchnow"] + '人が視聴中');
+	        $("#watchnow").text(data["watchnow"] + '人が視聴中');
         }
       });
       return status;
@@ -65,6 +65,18 @@
         success: function(data) {
 
           // 結果をHTMLにぶち込む
+
+          // 状態を隠しHTMLに書き出して変化してたらリロードする
+          if ((data['info']['status'] != $("#status").text()) && $("#status").text() != ''){
+            // location.reload(true);
+            // ストリームを読み込みし直す
+            var video = $('.dplayer-video-current').get(0);
+            video.src = 'stream/stream.m3u8';
+            dp.initVideo(video, 'hls');
+            dp.play();
+          }
+          $("#status").text(data['info']['status']);
+          console.log('status: ' + data['info']['status']);
 
           if (data['info']['state'] == 'ONAir'){
 
@@ -111,7 +123,7 @@
         }
       });
       return status;
-    }()),5000);
+    }()), 2000);
 
     // Zenzawatchのコードより一部改変した上で使わせて頂いています
     // 参考

diff --git a/htdocs/files/style.css b/htdocs/files/style.css
@@ -518,13 +518,29 @@ td {
     margin-left: 8px;
 }
 
+#dplayer-box {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: 56.25%;
+}
+
 #dplayer {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
     background-color: #000000;
 }
 
 @media (max-width: 500px){
 
+    #dplayer-box {
+        height: auto;
+        padding-top: 0px;
+    }
+
     #dplayer {
         position: sticky;
         position: -webkit-sticky;
@@ -852,7 +868,11 @@ td {
 }
 
 .chinfo {
-    display:inline-block;
+    display: inline-block;
+}
+
+#status {
+    display: none;
 }
 
 .subinfo {

diff --git a/htdocs/files/toastr.min.css b/htdocs/files/toastr.min.css
diff --git a/htdocs/files/toastr.min.js b/htdocs/files/toastr.min.js
diff --git a/htdocs/files/watch.js b/htdocs/files/watch.js
@@ -3,6 +3,25 @@ $(function(){
   // 最初に表示させる
   sortFileinfo('fileinfo', 1);
 
+  // トーストのオプション
+  toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": false,
+    "progressBar": false,
+    "positionClass": "toast-bottom-left",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "200",
+    "hideDuration": "200",
+    "timeOut": "3000",
+    "extendedTimeOut": "1000",
+    "showEasing": "linear",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+  }
+
   // データを取得して引数にあわせてソートする関数
   function sortFileinfo(json, sortnum, flg = true){
 
@@ -152,8 +171,8 @@ $(function(){
   });
 
   // リスト更新
-  $('#searchfile').click(function(event){
-    alert('更新中です…');
+  $('#searchfile').click(function(event){ 	
+    toastr.info('更新中です…');
     $('#menu-content').removeClass('open');
     $.ajax({
       url: "api/searchfile.php",
@@ -166,7 +185,7 @@ $(function(){
         $('#name-down').removeClass('search-find-selected');
         $('#play-history').removeClass('search-find-selected');
         sortFileinfo('fileinfo', 1);
-        alert('リストを更新しました。');
+        toastr.info('リストを更新しました。');
       }
     });
   });

diff --git a/htdocs/index.php b/htdocs/index.php
@@ -33,8 +33,9 @@
   <section id="main">
     <div id="content-wrap">
       <div id="content">
-        <div id="dplayer"></div>
-        <script id="dplayer-script">
+        <div id="dplayer-box">
+          <div id="dplayer"></div>
+          <script id="dplayer-script">
 
   const dp = new DPlayer({
     container: document.getElementById('dplayer'),
@@ -74,7 +75,8 @@
   dp.seek(1);
 <?php	} //括弧終了 ?>
 
-    </script>
+          </script>
+        </div>
 
         <div id="tweet-box">
           <div id="tweet-info">
@@ -147,6 +149,7 @@
 <?php	if ($ini['state'] == "ONAir"){ ?>
             <div class="chinfo"> 
               <span id="state" style="color: #007cff;">● ON Air</span>
+              <span id="status"></span>
               <span id="channel"><?php echo $channel; ?></span>
             </div>
             <span class="livetime">
@@ -155,13 +158,15 @@
 <?php	} else if ($ini['state'] == "Offline") { ?>
             <div class="chinfo">
               <span id="state" style="color: gray;">● Offline</span>
+              <span id="status"></span>
             </div>
             <span class="livetime">
               <span id="starttime"></span><span id="to"></span><span id="endtime"></span>
             </span>
 <?php	} else if ($ini['state'] == "File") { ?>
             <div class="chinfo"> 
               <span id="state" style="color: #4ECDC4;">● File</span>
+              <span id="status"></span>
               <span id="channel"><?php echo $ini['filechannel']; ?></span>
             </div>
             <span class="livetime"><?php echo $ini['filetime']; ?></span>

diff --git a/htdocs/setting.php b/htdocs/setting.php
@@ -149,8 +149,9 @@
   <section id="main">
     <div id="content-wrap">
       <div id="content">
-        <div id="dplayer"></div>
-        <script id="dplayer-script">
+        <div id="dplayer-box">
+          <div id="dplayer"></div>
+          <script id="dplayer-script">
 
   const dp = new DPlayer({
     container: document.getElementById('dplayer'),
@@ -190,7 +191,8 @@
   dp.seek(1);
 <?php	} //括弧終了 ?>
 
-        </script>
+          </script>
+        </div>
       </div>
 
       <div id="sidebar">