Merge branch 'master' of http://git.choozmo.com:3000/choozmo/AI_Anchor_2

api/main.py

@@ -44,13 +44,14 @@ import gSlide
 import aiofiles
 import json
 import util.user
-from routers import userRoute
+from routers import userRoute, toolAvatarVoiceOnly
 #https://www.choozmo.com:8887/verify_email?code=16370312713065429 => 
 #https://video.choozmo.com/verify_email.html?code=16370312713065429
 pymysql.install_as_MySQLdb()
 
 app = FastAPI()
 app.include_router(userRoute.router)
+app.include_router(toolAvatarVoiceOnly.router)
 db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/AI_anchor?charset=utf8mb4')
 print("db loaded")
 mode = 'run'

api/routers/toolAvatarVoiceOnly.py

@@ -0,0 +1,91 @@
+from fastapi import APIRouter
+from pydantic import BaseModel
+from gtts import gTTS
+import ffmpy
+
+
+from typing import Optional
+from fastapi.staticfiles import StaticFiles
+from fastapi import FastAPI,File,Request,Response
+import util,os, math, time
+from pydantic import BaseModel
+from fastapi.templating import Jinja2Templates
+import queue
+import threading
+
+q = queue.Queue()
+router = APIRouter()
+
+class text_in(BaseModel):
+    text: str
+    lang: int #0:eng 1:zh
+    avatar: int
+dir_sound = ''
+dir_anchor = ''
+
+@router.post("/get_material/", tags=["tools"])
+async def read_users(text_in: text_in):
+    q.put(memberOfQueue(text_in))
+    x = threading.Thread(target=memberOfQueue, args=(text_in))
+    x.start()
+    return {'msg':'Pleas wait'}
+
+def memberOfQueue(text_in):
+    q.put(compose(text_in))
+
+def compose(text_in):
+    name_hash = str(time.time()).replace('.','')
+    makeMP3(name_hash,text_in.text, text_in.lang)
+    call_anchor(name_hash,text_in.avatar)
+
+def makeMP3(text_in,lang):
+    
+    if lang==0:
+        tts = gTTS(txt)
+        tts.save(dir_sound+name_hash+"raw.mp3")
+    else:
+        tts = gTTS(txt,lang='zh-tw')
+        tts.save(dir_sound+name_hash+"raw.mp3")
+            #speed up 
+    ff = ffmpy.FFmpeg(inputs={dir_sound+name_hash+"raw.mp3": None}
+                            , outputs={dir_sound+name_hash+".mp3": ["-filter:a", "atempo=1.2"]})
+    ff.run()
+    os.remove(dir_sound+name_hash+"/raw.mp3")
+
+
+def call_anchor(name_hash,avatar):
+    conn = rpyc.classic.connect("192.168.1.111",18812)
+    ros = conn.modules.os 
+    rsys = conn.modules.sys 
+    fr=open(dir_sound+name_hash+".mp3",'rb')# voice
+    #warning!!!    file my be replaced by other process
+    fw=conn.builtins.open('/tmp/output.mp3','wb')
+
+    while True:
+        b=fr.read(1024)
+        if b:
+            fw.write(b)
+        else:
+            break
+    fr.close()
+    fw.close()
+    val=random.randint(1000000,9999999)
+    ros.chdir('/home/jared/to_video')
+    ros.system('./p'+str(avatar)+'.sh '+str(val)+' &')
+    while True:
+        print('waiting...')
+        if ros.path.exists('/tmp/results/'+str(val)):
+            break
+        time.sleep(5)
+        print('waiting...')
+
+    fr=conn.builtins.open('/tmp/results/'+str(val)+'.mp4','rb')
+    fw=open(dir_anchor+name_hash+".mp4",'wb')
+    while True:
+        b=fr.read(1024)
+        if b:
+            fw.write(b)
+        else:
+            break
+    fr.close()
+    fw.close()

html/index.html

