From 56b7092944a77ed8e39a267b5fe693d0bf0154fa Mon Sep 17 00:00:00 2001
From: Janne Hamalainen <janne.a.hamalainen@gmail.com>
Date: Tue, 2 Feb 2021 20:11:47 +0200
Subject: [PATCH] Improvement for tips/hint support

Added tip for settings, mute and layer pause/play buttons. Added new localization string for settings for all
languages. Japanese and Chinese strings translated with google. Tips banner is shown on a bit lower position on
dashboard so that it wont be hidden e.g. by the volume control.
---
 src/dashboard/settings.vue      | 1 +
 src/dashboard/volume.vue        | 2 ++
 src/lang/en.json                | 3 ++-
 src/lang/jp.json                | 3 ++-
 src/lang/zh-cn.json             | 3 ++-
 src/layers/play-pause-layer.vue | 2 ++
 src/style/common.less           | 9 +++++++--
 7 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/dashboard/settings.vue b/src/dashboard/settings.vue
index bb8b0d6..f812fca 100644
--- a/src/dashboard/settings.vue
+++ b/src/dashboard/settings.vue
@@ -2,6 +2,7 @@
   <div class="vue-core-video-player-control settings-control">
     <div class="btn-control btn-settings" @click="toggle">
       <svg xmlns="http://www.w3.org/2000/svg" width="31.971" height="31.971" viewBox="0 0 31.971 31.971"><g data-name="7" transform="translate(6.985 6.985)" fill="none" stroke="#fff" stroke-width="5"><circle cx="9" cy="9" r="9" stroke="none"/><circle cx="9" cy="9" r="6.5"/></g><g data-name="15 10" fill="#fff"><g data-name="14 1"><g data-name="13 1"><path data-name="17" d="M13.985 3.985h4v3h-4z"/><path data-name="4" d="M15.985 3.985l3 4h-6z"/></g><g data-name="13 2"><path data-name="17" d="M17.985 27.985h-4v-3h4z"/><path data-name="4" d="M15.985 27.985l-3-4h6z"/></g></g><g data-name="14 2"><g data-name="13 1"><path data-name="17" d="M23.056 6.085l2.829 2.829-2.122 2.12-2.828-2.828z"/><path data-name="4" d="M24.47 7.5l-.707 4.95-4.242-4.244z"/></g><g data-name="13 2"><path data-name="17" d="M8.914 25.884l-2.828-2.828 2.12-2.122 2.83 2.829z"/><path data-name="4" d="M7.5 24.47l.707-4.95 4.243 4.243z"/></g></g></g><g data-name="15 11" fill="#fff"><g data-name="14 1"><g data-name="13 1"><path data-name="17" d="M23.056 6.086l2.828 2.828-2.12 2.122-2.83-2.829z"/><path data-name="4" d="M24.47 7.5l-.707 4.95-4.242-4.243z"/></g><g data-name="13 2"><path data-name="17" d="M8.914 25.885l-2.828-2.828 2.12-2.122 2.83 2.829z"/><path data-name="4" d="M7.5 24.47l.707-4.949 4.242 4.243z"/></g></g><g data-name="14 2"><g data-name="13 1"><path data-name="17" d="M27.985 13.985v4h-3v-4z"/><path data-name="4" d="M27.985 15.985l-4 3v-6z"/></g><g data-name="13 2"><path data-name="17" d="M3.985 17.985v-4h3v4z"/><path data-name="4" d="M3.985 15.985l4-3v6z"/></g></g></g><g data-name="15 12" fill="#fff"><g data-name="14 1"><g data-name="13 1"><path data-name="17" d="M27.985 13.985v4h-3v-4z"/><path data-name="4" d="M27.985 15.985l-4 3v-6z"/></g><g data-name="13 2"><path data-name="17" d="M3.985 17.985v-4h3v4z"/><path data-name="4" d="M3.985 15.985l4-3v6z"/></g></g><g data-name="14 2"><g data-name="13 1"><path data-name="17" d="M25.885 23.056l-2.829 2.829-2.12-2.122 2.828-2.828z"/><path data-name="4" d="M24.47 24.47l-4.95-.707 4.244-4.242z"/></g><g data-name="13 2"><path data-name="17" d="M6.086 8.914l2.828-2.828 2.122 2.12-2.829 2.83z"/><path data-name="4" d="M7.5 7.5l4.95.707-4.243 4.243z"/></g></g></g></svg>
+      <div class="tips">{{$t('dashboard.btn.settings')}}</div>
     </div>
     <div class="btn-control-panel" @click="preventHide" v-show="panelShow">
       <ul class="current-panel" v-show="currentPanel">
