first commit

dist/application/assets/js/page/.pydio

@@ -0,0 +1 @@
+ced54523-ebdb-4d02-bd4f-dd82588095b7

dist/application/assets/js/page/Home.js

@@ -0,0 +1,108 @@
+const { ipcRenderer } = require('electron');
+
+class Home {
+    constructor() {
+        this.playVideo()
+        this.GotoList()
+        this.page = $(".video_list").attr("page")
+        this.loadMore()
+    }
+
+    /**
+     * 点击播放视频，发送ipc通知主进程创建独立的 PlayVideo 窗口
+     * 然后向 PlayVideo 方法传入 datat 参数
+     */
+    playVideo() {
+        $(".abbreviation_f").off("click").on('click',function (e) {
+            if ($(this).attr("workType") == "video") {
+                ipcRenderer.send('openWindow', {
+                    action: 'Home.controller/PlayVideo',
+                    data: {
+                        principalId: $(this).attr("principalId"),
+                        photoId: $(this).attr("photoId")
+                    }
+                });
+            } else {
+                ipcRenderer.send('openWindow', {
+                    action: 'Home.controller/PlayVideo',
+                    data: {
+                        caption: $(this).next().text(),
+                        list: JSON.parse( $(this).find(".imgUrls").text() )
+                    }
+                });
+            }
+
+            return false;
+        });
+    }
+
+    /**
+     * 点击使用默认浏览器打开主播主页
+     * @constructor
+     */
+    GotoList() {
+        $(".info").off("click").on('click',function (e) {
+            ipcRenderer.send('openExternal', {
+                url: `https://live.kuaishou.com/profile/${$(this).prev().attr("principalId")}`
+            })
+        })
+    }
+
+    /**
+     * 滚动加载更多数据
+     */
+    loadMore() {
+        let self = this;
+        $(window).scroll(function () {
+            let scrollTop = $(this).scrollTop();
+            let scrollHeight = $(document).height();
+            let windowHeight = $(this).height();
+            if (scrollTop + windowHeight == scrollHeight) {
+                self.getVideoList()
+            }
+        });
+    }
+
+    /**
+     * 滚动到底部后发送请求获取数据
+     */
+    getVideoList() {
+        $Utils.Http("/list", { page: this.page }, res=> {
+            let MMList = res.data;
+
+            // 更新页面上的page页码
+            $(".video_list").attr({ page: MMList.pcursor })
+            // 保存页面到变量
+            this.page = $(".video_list").attr("page")
+            // 遍历新数据到页面
+            MMList.list.forEach(function (val,index) {
+                $(".video_list").append(`
+                  <li> 
+                       <div class="abbreviation_f" principalId="${val.user.id}" photoId="${val.id}" workType="${val.workType}"> 
+                          <div style="background:url('${val.thumbnailUrl}');background-position: center center;" class="zz"></div>
+                          <img src="${val.thumbnailUrl}" class="thumbnailUrl" /> 
+                          <div class="${val.workType == 'video' ? 'tips red':'tips green'}">
+                            ${val.workType == 'video' ? '视频':'图片'}
+                            ${
+                                val.imgUrls.length != 0
+                                    ? `<div class="imgUrls" style="display:none">${JSON.stringify(val.imgUrls)}</div>`
+                                    : ''
+                             }
+                          </div>
+                       </div> 
+                       <div class="info">
+                          <img src="${val.user.avatar}" /> 
+                          <p>${val.caption}</p> 
+                       </div> 
+                   </li>
+                `);
+            });
+
+            this.playVideo()
+            this.GotoList()
+            // 因为页面数据变多了，所以为所有的dom重新监听点击播放，进入主页事件
+        })
+    }
+}
+
+new Home();

dist/application/assets/js/page/PlayVideo.js

@@ -0,0 +1,84 @@
+const { ipcRenderer } = require('electron');
+
+class PlayVideo {
+    constructor() {
+        this.isShowMenu = false
+        this.downVideo()
+        this.initSwiper()
+        this.ShowComment()
+        this.ShowCommentList()
+        this.SwiperIndex = 0;
+    }
+
+    initSwiper() {
+        let self = this;
+        new Swiper ('.swiper-container', {
+            direction: 'horizontal', // 垂直切换选项
+            loop: false, // 循环模式选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+
+            // 如果需要前进后退按钮
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+            on: {
+                slideChange: function () {
+                    self.SwiperIndex = this.realIndex;
+                },
+            }
+        })
+    }
+
+    downVideo() {
+        let self = this;
+        $(".down_video").click(function () {
+            // 当前播放的是图片
+            if ($("#my-video").length == 0) {
+                let allImg = $(".swiper-wrapper .swiper-slide img").eq(self.SwiperIndex)
+                ipcRenderer.send('SaveFile', {
+                    url: allImg.attr("src")
+                })
+            // 当前播放的是视频
+            } else {
+                console.log("下载视频")
+                ipcRenderer.send('SaveFile', {
+                   url: $("#my-video").attr("src")
+                })
+            }
+        })
+    }
+
+    /**
+     * 展开评论弹窗
+     * @constructor
+     */
+    ShowComment() {
+        $(".down_comment").click(() => {
+            if (this.isShowMenu) {
+                $(".comment_list").animate({ right: '-256px'})
+                this.isShowMenu = false
+            } else {
+                $(".comment_list").animate({ right: 0})
+                this.isShowMenu = true
+            }
+        })
+    }
+
+    /**
+     * 查看更多评论
+     * @constructor
+     */
+    ShowCommentList() {
+        $(".view_other").click(function () {
+            $(this).next().toggle({
+                'display': 'block'
+            })
+        })
+    }
+}
+
+new PlayVideo();