From 64a6e2dbeff6693357a4677d12badfcfe1544c99 Mon Sep 17 00:00:00 2001
From: liuboaibc <kukudehero@gmail.com>
Date: Wed, 26 May 2021 11:30:58 +0800
Subject: [PATCH] update live

Signed-off-by: liuboaibc <kukudehero@gmail.com>
---
 assets/scss/live-detail.scss | 24 ++++++++++++++++++++++++
 i18n/zh.yaml                 |  2 ++
 layouts/live/single.html     | 14 ++++++++++++--
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/assets/scss/live-detail.scss b/assets/scss/live-detail.scss
index a7ed7427c..eeb4eaaef 100644
--- a/assets/scss/live-detail.scss
+++ b/assets/scss/live-detail.scss
@@ -58,6 +58,30 @@ header.navigation {
       padding: 20px;
     }
 
+    .live-div {
+      position: relative;
+      img {
+        width: 100%;
+      }
+      button {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 10px 20px;
+        border-radius: 28px;
+        font-size: 16px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+        background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+
     .video-div {
       position: relative;
       margin-bottom:  24px;
diff --git a/i18n/zh.yaml b/i18n/zh.yaml
index 6fed212f4..a4cde522f 100644
--- a/i18n/zh.yaml
+++ b/i18n/zh.yaml
@@ -84,6 +84,8 @@
   translation: 全部
 - id: Watch replay
   translation: 观看回放
+- id: Watch live
+  translation: 观看直播
 - id: View details
   translation: 了解详情
 - id: Course theme
diff --git a/layouts/live/single.html b/layouts/live/single.html
index a7d3ef6a9..f7f920453 100644
--- a/layouts/live/single.html
+++ b/layouts/live/single.html
@@ -4,6 +4,16 @@
     <div>
       {{ with .Params.section1 }}
 
+      {{ if .liveUrl }}
+      <div class="live-div">
+        <a href="{{ .liveUrl }}" target="_blank">
+          <img src="{{ .snapshot }}" alt="snapshot">
+          <button>{{ i18n "Watch live" }}</button>
+        </a>
+      </div>
+
+      {{ end }}
+
       {{ if .videoUrl }}
       <div class="video-div">
         {{ if eq .type "iframe" }}
@@ -19,9 +29,9 @@
       </div>
       {{ end }}
       <div class="time-div">
-        <img src="{{ .timeIcon }}" alt="">
+        <img src="{{ .timeIcon }}" alt="icon">
         <span>{{ .time }}</span>
-        <img src="{{ .baseIcon }}" alt="">
+        <img src="{{ .baseIcon }}" alt="icon">
         <span>{{ .base }}</span>
       </div>
       {{ end }}