Add some notification message

WincerChan · May 26, 2018 · eafbf16 · eafbf16
1 parent 8fcccc8
commit eafbf16
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/src/index.css b/src/index.css
@@ -53,4 +53,10 @@
 }
 #success-notification{
   display: none;
+}
+#progress{
+  display: none;
+}
+.is-link {
+  border-color:#2196f3!important;
 }
diff --git a/src/single/Section.js b/src/single/Section.js
@@ -10,7 +10,10 @@ import { gifRender, download } from './gifRender';
 
 
 const templates = [Wangjingze, Weisuoyuwei, Lianliankan, Dagong];
-
+const messages = [
+    <p>服务器在国外，加载图片在晚上高峰期可能会很慢；</p>,
+    <p>由于下载采用了<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" target="__blank">Blob</a> 协议，故仅新版 Chrome、Firefox 支持下载，其它浏览器请点击预览后右击保存。</p>
+]
 templates.forEach((element, i) => {
     templates[i].component = () => (
         <section className="section container" >
@@ -20,9 +23,10 @@ templates.forEach((element, i) => {
             <div id="contentWjz">
                 <img src={element.gif} id="gifMeme" alt="meme" />
             </div>
+            <progress class="progress is-success" id="progress" value="0" max="100">233</progress>
             <div id="success-notification" className="notification is-success">
                 <button className="delete" onClick={() => document.querySelector('#success-notification').style.display = 'none'}></button>
-                成功生成
+                生成完毕。
             </div>
             {
                 element.config.map((sentence, index) =>
@@ -34,15 +38,18 @@ templates.forEach((element, i) => {
                     </div>)
             }
             <div className="button-width">
-                <button id="preveiw" className="button is-info is-outlined" onClick={() => gifRender(element)}>戳我预览</button>
-                <button id="download" className="button is-info is-outlined" onClick={() => download(element)}>戳我下载</button>
+                <button id="preveiw" className="button is-link is-outlined" onClick={() => gifRender(element)}>戳我预览</button>
+                <button id="download" className="button is-link is-outlined" onClick={() => download(element)}>戳我下载</button>
             </div>
             <br />
             <br />
             <br />
-            <article className="message is-danger content">
+            <article className="message is-warning content">
                 <div className="message-body">
-                    <p>目前预览和下载还在完善中</p>
+                    <p>Tips:</p>
+                    <ol className="message-text">
+                        {messages.map(msg => <li>{msg}</li>)}
+                    </ol>
                 </div>
             </article>
         </section >

diff --git a/src/single/gifRender.js b/src/single/gifRender.js
@@ -2,7 +2,12 @@ import omggif from 'omggif';
 import GIF from 'gif.js';
 import axios from 'axios';
 
+
 var gifRender = async function (gifInfo) {
+    var progressBar = document.querySelector('#progress'),
+        notificationMessage = document.querySelector('#success-notification');
+    progressBar.style.display = 'block';
+    notificationMessage.style.display = 'none';
 
     var createCanvasContext = function (width, height) {
         let canvas = document.createElement('canvas');
@@ -20,7 +25,6 @@ var gifRender = async function (gifInfo) {
     var response = await axios.get(gifInfo.gif, {
         responseType: 'arraybuffer',
         onDownloadProgress: event => {
-            // console.log([event.total, event.loaded])
         }
     })
     var arrayBufferView = new Uint8Array(response.data);
@@ -42,7 +46,7 @@ var gifRender = async function (gifInfo) {
     console.log('nums', gifReader.numFrames())
 
     for (let i = 0; i < gifReader.numFrames(); i++) {
-
+        console.log(`i: ${i}, nums: ${gifReader.numFrames()}`);
         gifReader.decodeAndBlitFrameRGBA(i, pixelBuffer);
         let imageData = new window.ImageData(pixelBuffer, width, height)
         ctx.putImageData(imageData, 0, 0);
@@ -52,15 +56,12 @@ var gifRender = async function (gifInfo) {
             var textInfo = gifInfo.config[textIndex];
             if (textInfo.startTime <= time && time <= textInfo.endTime) {
                 var text = undefined;
-                console.log('cap' + captions);
                 if (captions[textIndex])
                     text = captions[textIndex].value || textInfo.default;
                 else
                     text = textInfo.default;
-                console.log(2 + text);
                 ctx.strokeText(text, width / 2, height - 5, width);
                 ctx.fillText(text, width / 2, height - 5, width);
-                console.log('time' + frameInfo.delay / 100)
             }
             time += frameInfo.delay / 100;
             if (time > textInfo.endTime) {
@@ -74,11 +75,16 @@ var gifRender = async function (gifInfo) {
         })
     }
     gif.render()
+    gif.on('progress', progress => {
+        progressBar.value = 100 * progress;
+    })
     gif.on('finished', blob => {
-        document.querySelector('#success-notification').style.display = 'block';
         var img = document.querySelector('#gifMeme');
         window.gifUrl = window.URL.createObjectURL(blob);
         img.src = window.gifUrl;
+        progressBar.style.display = 'none';
+        progressBar.value = 0;
+        document.querySelector('#success-notification').style.display = 'block';
     })
 }
 

diff --git a/src/single/static/Venge.js b/src/single/static/Venge.js
@@ -29,7 +29,7 @@ const Vengeful = () => (
         <br />
         <br />
         <br />
-        <article className="message is-dark content">
+        <article className="message is-warning content">
             <div className="message-body">
                 <p>Tips:</p>
                 <ol className="message-text">