diff --git a/src/dashboard/volume.vue b/src/dashboard/volume.vue
index 8cf8621..3baa008 100644
--- a/src/dashboard/volume.vue
+++ b/src/dashboard/volume.vue
@@ -2,9 +2,11 @@
   <div class="vue-core-video-player-control volume-control">
     <div class="btn-control btn-volume" v-if="!isMuted" @click="toggle">
       <svg xmlns="http://www.w3.org/2000/svg" width="23.542" height="23" viewBox="0 0 23.542 23"><path data-name="15" fill="#fff" d="M0 5.5h7v12H0z"/><path data-name="3" d="M.5 11.5L12.5 0v23z" fill="#fff"/><g data-name="12 1" fill="none" stroke="#fff" stroke-width="1.5"><path data-name="2" d="M15.787 8.349a2.89 2.89 0 0 1 3.04 3.126 2.763 2.763 0 0 1-3.142 2.833" stroke-width="1.50021"/><path data-name="3" d="M16.052 4.807s6.917-.147 6.61 6.796-6.83 6.16-6.83 6.16" stroke-width="1.50021"/></g></svg>
+      <div class="tips">{{$t('dashboard.btn.mute')}}</div>
     </div>
     <div class="btn-control btn-mute" v-if="isMuted" @click="toggle">
       <svg xmlns="http://www.w3.org/2000/svg" width="24.485" height="23" viewBox="0 0 24.485 23"><g fill="#fff"><path data-name="矩形 15" d="M0 5.5h7v12H0z"/><path data-name="多边形 3" d="M.5 11.5L12.5 0v23z"/><g data-name="组 3"><path data-name="矩形 39" d="M23.071 7.257l1.414 1.414-7.07 7.071L16 14.328z"/><path data-name="矩形 40" d="M16 8.672l1.414-1.414 7.071 7.07-1.414 1.415z"/></g></g></svg>
+      <div class="tips">{{$t('dashboard.btn.unmute')}}</div>
     </div>
 
     <div class="btn-control-panel">
diff --git a/src/lang/en.json b/src/lang/en.json
index caea9b5..d9ad92b 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -8,7 +8,8 @@
       "mute": "Mute",
       "unmute": "Unmute",
       "back": "Back",
-      "pip": "Picture-in-Picture"
+      "pip": "Picture-in-Picture",
+      "settings": "Settings"
     },
     "settings" : {
       "autoplay": "Autoplay",
diff --git a/src/lang/jp.json b/src/lang/jp.json
index 148e87e..1f87c5d 100644
--- a/src/lang/jp.json
+++ b/src/lang/jp.json
@@ -8,7 +8,8 @@
       "mute": "ミュート",
       "unmute": "ミュートを解除",
       "back": "戻る",
-      "pip": "ピクチャインピクチャ"
+      "pip": "ピクチャインピクチャ",
+      "settings": "設定"
     },
     "settings" : {
       "autoplay": "自動再生",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 838854c..387c3ce 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -8,7 +8,8 @@
       "mute": "静音",
       "unmute": "取消静音",
       "back": "返回",
-      "pip": "画中画模式"
+      "pip": "画中画模式",
+      "settings": "设置"
     },
     "settings" : {
       "autoplay": "自动播放",
diff --git a/src/layers/play-pause-layer.vue b/src/layers/play-pause-layer.vue
index 9189cf6..f618c31 100644
--- a/src/layers/play-pause-layer.vue
+++ b/src/layers/play-pause-layer.vue
@@ -2,9 +2,11 @@
   <div class="vcp-layer play-pause-layer" v-show="show">
     <a href="javascript:;" v-if="!isPlaying" class="btn-control btn-play" @click="play">
       <svg xmlns="http://www.w3.org/2000/svg" width="31" height="35" viewBox="0 0 41 47"><path d="M23.5,0,47,41H0Z" transform="translate(41) rotate(90)" fill="#ff6060"/></svg>
+      <div class="tips tips--loose">{{$t('dashboard.btn.play')}}</div>
     </a>
     <a href="javascript:;" v-if="isPlaying" class="btn-control btn-pause" @click="pause">
       <svg xmlns="http://www.w3.org/2000/svg" width="27" height="36" viewBox="0 0 36 48"><g transform="translate(-950 -398)"><rect width="12" height="48" transform="translate(950 398)" fill="#ff6060"/><rect width="12" height="48" transform="translate(974 398)" fill="#ff6060"/></g></svg>
+      <div class="tips tips--loose">{{$t('dashboard.btn.pause')}}</div>
     </a>
   </div>
 </template>
diff --git a/src/style/common.less b/src/style/common.less
index ddbecc1..8245676 100644
--- a/src/style/common.less
+++ b/src/style/common.less
@@ -87,7 +87,7 @@
     min-width: 30px;
     padding: 4px;
     border-radius: 2px;
-    bottom: 54px;
+    bottom: 28px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 12px;
@@ -97,11 +97,16 @@
     text-align: center;
     line-height: 1.2;
     word-break: keep-all;
-    word-wrap: no-wrap;
+    word-wrap: normal;
     white-space: nowrap;
     opacity: 0;
     transition: opacity .15s ease-in;
   }
+
+  .tips--loose {
+    bottom: 54px;
+  }
+
   svg {
     opacity: .85;
     transition: opacity .1s ease;