开发...

2023-11-29 09:46:09 +00:00
parent 6b8eafe5f5
commit d07d13151a
31 changed files with 920 additions and 665 deletions
--- a/web/statics/css/index.css
+++ b/web/statics/css/index.css
@@ -0,0 +1,83 @@
+@charset "utf-8";
+
+.flex {
+    display: flex;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.justify-content {
+    justify-content: center;
+}
+
+.align-items {
+    align-items: center;
+}
+
+.navbar-wh {
+    padding: 0.2rem 1.6rem;
+    border-bottom: 1px solid rgba(0,0,0,.12);
+}
+
+.navbar-brand-fs {
+    font-size: 1rem;
+}
+
+.logo {
+    width: 2.2rem;
+    height: 2.2rem;
+    fill: currentColor;
+    /* color: #f44336; */
+    color: #007bff;
+}
+
+.oauth {
+    align-items: center;
+    list-style-type: none;
+    height: 40px;
+    margin-bottom: 0;
+}
+
+.oauth li {
+    margin-left: 10px;
+}
+
+.main {
+    max-width: 1280px;
+    width: 100%;
+    padding-bottom: 60px;
+}
+
+.tip-box {
+    width: 100%;
+    background-color: rgb(229, 246, 253);
+    padding: 1rem;
+    border-radius: 3px;
+    display: flex;
+    margin-top: 10px;
+}
+
+.tip-box .tip-icon {
+    width: 24px;
+    margin-right: 12px;
+}
+
+.tip-box .tip-icon svg{
+    fill: currentColor;
+    color: #007bff;
+}
+
+.tip-box .tip-info p {
+    letter-spacing: 0.00938em;
+    font-size: 13px;
+    font-weight: 400;
+    color:rgb(1, 67, 97);
+    margin-bottom: 0;
+    line-height: 24px;
+}
--- a/web/statics/favicon.ico
+++ b/web/statics/favicon.ico
--- a/web/templates/base/footer.html.tmpl
+++ b/web/templates/base/footer.html.tmpl
@@ -9,7 +9,7 @@
  </head>
  <body>
    <div class="wrapper"> -->
-{{define "footer" }}
+{{define "footer"}}
    </div>
    <script src="/statics/js/jquery.slim.min.js"></script>
    <script src="/statics/js/bootstrap.bundle.min.js"></script>
--- a/web/templates/base/header.html.tmpl
+++ b/web/templates/base/header.html.tmpl
@@ -1,27 +1,41 @@
-{{define "header" }}
+{{define "header"}}
 <!doctype html>
 <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="shortcut icon" href="/statics/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/statics/css/bootstrap.min.css" />
-    <title>HLS流媒体</title>
+    <link rel="stylesheet" href="/statics/css/index.css" />
    {{block "css" .}}{{end}}
+    <title>HLS流媒体</title>
  </head>
  <body>
    <div class="wrapper">
-        <nav class="navbar navbar-light bg-light">
-            <a class="navbar-brand" href="/">
-                <img src="/statics/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="HLS流媒体">
+        <nav class="navbar navbar-light bg-light navbar-wh">
+            <a class="navbar-brand navbar-brand-fs" href="/">
+                <!-- <img src="/statics/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="HLS流媒体"> -->
+                <svg class="logo" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="HLS流媒体">
+                  <path d="M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"></path>
+                </svg>
                HLS流媒体
            </a>
-            <ul>
+            <ul class="flex oauth">
+                {{if .AuthID}}
                <li>
-                    <a href="/login">登录</a>
+                    欢迎您: {{.AuthName}}
                </li>
                <li>
-                    <a href="/register">注册</a>
+                    <a href="/logout" class="btn btn-primary btn-sm">退出</a>
                </li>
+                {{else}}
+                <li>
+                    <a href="/login" class="btn btn-outline-primary btn-sm">登录</a>
+                </li>
+                <li>
+                    <a href="/register" class="btn btn-primary btn-sm">注册</a>
+                </li>
+                {{end}}
            </ul>
        </nav>
 {{end}}
--- a/web/templates/home.html.tmpl
+++ b/web/templates/home.html.tmpl
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="zh-CN">

 <head>
@@ -39,4 +39,13 @@
    </script>
 </body>

-</html>
+</html> -->
+
+{{template "header" .}}
+<div class="container-fluid flex justify-content">
+    <div class="main">
+        <h3 style="margin-top: 20px;margin-bottom: 10px;">视频列表</h3>
+        
+    </div>
+</div>
+{{template "footer" .}}
--- a/web/templates/me/upload.html.tmpl
+++ b/web/templates/me/upload.html.tmpl
@@ -0,0 +1,9 @@
+{{template "header" .}}
+<div class="container">
+    <form id="form" enctype="multipart/form-data" action="/upload" method="POST">
+        <label for="avatar">请选择文件:</label><br>
+        <input type="file" id="file" name="file" /><br>
+        <button class="button" type="submit">提交</button>
+    </form>
+</div>
+{{template "footer" .}}
--- a/web/templates/upload.html.tmpl
+++ b/web/templates/upload.html.tmpl
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="utf-8">
-    <title>上传 - HLS流视频</title>
-    <style>
-        .container{
-            width: 640px;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <form id="form" enctype="multipart/form-data" action="/upload" method="POST">
-            <label for="avatar">请选择文件:</label><br>
-            <input type="file" id="file" name="file" /><br>
-            <button class="button" type="submit">提交</button>
-        </form>
-    </div>
-</body>
-
-</html>
--- a/web/templates/user/login.html.tmpl
+++ b/web/templates/user/login.html.tmpl
@@ -1,3 +1,31 @@
 {{template "header" .}}
-<h1>登录页面</h1>
+<div class="container">
+    <div class="flex flex-column align-items row py-md-5">
+      <h1>登录</h1>
+      <div class="col-sm-5 py-md-5">
+        <form action="/login" method="post">
+            <div class="form-group">
+                <label for="email">邮箱</label>
+                <input type="email" name="email" class="form-control" required id="email" value="{{.Email}}" aria-describedby="emailValid">
+                {{if .EmailErr}}
+                <small id="emailValid" style="color: #f44336;" class="form-text">{{.EmailErr}}</small>
+                {{end}}
+            </div>
+            <div class="form-group">
+                <label for="password">密码</label>
+                <input type="password" name="password" class="form-control" required id="password" value="{{.Password}}" aria-describedby="passwordValid">
+                {{if .PasswordErr}}
+                <small id="passwordValid" style="color: #f44336;" class="form-text">{{.PasswordErr}}</small>
+                {{end}}
+            </div>
+            <button type="submit" class="btn btn-primary">提交</button>
+        </form>
+        {{if .Summary}}
+        <div class="py-md-5" style="color: #f44336;">
+            {{.Summary}}
+        </div>
+        {{end}}
+      </div>
+    </div>
+  </div>
 {{template "footer" .}}
--- a/web/templates/user/register.html.tmpl
+++ b/web/templates/user/register.html.tmpl
@@ -1,3 +1,38 @@
 {{template "header" .}}
-<h1>注册页面</h1>
+<div class="container">
+    <div class="flex flex-column align-items row py-md-5">
+      <h1>注册</h1>
+      <div class="col-sm-5 py-md-5">
+        <form action="/register" method="post">
+            <div class="form-group">
+                <label for="email">邮箱</label>
+                <input type="email" name="email" class="form-control" required id="email" value="{{.Email}}" aria-describedby="emailValid">
+                {{if .EmailErr}}
+                <small id="emailValid" style="color: #f44336;" class="form-text">{{.EmailErr}}</small>
+                {{end}}
+            </div>
+            <div class="form-group">
+                <label for="username">名称</label>
+                <input type="text" name="username" class="form-control" required id="username" value="{{.Username}}" style="width: 100%;" aria-describedby="usernameValid">
+                {{if .UsernameErr}}
+                <small id="usernameValid" style="color: #f44336;" class="form-text">{{.UsernameErr}}</small>
+                {{end}}
+            </div>
+            <div class="form-group">
+                <label for="password">密码</label>
+                <input type="password" name="password" class="form-control" required id="password" value="{{.Password}}" aria-describedby="passwordValid">
+                {{if .PasswordErr}}
+                <small id="passwordValid" style="color: #f44336;" class="form-text">{{.PasswordErr}}</small>
+                {{end}}
+            </div>
+            <button type="submit" class="btn btn-primary">提交</button>
+        </form>
+        {{if .Summary}}
+        <div class="py-md-5" style="color: #f44336;">
+            {{.Summary}}
+        </div>
+        {{end}}
+      </div>
+    </div>
+  </div>
 {{template "footer" .}}
--- a/web/templates/video/play.html.tmpl
+++ b/web/templates/video/play.html.tmpl
@@ -0,0 +1,38 @@
+{{template "header" .}}
+<div class="container-fluid flex justify-content">
+    <div class="main">
+        <h6 style="margin-top: 20px;margin-bottom: 10px;">正在播放 &lt;&lt;Git - Div Rhino&gt;&gt;</h6>
+        <video id="video" controls width="100%"></video>
+        <div class="tip-box">
+            <div class="tip-icon">
+                <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="InfoOutlinedIcon">
+                    <path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"></path>
+                </svg>
+            </div>
+            <div class="tip-info">
+                <p>空格键播放/暂停，上下箭头调整音量，左右箭头调整播放进度。播放器顶部停止按钮可以关闭播放器，回到详情页面。</p>
+                <p>如果播放遇到问题，请尝试切换播放源。</p>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="/statics/js/hls.min.js"></script>
+<script>
+    var video = document.getElementById('video');
+    if(Hls.isSupported()) {
+        console.log("supported");
+        var hls = new Hls();
+        hls.loadSource('{{.Url}}');
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED,function() {
+            //video.play();
+        });
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        console.log("no supported");
+        video.src = '{{.Url}}';
+        video.addEventListener('loadedmetadata',function() {
+            //video.play();
+        });
+    }
+</script>
+{{template "footer" .}}