release v1.2.1

tsukumijima · Oct 3, 2019 · 535eb8f · 535eb8f
1 parent 53ccad1
commit 535eb8f
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -328,14 +328,14 @@ TVRemotePlus は、PWA に対応しています。
 また、PWA は Windows・Mac・Android は Chrome 、iOS では Safari が対応しています。
 
 ### インストール手順
- - まず、PWAを利用したい端末で **http://( TVRemotePlus の動いている PC のローカル IP アドレス):8000/server.crt** にアクセスし、証明書をダウンロードします。
- - その後、ダウンロードした証明書を開き、端末にインストールします（この時、表示が「CA 証明書」になっているかどうかを確認してください）。
- - インストール後、Chrome または Safari が立ち上がっていれば一旦タスクを切ってからブラウザをもう一度起動します。
- - **https://( TVRemotePlus の動いている PC のローカル IP アドレス):8100/** にアクセスし、アドレスバーに鍵マークが正常についていれば、証明書の導入は完了です。
-   - この時に必ず https:// を付けてアクセスしてください（ https:// を付けないと http:// と判定されてしまいエラーが出ます）
- - ブラウザのメニュー等から **「ホーム画面に追加」または「 TVRemotePlus をインストール」すると、ネイティブアプリのように利用できるようになるはずです。**
- - Android の場合、何故かスプラッシュ画面のアイコンが小さい場合がありますが、原因は不明です（ Chrome の自動推定のせいらしいですが…）
- - iPhone・iPad の場合、Safari であれば自己署名証明書をインストールしなくても http://( TVRemotePlus の動いている PC のローカル IP アドレス):8000/ から「ホーム画面に追加」する事でインストールできるみたいです…
+ 1. まず、PWAを利用したい端末で **http://( TVRemotePlus の動いている PC のローカル IP アドレス):8000/server.crt** にアクセスし、証明書をダウンロードします。
+ 2. その後、ダウンロードした証明書を開き、端末にインストールします（この時、表示が「CA 証明書」になっているかどうかを確認してください）。
+ 3. インストール後、Chrome または Safari が立ち上がっていれば一旦タスクを切ってからブラウザをもう一度起動します。
+ 4. **https://( TVRemotePlus の動いている PC のローカル IP アドレス):8100/** にアクセスし、アドレスバーに鍵マークが正常についていれば、証明書の導入は完了です。
+    - この時に必ず https:// を付けてアクセスしてください（ https:// を付けないと http:// と判定されてしまいエラーが出ます）
+ 5. ブラウザのメニュー等から **「ホーム画面に追加」または「 TVRemotePlus をインストール」すると、ネイティブアプリのように利用できるようになっているはずです。**
+ 6. Android の場合、何故かスプラッシュ画面のアイコンが小さい場合がありますが、原因は不明です（ Chrome の自動推定のせいらしいですが…）
+ 7. iPhone・iPad の場合、Safari であれば自己署名証明書をインストールしなくても http://( TVRemotePlus の動いている PC のローカル IP アドレス):8000/ から「ホーム画面に追加」する事でインストールできるみたいです…
 
 ## TwitterAPI 開発者アカウントの取得について
 長くなるため別ページにまとめています。  
@@ -357,16 +357,14 @@ TVRemotePlus は、PWA に対応しています。
    - 字幕自体の表示はプレイヤーの設定で切り替えられます。字幕が要らない場合はオフにしてください。
  - 配信準備中…からストリームにうまく移らない・再生が止まった などの時は、時計表示をクリック・タップしてください。リロードされます。
  - TSTask は後述の無理やり taskkill させる関係上、クライアントプログラムを起動させないオプションで起動させています。
-   - 立ち上がってるか心配な場合、タスクマネージャーで調べるか別途 TSTaskCentre を起動させるといいとおもいます。
+   - 立ち上がってるか心配な場合、タスクマネージャーで調べるか別途 TSTaskCentre を起動させるといいと思います。
    - ffmpeg・QSVEncC・NVEncC は独立ウインドウにて最小化した状態で起動します。
  - ニコニコ実況にコメントを投稿する場合、数秒遅延している事を念頭に入れた上でコメントしてください…（それほど気にならないとは思いますが…）
  - 同梱している動作に必要なソフトウェア（後述）は全て TVRemotePlus 向けに設定やフォルダ構成等を最適化してあります。
