feat(api): support battery/clipboard/motion/part of media apis (#139)

* fix(api): font style is required when set canvas font
* feat(api): support battery/clipboard/motion/part of media apis

Author: loongfay

packages/mars-api/api/battery/index.js

@@ -0,0 +1,38 @@
+/**
+ * @file battery api
+ * @author zhaolongfei
+ */
+
+import {callback} from '../../lib/utils';
+
+export function getBatteryInfo(options = {}) {
+    const {success, fail, complete} = options;
+
+    if (navigator.getBattery) {
+        return new Promise((resolve, reject) => {
+            navigator.getBattery().then(battery => {
+                const res = {
+                    isCharging: battery.charging,
+                    level: battery.level
+                };
+                callback(success, res);
+                callback(complete, res);
+                resolve(res);
+            }).catch(e => {
+                const err = {
+                    errMsg: e
+                };
+                callback(fail, err);
+                callback(complete, err);
+                reject(err);
+            });
+        });
+    } else {
+        const err = {
+            errMsg: 'getBatteryInfo is not supported by browser'
+        };
+        callback(fail, err);
+        callback(complete, err);
+        return Promise.reject(err);
+    }
+}

packages/mars-api/api/clipboard/index.js

@@ -0,0 +1,89 @@
+/**
+ * @file clipboard api
+ * @author zhaolongfei
+ */
+
+import {callback, isIOS} from '../../lib/utils';
+import {showToast} from '../interactive';
+
+class FakeClipboard {
+    constructor() {
+        this.textArea = document.createElement('textarea');
+        this.textArea.id = 'mars-clipboard';
+        this.textArea.style.position = 'absolute';
+        this.textArea.style.left = '-9999px';
+        this.textArea.setAttribute('readonly', 'readonly');
+        document.body.appendChild(this.textArea);
+    }
+
+    setData(data) {
+        this.textArea.value = data;
+    }
+
+    getData() {
+        return this.textArea.value;
+    }
+
+    select() {
+        if (isIOS()) {
+            const range = document.createRange();
+            range.selectNodeContents(this.textArea);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+            this.textArea.setSelectionRange(0, 999999);
+        } else {
+            this.textArea.select();
+        }
+    }
+
+    copy(cb) {
+        try {
+            if (document.execCommand('Copy')) {
+                cb(true);
+            } else {
+                cb(false);
+            }
+        } catch (e) {
+            cb(false);
+        }
+    }
+}
+
+const clipboard = new FakeClipboard();
+
+export function setClipboardData(options = {}) {
+    const {data = '', success, fail, complete} = options;
+
+    return new Promise((resolve, reject) => {
+        clipboard.setData(data);
+        clipboard.select();
+        clipboard.copy(flag => {
+            if (flag) {
+                showToast({
+                    title: '复制成功'
+                });
+                callback(success);
+                callback(complete);
+                resolve();
+            } else {
+                showToast({
+                    title: '复制失败'
+                });
+                callback(fail);
+                callback(complete);
+                reject();
+            }
+        });
+    });
+}
+
+export function getClipboardData(options = {}) {
+    const {success, fail, complete} = options;
+    const res = {
+        data: clipboard.getData()
+    };
+    callback(success, res);
+    callback(complete, res);
+    return Promise.resolve(res);
+}

packages/mars-api/api/file/index.js

@@ -3,17 +3,10 @@
  * @author zhaolongfei
  */
 
-import {
-    chooseImage,
-    previewImage
-} from './image';
-
 import {
     uploadFile
 } from './upload';
 
 export {
-    chooseImage,
-    previewImage,
     uploadFile
 };

packages/mars-api/api/file/upload.js

@@ -4,9 +4,9 @@
  * @author zhaolongfei(izhaolongfei@gmail.com)
  */
 
-import {callback} from '../../lib/utils';
+import {callback, isIOS} from '../../lib/utils';
 
-export function uploader(type = 'image', count = 1) {
+export function uploader(type = 'image', count = 1, sourceType) {
     return new Promise((resolve, reject) => {
         const input = document.getElementById('mars-uploader') || document.createElement('input');
         input.id = 'mars-uploader';
@@ -15,6 +15,10 @@ export function uploader(type = 'image', count = 1) {
         input.accept = type + '/*';
         input.style.width = 0;
         input.style.height = 0;
+        // iOS 下存在 capture 属性时，默认打开相机
+        if (type === 'image' && isIOS() && !sourceType.includes('album')) {
+            input.capture = 'camera';
+        }
 
         document.body.appendChild(input);
 
@@ -55,7 +59,6 @@ function upload(url, header = null, data) {
             if (xhr.readyState === 4 && xhr.status === 200) {
                 resolve(xhr.response);
             }
-
         };
 
         xhr.onerror = e => {
@@ -66,16 +69,7 @@ function upload(url, header = null, data) {
 }
 
 export function uploadFile(options) {
-    const {
-        url,
-        filePath,
-        name,
-        header = null,
-        formData = null,
-        success,
-        fail,
-        complete
-    } = options;
+    const {url, filePath, name, header = null, formData = null, success, fail, complete} = options;
 
     const rformData = new FormData();
 
@@ -95,7 +89,6 @@ export function uploadFile(options) {
             callback(complete, e);
             return e;
         }
-
         throw e;
     });
 }

packages/mars-api/api/file/image.js renamed to packages/mars-api/api/media/image.js

@@ -1,21 +1,16 @@
 /**
  * @file image
  * @Date 2019/2/21
- * @author zhaolongfei(izhaolongfei@gmail.com)
+ * @author zhaolongfei
  */
 
-import {uploader} from './upload';
+import {uploader} from '../file/upload';
 import {callback} from '../../lib/utils';
 
 export function chooseImage(options) {
-    const {
-        count = 9,
-        success,
-        fail,
-        complete
-    } = options;
+    const {count = 9, sourceType = ['album', 'camera'], success, fail, complete} = options;
 
-    return uploader('image', count, 'image').then(data => {
+    return uploader('image', count, sourceType).then(data => {
         callback(success, data);
         callback(complete, data);
         return data;
@@ -26,13 +21,41 @@ export function chooseImage(options) {
             callback(complete, e);
             return e;
         }
-
         throw e;
     });
 }
 
-export function getImageInfo() {
-    // TODO
+export function getImageInfo(options = {}) {
+    const {src, success, fail, complete} = options;
+    if (!src) {
+        const err = {
+            errCode: 904,
+            errMsg: 'src is required and must be "string"'
+        };
+        callback(fail, err);
+        return Promise.reject(err);
+    }
+    return new Promise((resolve, reject) => {
+        const types = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'];
+        const imgType = src.substr(src.lastIndexOf('.') + 1) || '';
+        const img = new Image();
+        img.src = src;
+        img.onload = e => {
+            const info = {
+                path: src,
+                width: e.target.naturalWidth || e.target.width,
+                width: e.target.naturalHeight || e.target.height,
+                type: types.includes(imgType) ? imgType : null,
+                orientation: null
+            };
+            callback(success, info);
+            resolve(info);
+        };
+        img.onerror = e => {
+            callback(fail, e);
+            reject(e);
+        };
+    });
 }
 
 export function previewImage(options = {}) {

packages/mars-api/api/media/index.js

@@ -0,0 +1,26 @@
+/**
+ * @file export media api
+ * @author zhaolongfei
+ */
+
+import {
+    chooseImage,
+    previewImage,
+    getImageInfo
+} from './image';
+
+import {
+    chooseVideo
+} from './video';
+
+import {
+    createVideoContext
+} from './video-context';
+
+export {
+    chooseImage,
+    previewImage,
+    getImageInfo,
+    chooseVideo,
+    createVideoContext
+};

packages/mars-api/api/media/video-context.js

@@ -0,0 +1,70 @@
+/**
+ * @file video context
+ * @author zhaolongfei
+ */
+
+class VideoContext {
+    constructor(id) {
+        this.video = document.querySelector('#' + id + ' video');
+        this.poster = document.querySelector('[class*=mars-video-poster]');
+    }
+
+    play() {
+        this.poster.click();
+        this.video.play();
+    }
+
+    pause() {
+        this.video.pause();
+    }
+
+    seek(time) {
+        if (this.video.seek) {
+            this.video.seek(time);
+        } else {
+            console.warn('video.seek is not supported');
+        }
+    }
+
+    requestFullScreen() {
+        if (this.video.requestFullscreen) {
+            this.video.requestFullscreen();
+        } else if (this.video.webkitRequestFullScreen) {
+            this.video.webkitRequestFullScreen();
+        } else if (this.video.webkitEnterFullScreen) {
+            this.video.webkitEnterFullScreen();
+        } else if (this.video.mozRequestFullScreen) {
+            this.video.mozRequestFullScreen();
+        }
+    }
+
+    exitFullScreen() {
+        if (this.video.exitFullscreen) {
+            this.video.exitFullscreen();
+        } else if (this.video.webkitExitFullscreen) {
+            this.video.webkitExitFullscreen();
+        } else if (this.video.cancelFullScrren) {
+            this.video.cancelFullScrren();
+        } else if (this.video.webkitCancelFullScreen) {
+            this.video.webkitCancelFullScreen();
+        } else if (this.video.webkitCancelFullScreen) {
+            this.video.webkitCancelFullScreen();
+        }
+    }
+
+    sendDanmu() {
+        console.warn('sendDanmu is not supported');
+    }
+
+    showStatusBar() {
+        console.warn('showStatusBar is not supported');
+    }
+
+    hideStatusBar() {
+        console.warn('hideStatusBar is not supported');
+    }
+}
+
+export function createVideoContext(videoId) {
+    return new VideoContext(videoId);
+}