make video apis

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

make_video.html

@@ -148,43 +148,43 @@
                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
-                            <option value="10">Nina黑</option>
+                            <option value="10">Nina</option>
                             <option value="11">Summer韓小夏</option>
                             <option value="12">Jocelyn</option>
                             <option value="13">Angela</option>
                         </select>
-                        <div class="owl-carousel owl-theme d-flex row">
-                            <div class="card item col" data-avatar="Peggy" data-img="peggy">
+                        <div class="d-flex row">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Peggy" data-img="peggy">
                                 <div class="imgfr"><img src="img/peggy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Peggy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Stacy" data-img="stacy">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Stacy" data-img="stacy">
                                 <div class="imgfr"><img src="img/stacy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Stacy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Nina黑" data-img="nina黑">
-                                <div class="imgfr"><img src="img/nina黑.webp" class="card-img-top" alt="..."></div>
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Nina" data-img="nina">
+                                <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
-                                    <h5 class="card-title">Nina黑</h5>
+                                    <h5 class="card-title">Nina</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Summer韓小夏" data-img="summer韓小夏">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Summer韓小夏" data-img="summer韓小夏">
                                 <div class="imgfr"><img src="img/summer韓小夏.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Summer韓小夏</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Jocelyn" data-img="Jocelyn">
                                 <div class="imgfr"><img src="img/Jocelyn.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Jocelyn</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Angela" data-img="Angela">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Angela" data-img="Angela">
                                 <div class="imgfr"><img src="img/Angela.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Angela</h5>
@@ -342,7 +342,7 @@
         data.append('file', files[0]);
         // append other variables to data if you want: data.append('field_name_x', field_value_x);
         $(this).next().text('');