- - ストリームを終了させる際、ffmpeg・QSVEncC・NVEncC・TSTask 等を taskkill で強制終了させる雑な仕様なため、ストリーム起動時にffmpegなど別のソフトを利用している場合は突然ブッチされたりします…
-   - ストリーム配信/終了時は安全のため、同じPCにて ffmpeg 等のソフトを利用しない事をおすすめします…
 
 ## 利用ソフトウェア
 動作に必要なソフトウェアをお借りしています。この場で御礼申し上げます。  
-全て配布アーカイブの中に組み込んでいますが、一部設定が必要な箇所があります。  
+全て配布アーカイブの中に組み込んでいますが、BonDriver 周りは各自で用意し、別途 (TVRemotePlusをインストールしたフォルダ)\bin\TSTask\BonDriver\ に入れてください。
 また、QSVEncC を利用する場合は Intel QSV に対応した CPU が、NVEncC を利用する場合は NVIDIA GPU が必要です。
 
 - Apache（ v2.4.39・Webサーバ）
@@ -392,8 +390,8 @@ TVRemotePlus は、PWA に対応しています。
     - キャプチャ付きツイートの投稿機能は、**Android 版 Firefox・Mac 版 Safari では対応していません。**（ブラウザのバグによるエラーでキャプチャに失敗します）
       - 動画のキャプチャはブラウザの仕様に依存する上、ブラウザ側のバグが非常に多いため、基本的に最新の Chrome を利用してください。
     - 古い Android 端末では、コメント描画が重くなる場合があります。
-      - このため、コメント描画中にキャプチャする場合、キャプチャ画像の取得に時間がかかる場合があります。
-      - 最新の端末でも、（スペックにもよりますが）コメントが多い場合はキャプチャ画像の取得に時間がかかる場合があります。
+      - コメント描画中にキャプチャする場合、キャプチャ画像の取得に時間がかかる場合があります。
+      - 最新の端末でも、（スペックにもよりますが）コメントが多く流れているとキャプチャに少し時間がかかります。
 
 ## 動作確認
   - サーバー：Windows7 Professional 64bit + PLEX PX-Q3PE4

diff --git a/data/ch_sid.txt b/data/ch_sid.txt
@@ -20,7 +20,9 @@
 2	15	0x0C08	中京広域	ＮＨＫＥテレ名古屋
 8	15	0x0C10	中京広域	東海テレビ
 6	15	0x0C18	中京広域	ＣＢＣ
+6	15	0x0C18	中京広域	ＣＢＣテレビ
 5	15	0x0C20	中京広域	メ～テレ
+5	15	0x0C20	中京広域	メ〜テレ
 4	15	0x0C28	中京広域	中京テレビ
 6	15	0x1010	北海道域	ＨＢＣ北海道放送
 4	15	0x1018	北海道域	ＳＴＶ札幌テレビ

diff --git a/data/version.txt b/data/version.txt
@@ -1 +1 @@
-v1.2.0
+v1.2.1
diff --git a/header.php b/header.php
@@ -27,7 +27,7 @@
   <!-- Style -->
   <link rel="manifest" href="/manifest.json">
   <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css">
+  <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.11.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">

diff --git a/htdocs/files/account_default.jpg b/htdocs/files/account_default.jpg
diff --git a/htdocs/files/common.js b/htdocs/files/common.js
@@ -39,10 +39,17 @@
       $('#menu-close').removeClass('open');
     });
 