@@ -23,7 +23,6 @@
     <link rel="stylesheet" href="static/scss/style.css">
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <div id="fb-root"></div>
-
     <!-- Google Tag Manager -->
     <script>(function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -68,7 +67,7 @@
                                     onclick="changeLan(this)" value="en">English</button></li>
                             <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
                                     onclick="changeLan(this)" value="zh">中文</button></li>
-                        </ul> -->
+                        </ul> <div></div>-->
                     </li>
                     <div id="lang-manu">
                         <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto"

html/index_eng.html

@@ -124,11 +124,16 @@
                   <lan set-lan="html:user_profile">User Profile</lan>
                 </li>
               </a>
-              <li class="nav-list-item pb-1 text-start ps-3" data-bs-toggle="modal" data-bs-target="#history"
+              <li class="nav-list-item pb-1 text-start ps-3 mb-3" data-bs-toggle="modal" data-bs-target="#history"
                 onclick="openNav()">
                 <i class="fas fa-history me-2"></i>
                 <lan set-lan="html:history">History</lan>
               </li>
+              <li class="nav-list-item pb-1 ps-3 text-start" data-bs-toggle="modal" data-bs-target="#draftModal"
+                onclick="openDrafts()">
+                <i class="fas fa-pencil-ruler me-2"></i>
+                <lan set-lan="html:drafts"></lan>
+              </li>
               <div class="Mobile-nav">
                 <hr>
                 <li class="nav-item text-start">
@@ -338,6 +343,36 @@
         </div>
       </div>
     </div>
+    <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:drafts">草稿夾</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <div class="modal-terms">
+                      <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                      <div class="draft-table col-12 d-block" id="draft-table">
+                          <div class="card p-3 text-center">
+                              <table class="table text-center">
+                                  <thead>
+                                      <tr>
+                                      <th scope="col" set-lan="html:video_title">標題</th>
+                                      <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                      </tr>
+                                  </thead>
+                                  <tbody class="draft-content">
+
+                                  </tbody>
+                              </table>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
   </div>
 
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
@@ -349,6 +384,7 @@
     integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
     crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+  <script src="static/loading-overlay.js"></script>
   <script type="text/javascript" src="static/lan.js"></script>
   <script src="static/common.js"></script>
   <script src="script_eng.js"></script>

html/make_video2.html

@@ -171,11 +171,16 @@
                                     <lan set-lan="html:user_profile">會員資料</lan>
                                 </li>
                             </a>
-                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history"
+                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#history"
                                 onclick="openNav()">
                                 <i class="fas fa-history me-2"></i>
                                 <lan set-lan="html:history">歷史紀錄</lan>
                             </li>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></lan>
+                                </li>
                             <div class="Mobile-nav">
                                 <hr>
                               
@@ -445,6 +450,36 @@
                     </div>
                 </div>
             </div>
+            <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-scrollable">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:drafts">草稿夾</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="modal-terms">
+                                <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                                <div class="draft-table col-12 d-block" id="draft-table">
+                                    <div class="card p-3 text-center">
+                                        <table class="table text-center">
+                                            <thead>
+                                                <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+    
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <!-- ================================================================= -->

html/make_video_long.html

@@ -167,11 +167,16 @@
                                     <lan set-lan="html:user_profile">會員資料</lan>
                                 </li>
                             </a>
-                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history"
+                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#history"
                                 onclick="openNav()">
                                 <i class="fas fa-history me-2"></i>
                                 <lan set-lan="html:history">歷史紀錄</lan>
                             </li>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></lan>
+                            </li>
                             <div class="Mobile-nav">
                                 <hr>
 
@@ -428,6 +433,36 @@
                     </div>
                 </div>
             </div>
+            <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-scrollable">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:drafts">草稿夾</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="modal-terms">
+                                <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                                <div class="draft-table col-12 d-block" id="draft-table">
+                                    <div class="card p-3 text-center">
+                                        <table class="table text-center">
+                                            <thead>
+                                                <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+    
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <!-- ================================================================= -->
@@ -450,6 +485,7 @@
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
     <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
     <script src="./script_long.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>

html/make_video_slide.html

@@ -167,11 +167,16 @@
                                     <lan set-lan="html:user_profile">會員資料</lan>
                                 </li>
                             </a>
-                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history"
+                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#history"
                                 onclick="openNav()">
                                 <i class="fas fa-history me-2"></i>
                                 <lan set-lan="html:history">歷史紀錄</lan>
                             </li>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></lan>
+                            </li>
                             <div class="Mobile-nav">
                                 <hr>
 
@@ -390,6 +395,36 @@
                     </div>
                 </div>
             </div>
+            <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-scrollable">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:drafts">草稿夾</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="modal-terms">
+                                <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                                <div class="draft-table col-12 d-block" id="draft-table">
+                                    <div class="card p-3 text-center">
+                                        <table class="table text-center">
+                                            <thead>
+                                                <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+    
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <!-- ================================================================= -->

html/script_eng.js

@@ -82,7 +82,12 @@ var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
 var modalImg = document.querySelector("#avatarmega .modal-img");
 var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
-var card = document.getElementsByClassName('card');
+var card = document.querySelectorAll('.avatar-cards .card');
+
+var draftsModal = new bootstrap.Modal(document.getElementById('draftModal'), {
+  keyboard: false
+})
+
 card = [...card];
 avatarSelector.addEventListener('change', avatarChange);
 avatarChange();
@@ -147,6 +152,134 @@ function prepareUpload(event) {
 }
 const button = document.querySelector('.next');
 
+
+// Drafts
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+getDraft();
+function openDrafts() {
+  draftsModal.show()
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+
+function deleteDraft(id) {
+  let token = get_jwt_token();
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+    draftsModal.show();
+    avatarModal.hide();
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+// Upload
 $(".next").click(function () {
   button.setAttribute('disabled', '');
   setTimeout(function () {

html/script_long.js

@@ -78,7 +78,12 @@ var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
 var modalImg = document.querySelector("#avatarmega .modal-img");
 var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
-var card = document.getElementsByClassName('card');
+var card = document.querySelectorAll('.avatar-cards .card');
+
+var draftsModal = new bootstrap.Modal(document.getElementById('draftModal'), {
+  keyboard: false
+})
+
 card = [...card];
 // avatarSelector.addEventListener('change', avatarChange);
 // avatarChange();
@@ -109,6 +114,133 @@ function openavatarModel() {
   avatarModal.show();
 }
 
+// Drafts
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+getDraft();
+function openDrafts() {
+  draftsModal.show()
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+
+function deleteDraft(id) {
+  let token = get_jwt_token();
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+    draftsModal.show();
+    avatarModal.hide();
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+// Upload
 $('input[type=file]').on('change', prepareUpload);
 function prepareUpload(event) {
   files = event.target.files;

html/script_profile.js

@@ -49,24 +49,6 @@ function renderView() {
     if(!token) {
         window.location.replace("login.html");
     }
-    JsLoadingOverlay.show({
-      "overlayBackgroundColor": "#666666",
-      "overlayOpacity": 1,
-      "spinnerIcon": "ball-circus",
-      "spinnerColor": "#000",
-      "spinnerSize": "3x",
-      "overlayIDName": "overlay",
-      "spinnerIDName": "spinner",
-      "offsetX": 0,
-      "offsetY": 0,
-      "containerID": null,
-      "lockScroll": false,
-      "overlayZIndex": 99,
-      "spinnerZIndex": 100
-    });
-    window.setTimeout(function () {
-      JsLoadingOverlay.hide()
-    }, 2000)
     axios({
         method: 'post',
         url: 'https://www.choozmo.com:8887/user_profile',
@@ -228,6 +210,12 @@ function getDraft() {
     let result = [...res.data];
     let str = '';
     let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
     if(result.length > 0){
       for(let i = 0;i < result.length; i++) {
         draftStr += `<tr>
@@ -244,12 +232,7 @@ function getDraft() {
       }
       let titleTxt = '標題';
       let editTxt = '編輯';
-      let nodraftTxt = '目前沒有草稿喔';
-      if(lan == 'en') {
-        titleTxt = 'Video Title';
-        editTxt = 'Edit';
-        nodraftTxt = 'no_draft';
-      }
+      
       str = `<table class="table text-center">
       <thead>
         <tr>
@@ -360,6 +343,13 @@ function openNav() {
   });
 }
 
+function openDrafts() {
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
 function direct(id) {
     location.href = `make_video2.html?id=${id}`;
 }

html/static/lan.js

@@ -109,7 +109,7 @@ var zh = {
     "refill": "我要加值",
     "Createsthtoday": "今天要做甚麼影片呢?",
     "date": "日期",
-    "video_duration": "影片時間",
+    "video_duration": "影片時間 / 秒",
     "slide_link": "SLIDE 連結",
     "new_pwd": "新密碼",
     "confirm_pwd": "驗證碼",
@@ -223,7 +223,7 @@ var en = {
     "refill": "Refill",
     "Createsthtoday": "Create something today!",
     "date": "Date",
-    "video_duration": "Duration",
+    "video_duration": "Duration / sec",
     "slide_link": "SLIDE Link",
     "new_pwd": "New Password",
     "confirm_pwd": "Confirmation Code",

html/static/script_slides.js

@@ -120,7 +120,7 @@ function getAvatar() {
       $('#avatar option:disabled').val('Choose Character')
       $('#avatar option:disabled').text('Choose Character')
     }
-    card = document.getElementsByClassName('card');
+    card = document.querySelectorAll('.avatar-cards .card');
     console.log(card);
     addCardListener(card);
     avatarChange()
@@ -176,6 +176,133 @@ function openavatarModel() {
   avatarModal.show();
 }
 
+// Drafts
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+getDraft();
+function openDrafts() {
+  draftsModal.show()
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+
+function deleteDraft(id) {
+  let token = get_jwt_token();
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+    draftsModal.show();
+    avatarModal.hide();
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+// Upload
 $('input[type=file]').on('change', prepareUpload);
 function prepareUpload(event) {
   files = event.target.files;

html/static/script_util2.js

@@ -112,7 +112,7 @@ function getAvatar() {
 
 
 // Card
-const card = document.getElementsByClassName('card');
+const card = document.querySelectorAll('.avatar-cards .card');
 var client_id = Date.now()
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
@@ -124,6 +124,10 @@ var myModal = new bootstrap.Modal(document.getElementById('history'), {
 var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
   keyboard: false
 })
+
+var draftsModal = new bootstrap.Modal(document.getElementById('draftModal'), {
+  keyboard: false
+})
 var modalImg = document.querySelector("#avatarmega .modal-img");
 var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
@@ -156,6 +160,131 @@ function openavatarModel() {
   modalTitle.textContent = `${this.dataset.avatar}`;
   avatarModal.show();
 }
+// Drafts
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+getDraft();
+function openDrafts() {
+  draftsModal.show()
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+
+function deleteDraft(id) {
+  let token = get_jwt_token();
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+    draftsModal.show();
+    avatarModal.hide();
+  }).catch(err => {
+    console.log(err);
+  });
+}
 
 // Upload
 $('input[type=file]').on('change', prepareUpload);
@@ -397,7 +526,6 @@ function load_data(tid, loaded_data, draft = false) {
   }
   console.log(loaded_data);
   let historyItem = loaded_data.filter(item => item.id == tid)[0];
-  console.log(historyItem.title);
   if(draft) {
     $(".title_new").val(historyItem.title);
     $("#avatar").val(historyItem.avatar);

html/static/scss/style.css

@@ -1608,6 +1608,20 @@ body {
           box-shadow: none;
 }
 
+.draft-table th {
+  border-bottom: none !important;
+  color: #183790;
+  font-weight: 900;
+}
+
+.draft-table .draft-content-icon {
+  cursor: pointer;
+}
+
+#draftModal .draft-table {
+  font-size: .9rem;
+}
+
 .sidenav {
   width: 250px;
   position: fixed;

html/static/scss/style.scss

@@ -1474,6 +1474,25 @@ body {
 	}
 }
 
+.draft-table {
+	th {
+		border-bottom: none !important;
+		color: #183790;
+		font-weight: 900;
+	}
+	.draft-content {
+		&-icon {
+			cursor: pointer;
+		}
+	}
+}
+
+#draftModal {
+	.draft-table {
+		font-size: .9rem;
+	}
+}
+
 // 側邊欄選單
 .sidenav {
 	width: 250px;

html/user_profile2.html

@@ -144,11 +144,16 @@
                                         <lan set-lan="html:user_profile">會員資料</lan>
                                     </li>
                                 </a>
-                                <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history"
+                                <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#history"
                                     onclick="openNav()">
                                     <i class="fas fa-history me-2"></i>
                                     <lan set-lan="html:history">歷史紀錄</lan>
                                 </li>
+                                <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></lan>
+                                </li>
 
                                 <div class="Mobile-nav">
                                     <hr>
@@ -222,6 +227,7 @@
                                                 <p>Hana@choozmo.com</p>
                                             </div> -->
                                         </div>
+                                        
                                         <div class="row px-0 mx-0 g-4">
                                             <div class="Used col-12 order-2 col-lg-6 order-lg-1">
                                                 <div class="card py-4 ps-4">
@@ -261,7 +267,7 @@
                                                                 <th scope="col" set-lan="html:date">日期</th>
                                                                 <th scope="col" set-lan="html:video_title">標題</th>
                                                                 <th class="px-0" scope="col"
-                                                                    set-lan="html:video_duration">影片時間</th>
+                                                                    set-lan="html:video_duration">影片時間 / 秒</th>
                                                             </tr>
                                                         </thead>
                                                         <tbody class="historical-content">
@@ -315,7 +321,7 @@
                                                           </tr> -->
                                                         </thead>
                                                         <tbody class="draft-content">
-
+                                                            
                                                         </tbody>
                                                     </table>
                                                 </div>
@@ -373,6 +379,21 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        <div class="col-12">
+                                            <strong class="mb-2 d-block">電子郵件通知設定<i class="fas fa-envelope-square ms-1"></i></strong>
+                                            <div>
+                                                <label for="">
+                                                     <input type="checkbox" checked>
+                                                     <span class="ms-1">趨勢日報</span>
+                                                </label>
+                                             </div>
+                                             <div>
+                                                <label for="">
+                                                     <input type="checkbox" checked>
+                                                     <span class="ms-1">新訊息通知</span>
+                                                 </label>
+                                             </div>
+                                         </div>
                                     </div>
                                 </div>
 
@@ -429,6 +450,37 @@
             </div>
         </div>
 
+        <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-scrollable">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:drafts">草稿夾</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="modal-terms">
+                            <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                            <div class="draft-table col-12 d-block" id="draft-table">
+                                <div class="card p-3 text-center">
+                                    <table class="table text-center">
+                                        <thead>
+                                            <tr>
+                                            <th scope="col" set-lan="html:video_title">標題</th>
+                                            <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="draft-content">
+
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- ================================================================= -->
         <!-- footer -->
         <footer class="fixed-bottom text-center py-2">