-        $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+        $(this).next().html('<img src="img/Spinner-1s-181px.gif">');
         $.ajax({
           type: 'POST',
           processData: false, // important
@@ -395,12 +395,10 @@
         if ($('#multiLang').prop("checked")) {multiLang = 1;}
         dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
         objstr = JSON.stringify(dataOBJ);
-        console.log(dataOBJ)
-        jwt_token =  get_jwt_token()
+        console.log(dataOBJ);
         var xhr = new XMLHttpRequest();
-        xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
+        xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_noAuth");
         xhr.setRequestHeader("accept", "application/json");
-        xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
         xhr.setRequestHeader("Content-Type", "application/json");
         xhr.onreadystatechange = function () {
           if (xhr.readyState === 4) {
@@ -427,14 +425,13 @@
       function openNav() {
         document.getElementById("mySidenav").style.width = "250px";
         document.querySelector('.loader').style.display = "block";
-        let jwt_token = get_jwt_token();
         axios({
           method: 'post',
-          url: 'https://www.choozmo.com:8887/history_input',
+          url: 'https://www.choozmo.com:8887/history_input_noAuth',
           headers: { 
-              'accept': 'application/json',
-              'Authorization': `Bearer ${jwt_token}`
-          }
+              'accept': 'application/json'
+          },
+          data: ''
         }).then(res => {
           console.log(res.data);
           loaded_data = res.data;
@@ -507,12 +504,6 @@
         return XHRstring
       }
 
-      function get_jwt_token(){
-        jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
-        if(!jwt_raw) {return}
-        return jwt_raw.split('=')[1];
-      }
-
       function direct(id) {
         location.href = `make_video.html?id=${id}`;
       }
@@ -575,15 +566,11 @@
           imguploadlabel.setAttribute('for', `img${i + 1}`);
           imguploadlabel.classList.add('upload-btn');
           imguploadlabel.textContent = '上傳檔案';
-          if(lan == 'en') {
-            imguploadlabel.textContent = 'Upload';
-          }
           imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+          $('input[type=file]').on('change', prepareUpload);
           imgInputs.appendChild(imguploadlabel);
         }
-        setTimeout(() => {
-          JsLoadingOverlay.hide();
-        }, 0);
+
       }
 
       getpathId();
@@ -594,14 +581,13 @@
       }
 
       function getData() {
-        let jwt_token = get_jwt_token();
         axios({
           method: 'post',
-          url: 'https://www.choozmo.com:8887/history_input',
+          url: 'https://www.choozmo.com:8887/history_input_noAuth',
           headers: { 
-              'accept': 'application/json',
-              'Authorization': `Bearer ${jwt_token}`
-          }
+              'accept': 'application/json'
+          },
+          data: ''
         }).then(res => {
           loaded_data = res.data;
           console.log(loaded_data);
@@ -624,6 +610,7 @@
       }
 
       initial();
+      getData();
 
       var addbtn = document.querySelector(".add");
       var addimgbtn = document.querySelector(".addimg");
@@ -652,30 +639,30 @@
       }
 
       function renderimgBlock(i) {
-  var imginput = document.createElement("input");
-  imginput.setAttribute('type', 'text');
-  imginput.setAttribute('name', `m${i}`);
-  imginput.classList.add('imgsrc', `imgsrc${i}`);
-  imginput.value = "";
-  imginput.setAttribute('placeholder', `${i}`);
-  imgInputs.appendChild(imginput);
-
-  var imgupload = document.createElement("input");
-  imgupload.setAttribute('id', `img${i}`);
-  imgupload.setAttribute('type', `file`);
-  imgupload.classList.add('img_uploader', 'img_up');
-  imgInputs.appendChild(imgupload);
-  var imguploadlabel = document.createElement("label");
-  imguploadlabel.setAttribute('for', `img${i}`);
-  imguploadlabel.classList.add('upload-btn');
-  imguploadlabel.textContent = '上傳檔案';
-  // if(lan == 'en') {
-  //   imguploadlabel.textContent = 'Upload';
-  // }
-  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
-  imgInputs.appendChild(imguploadlabel);
-  $('input[type=file]').on('change', prepareUpload);
-}
+        var imginput = document.createElement("input");
+        imginput.setAttribute('type', 'text');
+        imginput.setAttribute('name', `m${i}`);
+        imginput.classList.add('imgsrc', `imgsrc${i}`);
+        imginput.value = "";
+        imginput.setAttribute('placeholder', `${i}`);
+        imgInputs.appendChild(imginput);
+
+        var imgupload = document.createElement("input");
+        imgupload.setAttribute('id', `img${i}`);
+        imgupload.setAttribute('type', `file`);
+        imgupload.classList.add('img_uploader', 'img_up');
+        imgInputs.appendChild(imgupload);
+        var imguploadlabel = document.createElement("label");
+        imguploadlabel.setAttribute('for', `img${i}`);
+        imguploadlabel.classList.add('upload-btn');
+        imguploadlabel.textContent = '上傳檔案';
+        // if(lan == 'en') {
+        //   imguploadlabel.textContent = 'Upload';
+        // }
+        imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+        imgInputs.appendChild(imguploadlabel);
+        $('input[type=file]').on('change', prepareUpload);
+      }
 
     </script>
 </body>

make_video_eng.html

@@ -148,7 +148,7 @@
                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>Choose Character</option>              
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
-                            <option value="10">Nina黑</option>
+                            <option value="10">Nina</option>
                             <option value="11">Summer韓小夏</option>
                             <option value="12">Jocelyn</option>
                             <option value="13">Angela</option>
@@ -166,10 +166,10 @@
                                     <h5 class="card-title">Stacy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Nina黑" data-img="nina黑">
-                                <div class="imgfr"><img src="img/nina黑.webp" class="card-img-top" alt="..."></div>
+                            <div class="card item col" data-avatar="Nina" data-img="nina">
+                                <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
-                                    <h5 class="card-title">Nina黑</h5>
+                                    <h5 class="card-title">Nina</h5>
                                 </div>
                             </div>
                             <div class="card item col" data-avatar="Summer韓小夏" data-img="summer韓小夏">
@@ -347,7 +347,7 @@
         data.append('file', files[0]);
         // append other variables to data if you want: data.append('field_name_x', field_value_x);
         $(this).next().text('');
-        $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+        $(this).next().html('<img src="img/Spinner-1s-181px.gif">');
         $.ajax({
           type: 'POST',
           processData: false, // important
@@ -360,15 +360,15 @@
             console.log(jsonData.msg);
             $(this).prev().val(jsonData.msg);
             event.target.nextSibling.innerHTML = '';
-            event.target.nextSibling.textContent = '上傳檔案';
+            event.target.nextSibling.textContent = 'Upload';
             //console.log($(this).next());
             //$(this).next().html('上傳檔案');
             //$(this).next().text('上傳檔案');
           },
           error: function (error) {
             event.target.nextSibling.innerHTML = '';
-            event.target.nextSibling.textContent = '上傳檔案';
-            alert('圖片錯誤');
+            event.target.nextSibling.textContent = 'Upload';
+            alert('Error');
           }
         });
       }
@@ -447,14 +447,13 @@
       function openNav() {
         document.getElementById("mySidenav").style.width = "250px";
         document.querySelector('.loader').style.display = "block";
-        let jwt_token = get_jwt_token();
         axios({
           method: 'post',
-          url: 'https://www.choozmo.com:8887/history_input',
+          url: 'https://www.choozmo.com:8887/history_input_noAuth',
           headers: { 
               'accept': 'application/json',
-              'Authorization': `Bearer ${jwt_token}`
-          }
+          },
+          data: ''
         }).then(res => {
           console.log(res.data);
           loaded_data = res.data;
@@ -593,6 +592,7 @@
           imguploadlabel.setAttribute('for', `img${i + 1}`);
           imguploadlabel.classList.add('upload-btn');
           imguploadlabel.textContent = 'Upload';
+          $('input[type=file]').on('change', prepareUpload);
           imgInputs.appendChild(imguploadlabel);
         }
 

styleMV.css

@@ -179,7 +179,7 @@ body {
 
 .card-title {
   font-family: "Montserrat", sans-serif;
-  font-size: 1rem;
+  font-size: .95em;
 }
 
 .strong {
@@ -286,11 +286,11 @@ body {
   border-radius: 3px;
   -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
           box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
-  padding: 20px 30px;
+  padding: 20px 20px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 80%;
-  margin: 3rem 10%;
+  width: 90%;
+  margin: 3rem 5%;
   /*stacking fieldsets above each other*/
   position: relative;
 }