+    // セレクトボックス開閉
+    $('.select-wrap').on('mousedown', function(){
+      if (document.body.clientWidth > 1024){
+        $(this).toggleClass('open');
+      }
+    });
+
     // パスワード開閉
     $('.password-box-input').click(function(){
-      $('.password-box-input').toggleClass('fa-eye');
       $('.password-box-input').toggleClass('fa-eye-slash');
+      $('.password-box-input').toggleClass('fa-eye');
       var input = $(this).prev("input");
       // type切替
       if (input.attr("type") == "password") {
@@ -55,6 +62,10 @@
     // 上までスクロールで戻る
     $(window).scroll(function() {
 
+      // アカウント情報ボックスを非表示
+      $('#tweet-account-box').css('opacity', 0);
+      $('#tweet-account-box').css('visibility', 'hidden');
+
       // スクロール位置を取得
       var topPos = $(this).scrollTop();
 

diff --git a/htdocs/files/script.js b/htdocs/files/script.js
@@ -13,13 +13,23 @@
     } else {
       $("#tweet-status").html('<a id="tweet-login" href="/tweet/auth.php">ログイン</a>');
     }
+
+    // Twitterアカウント情報を読み込み
+    twitter = {account_name:'ログインしていません', account_id:'', account_icon:'/files/account_default.jpg'};
+    if (Cookies.get('twitter') != undefined){
+      twitter = JSON.parse(Cookies.get('twitter'));
+      $('#tweet-account-icon').attr('src', twitter['account_icon']);
+      $('#tweet-account-name').text(twitter['account_name']);
+      $('#tweet-account-name').attr('href', 'https://twitter.com/' + twitter['account_id']);
+      $('#tweet-account-id').text('@' + twitter['account_id']);
+    }
 
     // ***** 視聴数カウント・ストリーム状態把握 *****
 
     setInterval((function status(){
       $.ajax({
-        url: "/api/watchnow.php",
-        dataType: "json",
+        url: '/api/watchnow.php',
+        dataType: 'json',
         cache: false,
         success: function(data) {
 
@@ -111,8 +121,8 @@
 
     setInterval((function status(){
       $.ajax({
-        url: "/api/epgguide.php",
-        dataType: "json",
+        url: '/api/epgguide.php',
+        dataType: 'json',
         cache: false,
         success: function(data) {
 
@@ -260,6 +270,30 @@
         }
       }
     });
+
+    // アカウント情報ボックスを表示する
+    var clickEventType = ((window.ontouchstart!==null) ? 'mouseenter mouseleave' : 'touchstart');
+    $('#tweet-title').on(clickEventType, function(event) {
+      if ($('#tweet-account-box').css('visibility') === 'hidden' && (event.type === 'mouseenter' || event.type === 'touchstart')){
+        $('#tweet-account-box').css('visibility', 'visible');
+        $('#tweet-account-box').css('opacity', 1);
+        console.log('visible')
+      } else {
+        $('#tweet-account-box').css('visibility', 'hidden');
+        $('#tweet-account-box').css('opacity', 0);
+        console.log('hidden')
+      }
+    });
+
+    $('#tweet-account-box').on(clickEventType, function(event) {
+      if (event.type === 'mouseenter'){
+        $('#tweet-account-box').css('visibility', 'visible');
+        $('#tweet-account-box').css('opacity', 1);
+      } else {
+        $('#tweet-account-box').css('visibility', 'hidden');
+        $('#tweet-account-box').css('opacity', 0);
+      }
+    });
 
     // スマホの場合にTwitterだけ下にフロート表示
     $('#tweet').focusin(function(event) {
@@ -314,6 +348,10 @@
       })
       .done(function(data) {
         $("#tweet-status").html(data);
+        $('#tweet-account-icon').attr('src', '/files/account_default.jpg');
+        $('#tweet-account-name').text('ログインしていません');
+        $('#tweet-account-name').removeAttr('href');
+        $('#tweet-account-id').text('Not Login');
       })
       .fail(function(data){
         $("#tweet-status").html('<span class="tweet-failed">ログアウト中にエラーが発生しました…</span>');

diff --git a/htdocs/files/style.css b/htdocs/files/style.css
@@ -234,6 +234,7 @@ select:-moz-focusring {
     display: inline-block;
     width: 320px;
 }
+
 .select-wrap:before {
     z-index: 1;
     position: absolute;
@@ -247,6 +248,10 @@ select:-moz-focusring {
     pointer-events: none;
 }
 
+.select-wrap.open:before {
+    content: "\f077";
+}
+
 @media screen and (max-width : 500px){
     select{
         width: 100%;
@@ -947,6 +952,69 @@ td {
 
 /* ツイート関連 */
 
+#tweet-account-box {
+    display: block;
+    position: relative;
+    float: left;
+    width: 275px;
+    height: 67px;
+    left: 3vw;
+    margin-top: -65px;
+    border-radius: 10px;
+    background-color: #ffffff;
+    box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;
+    transition: 0.15s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 5;
+}
+
+#tweet-account {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#tweet-account-icon {
+    height: 100%;
+    border-radius: 20%;
+}
+
+#tweet-account-info {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-left: 15px;
+}
+
+#tweet-account-name {
+    display: block;
+    width: 190px;
+    color: #272727;
+    font-weight: bold;
+    font-size: 17px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+}
+
+#tweet-account-name:hover {
+    text-decoration: underline;
+}
+
+#tweet-account-id {
+    display: block;
+    width: 190px;
+    color: #657786;
+    font-size: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 #tweet-box {
     padding-left: 3vw;
     padding-right: 3vw;
@@ -992,16 +1060,20 @@ td {
 }
 
 #tweet-title {
+    display: block;
+    position: relative;
+    width: 30px;
     padding-top: 1px;
     color: #1da1f2;
     font-size: 111%;
     float: left;
-    display: block;
+    text-align: center;
+    cursor: pointer;
 }
 
 #tweet-status {
     display: block;
-    width: calc(100% - 25px);
+    width: calc(100% - 30px);
     color: #1da1f2;
     float: right;
     text-align: right;

diff --git a/htdocs/index.php b/htdocs/index.php
@@ -79,9 +79,21 @@
           </script>
         </div>
 
+        <div id="tweet-account-box">
+          <div id="tweet-account">
+            <img id="tweet-account-icon" src="/files/account_default.jpg">
+            <div id="tweet-account-info">
+              <a id="tweet-account-name" target="_blank">ログインしていません</a>
+              <div id="tweet-account-id">Not Login</div>
+            </div>
+          </div>
+        </div>
+
         <div id="tweet-box">
           <div id="tweet-info">
-            <div id="tweet-title"><i class="fab fa-twitter"></i></div>
+            <div id="tweet-title">
+              <i class="fab fa-twitter"></i>
+            </div>
             <div id="tweet-status"></div>
           </div>
           <form id="tweet-form" action="javascript:void(0)">

diff --git a/htdocs/setting.php b/htdocs/setting.php
@@ -264,7 +264,7 @@
 
             <p>個人設定はブラウザ・端末ごとに反映されます。</p>
 
-            <h4><i class="fas fa-eye"></i>表示</h4>
+            <h4><i class="fas fa-eye-slash"></i>表示</h4>
 
             <div class="setting-form">
               <span>Twitter 投稿フォーム</span>
@@ -642,7 +642,7 @@
               </div>
               <div class="password-box-wrap">
                 <input class="password-box" name="nicologin_password" type="password" value="<?php echo $nicologin_password; ?>" placeholder="password" />
-                <i class="password-box-input fas fa-eye"></i>
+                <i class="password-box-input fas fa-eye-slash"></i>
               </div>
             </div>
 
@@ -755,7 +755,7 @@
               </div>
               <div class="password-box-wrap">
                 <input class="password-box" name="basicauth_password" type="password" value="<?php echo $basicauth_password; ?>" placeholder="12345678" required />
-                <i class="password-box-input fas fa-eye"></i>
+                <i class="password-box-input fas fa-eye-slash"></i>
               </div>
             </div>
 

diff --git a/htdocs/tweet/callback.php b/htdocs/tweet/callback.php
@@ -27,11 +27,25 @@
 		$connection = new TwitterOAuth($CONSUMER_KEY, $CONSUMER_SECRET, $_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
 
 		// APIのアクセスに必要なトークンを取得
-		$access_token = $connection->oauth("oauth/access_token", array("oauth_verifier" => $_REQUEST['oauth_verifier']));
+		$access_token = $connection->oauth('oauth/access_token', array('oauth_verifier' => $_REQUEST['oauth_verifier']));
 
 		// セッション関数に入れておいたコールバック用トークンを差し替える
-		$_SESSION['oauth_token'] = $access_token["oauth_token"];
-		$_SESSION['oauth_token_secret'] = $access_token["oauth_token_secret"];
+		$_SESSION['oauth_token'] = $access_token['oauth_token'];
+		$_SESSION['oauth_token_secret'] = $access_token['oauth_token_secret'];
+
+		// 取得したトークンでもう一度接続
+		$_connection = new TwitterOAuth($CONSUMER_KEY, $CONSUMER_SECRET, $_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
+
+		// 情報取得
+		$info = $_connection->get("account/verify_credentials");
+
+		// アカウント情報をCookieに登録しておく
+		$cookie = json_encode(array(
+			'account_name' => $info->name,
+			'account_id' => $info->screen_name,
+			'account_icon' => str_replace('_normal', '', $info->profile_image_url_https),
+		), JSON_UNESCAPED_UNICODE);
+		setcookie('twitter', $cookie, time() + 7776000, '/');
 
 		// トップページにリダイレクト
 		header('Location: '.$BASEURL);

diff --git a/htdocs/tweet/logout.php b/htdocs/tweet/logout.php
@@ -27,6 +27,9 @@
 		setcookie(session_name(), '', time()-42000, '/'); //Cookieを削除
 	}
 
+	// アカウント情報が入ったCookieを削除
+	setcookie('twitter', '', -1, '/');
+
 	// 最終的に、セッションを破壊する
 	session_destroy();