feat(PC): GIF 动图按顺序播放

Author: mutoe

packages/zhiyicx-plus-pc/resources/assets/web/css/feed.css

@@ -68,6 +68,9 @@ to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
 /* 多图片样式 */
 .image_box {position:relative;left:-1px;overflow:hidden;margin-bottom:2px;padding:0 2px;}
 .image_box .per_image {position:absolute;top:0;left:2px;width:100%;height:100%;object-fit:cover;}
+.image_box .gif_badge {position: absolute;bottom: 0;right: 0;background-color: #5dc8ab;color: #fff;font-size: 80%;padding: 1px 4px;}
+.image_box .long_badge {position: absolute;bottom: 0;right: 0;background-color: #c8a06c;color: #fff;font-size: 80%;padding: 1px 4px;}
+.image_box.playing .gif_badge{display: none;}
 .image_box:before {display:block;padding-top:100%;content:'';}
 .feed_item .feed_bottom {margin-top:20px;}
 .feed_item .feed_bottom .feed_datas {position:relative;clear:both;margin-top: 20px;}

packages/zhiyicx-plus-pc/resources/assets/web/js/common.js

@@ -1840,6 +1840,60 @@ var repostable = {
     },
 }
 
+function handleFile(blob, callback) {
+    var reader = new FileReader()
+    reader.onload = function(event) {
+        var arrayBuffer = reader.result
+        var gifInfo = gify.getInfo(arrayBuffer)
+        callback(gifInfo)
+    }
+    reader.readAsArrayBuffer(blob)
+}
+
+// 播放 GIF 图
+if ('getContext' in document.createElement('canvas')) {
+    HTMLImageElement.prototype.play = function() {
+        var that = this
+        that.parentElement.classList.add('playing')
+        if (that.dataset.blobURL) {
+            that.src = that.dataset.blobURL
+            gifInfo.timer = setTimeout(function() {
+                that.stop()
+                gifInfo.currentIndex++
+            }, that.dataset.gifDuration)
+            return
+        }
+        // 从远程获取 GIF blob 对象
+        axios.get(that.dataset.originalGif, {
+            responseType: 'blob'
+        }).then(function(res) {
+            var blob = res.data
+
+            // 加载图片
+            var blobURL = window.URL.createObjectURL(blob);
+            that.src = blobURL
+            that.dataset.blobURL = blobURL
+
+            // 解析 GIF 信息 （via gify）
+            handleFile(blob, function (info) {
+                console.log(info);
+                // 读取 GIF 持续时间
+                that.dataset.gifDuration = info.durationChrome
+                // 停止播放
+                gifInfo.timer = setTimeout(function() {
+                    that.stop()
+                    gifInfo.currentIndex++ // 触发索引变更 播放下一个 GIF
+                }, that.dataset.gifDuration)
+            })
+        })
+    };
+    HTMLImageElement.prototype.stop = function() {
+        clearTimeout(gifInfo.timer)
+        this.parentElement.classList.remove('playing')
+        this.src = this.dataset.original
+    };
+}
+
 $(function() {
 
     // 获取我的好友 用于全局at弹框显示默认内容