mip-story 横屏时增加二维码 (#1339)

mipengine · Apr 25, 2019 · f21c3dd · f21c3dd
1 parent e816959
commit f21c3dd
Show file tree

Hide file tree

Showing 6 changed files with 691 additions and 1 deletion.
diff --git a/src/mip-story/jsmpeg/jsmpeg.js → src/mip-story/lib/jsmpeg.js b/src/mip-story/jsmpeg/jsmpeg.js → src/mip-story/lib/jsmpeg.js
diff --git a/src/mip-story/lib/qrcode.js b/src/mip-story/lib/qrcode.js
diff --git a/src/mip-story/mip-story-hint.js b/src/mip-story/mip-story-hint.js
@@ -15,6 +15,7 @@ define(function (require) {
     var MIP_STORY_PAGE_SWITCH_RIGHT_CLASS = 'mip-story-page-switch-rt';
 
     var util = require('util');
+    var QRCode = require('./lib/qrcode');
 
     function MIPStoryHint(root) {
         this.rootEl = root;
@@ -39,6 +40,7 @@ define(function (require) {
             +   '<div class="mip-story-hint-rotate">'
             +       '<mip-img src="https://www.mipengine.org/static/img/mip-story/mip-story-rotate.png"></mip-img>'
             +       '<p>为了更好的体验，请将手机横过来</p>'
+            +       '<div class="mip-story-qrcode"></div>'
             +   '</div>'
             +   '<div class="mip-story-page-switch">'
             +      '<span class="mip-story-page-switch-left">'
@@ -54,6 +56,19 @@ define(function (require) {
         return html;
     };
 
+    MIPStoryHint.prototype.generateQRCode = function () {
+        var ele = this.rootEl.querySelector('.mip-story-qrcode');
+        new QRCode(ele, {
+            text: window.location.href,
+            width: 96,
+            height: 96,
+            border: 2,
+            colorDark : "#000000",
+            colorLight : "#ffffff",
+            correctLevel : QRCode.CorrectLevel.H
+        });
+    }
+
     MIPStoryHint.prototype.showDamping = function () {
         var self = this;
         var ele = this.rootEl.querySelector(MIP_STORY_HINT_CLASS);

diff --git a/src/mip-story/mip-story-video.js b/src/mip-story/mip-story-video.js
@@ -7,7 +7,7 @@ define(function (require) {
     'use strict';
 
     var customElement = require('customElement').create();
-    var JSMpeg = require('./jsmpeg/jsmpeg');
+    var JSMpeg = require('./lib/jsmpeg');
     var util = require('util');
     var Detector = require('./video-detector');
     var css = util.css;

diff --git a/src/mip-story/mip-story.js b/src/mip-story/mip-story.js
@@ -90,6 +90,7 @@ define(function (require) {
         this.hint = new HintLayer(element);
         var html = dm.create(this.hint.build());
         this.element.appendChild(html);
+        this.hint.generateQRCode();
     };
 
     MIPStory.prototype.initShare = function (storyConfig, element) {

diff --git a/src/mip-story/mip-story.less b/src/mip-story/mip-story.less
@@ -723,6 +723,10 @@ mip-story-layer[template=thirds] {
     height: 45px;
 }
 
+.mip-story-qrcode {
+    margin-top: 10px;
+}
+
 @media all and (orientation: portrait) {
     .mip-story-hint-rotate {
         display: none;