first commit

dist/application/assets/.pydio

@@ -0,0 +1 @@
+f5f6fd42-2689-4c35-a3e9-00645202d27f

dist/application/assets/css/.pydio

@@ -0,0 +1 @@
+787f2667-a007-4f3c-b1e6-9314a335cf60

dist/application/assets/css/Home.css

@@ -0,0 +1,67 @@
+.Home ul {
+  display: flex;
+  flex-wrap: wrap;
+}
+.Home ul li {
+  margin-left: 15px;
+  width: 15%;
+  margin-bottom: 18px;
+}
+.Home ul li .abbreviation_f {
+  width: 100%;
+  height: 178px;
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+}
+.Home ul li .abbreviation_f .zz {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background: #000;
+  filter: blur(10px);
+}
+.Home ul li .abbreviation_f .thumbnailUrl {
+  width: 103px;
+  height: 178px;
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  margin-left: -51.5px;
+}
+.Home ul li .abbreviation_f .tips {
+  position: absolute;
+  z-index: 99;
+  color: #fff;
+  padding: 2px 5px;
+  right: 0;
+  bottom: 0;
+  font-size: 13px;
+}
+.Home ul li .abbreviation_f .red {
+  background: red;
+}
+.Home ul li .abbreviation_f .green {
+  background: green;
+}
+.Home ul li .info {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+}
+.Home ul li .info img {
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+}
+.Home ul li .info p {
+  font-size: 13px;
+  width: 93%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: 10px;
+  color: #bababa;
+}

dist/application/assets/css/PlayVideo.css

@@ -0,0 +1,126 @@
+html,
+body,
+.PlayVideo,
+#my-video {
+  background: #000;
+  width: 100%;
+  height: 100%;
+  outline: none !important;
+}
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+.swiper-container .swiper-slide {
+  text-align: center;
+}
+.swiper-container img {
+  height: 100%;
+}
+.PlayVideo {
+  position: fixed;
+}
+.PlayVideo .title {
+  width: 100%;
+  height: 45px;
+  text-align: center;
+  line-height: 45px;
+  color: #fff;
+  position: fixed;
+  z-index: 99;
+}
+.PlayVideo .title i {
+  position: absolute;
+  right: 20px;
+  font-size: 25px;
+  cursor: pointer;
+}
+.PlayVideo .title i:before {
+  cursor: pointer;
+}
+.PlayVideo .title .down_video {
+  right: 60px;
+}
+.PlayVideo .title .down_comment {
+  cursor: pointer;
+  right: 20px;
+  top: 2px;
+  font-size: 22px;
+}
+.PlayVideo .comment_list {
+  position: absolute;
+  right: -256px;
+  z-index: 90;
+  width: 256px;
+  background: #202020;
+  height: calc(100% - 32px);
+  top: 0;
+  overflow-y: scroll;
+  padding-top: 32px;
+}
+.PlayVideo .comment_list .showComment {
+  display: none;
+}
+.PlayVideo .comment_list .showComment .sub_comment {
+  padding: 0 !important;
+  margin-top: 15px;
+  border-bottom: none !important;
+}
+.PlayVideo .comment_list .showComment .sub_comment img {
+  width: 24px !important;
+  height: 24px !important;
+}
+.PlayVideo .comment_list .showComment .sub_comment .list_item {
+  margin-left: 8px !important;
+}
+.PlayVideo .comment_list .showComment .sub_comment .item_content {
+  font-size: 13px !important;
+}
+.PlayVideo .comment_list .item_comment {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #303030;
+}
+.PlayVideo .comment_list .item_comment:hover {
+  background: #2d2b2b;
+  cursor: pointer;
+}
+.PlayVideo .comment_list .item_comment img {
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+}
+.PlayVideo .comment_list .item_comment .list_item {
+  margin-left: 13px;
+  width: 100%;
+}
+.PlayVideo .comment_list .item_comment .list_item .item_title {
+  margin-top: 6px;
+  color: #576b95;
+  margin-bottom: 10px;
+}
+.PlayVideo .comment_list .item_comment .list_item .item_content {
+  color: #909090;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+.PlayVideo .comment_list .item_comment .list_item .icon-like {
+  color: #606060;
+  font-size: 13px;
+}
+.PlayVideo .comment_list .item_comment .list_item .icon-like .numbe {
+  margin-left: 4px;
+}
+.PlayVideo .comment_list .item_comment .list_item .icon-like .view_other {
+  margin-left: 12px;
+}
+.PlayVideo .comment_list .item_comment .list_item .icon-like .view_other .icon-cc-down {
+  margin-left: 3px;
+}
+.PlayVideo .comment_list .item_comment .list_item .icon-like .view_other span,
+.PlayVideo .comment_list .item_comment .list_item .icon-like .view_other .icon-cc-down {
+  color: #909090;
+  font-size: 12px;
+}

dist/application/assets/css/clear.css

@@ -0,0 +1,22 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  -webkit-app-region: drag;
+}
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.content {
+  float: left;
+  width: calc(100% - 200px);
+  margin-left: 200px;
+  margin-top: 50px;
+}
+a {
+  text-decoration: none;
+}

dist/application/assets/css/header.css

@@ -0,0 +1,44 @@
+.action {
+  width: 100%;
+  height: 50px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 999;
+}
+.action .left_action {
+  width: 200px;
+  height: 100%;
+  background: #f6f6f6;
+  float: left;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 6px;
+  box-sizing: border-box;
+}
+.action .left_action .icon-houtui {
+  margin-right: 15px;
+}
+.action .right_menu {
+  width: calc(100% - 200px);
+  height: 100%;
+  background: #f9f9f9;
+  float: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.action .right_menu .menu_text {
+  font-weight: 500;
+  font-size: 15px;
+  margin-left: 32px;
+}
+.action .right_menu .menu_action i {
+  margin-right: 20px;
+  font-size: 22px;
+}
+.action .right_menu .menu_action .icon-yifu {
+  font-size: 20px;
+}

dist/application/assets/css/nav.css

@@ -0,0 +1,32 @@
+.nav_menu {
+  width: 200px;
+  height: calc(100% - 50px);
+  background: #ededed;
+  float: left;
+  position: fixed;
+  left: 0;
+  top: 50px;
+}
+.nav_menu .title {
+  margin-left: 20px;
+  color: #888888;
+  margin-bottom: 7px;
+  padding-top: 20px;
+  font-size: 14px;
+}
+.nav_menu .item_menu {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 20px;
+  cursor: pointer;
+}
+.nav_menu .item_menu:hover {
+  background: #e1e1e1;
+}
+.nav_menu .item_menu .icon-ziyuan {
+  font-size: 15px;
+}
+.nav_menu .item_menu span {
+  color: #2f2f2f;
+  margin-left: 9px;
+}

dist/application/assets/img/.pydio

@@ -0,0 +1 @@
+80d1eff3-5375-4e2f-af48-ac95ceae5dda

dist/application/assets/js/.pydio

@@ -0,0 +1 @@
+e411047a-6633-45a0-a9ed-cf463f0d96b8

dist/application/assets/js/Home.js

@@ -0,0 +1,13 @@
+const { ipcRenderer } = require('electron');
+
+class Home {
+    constructor() {
+        console.log(process.argv)
+        $(".home").click(()=> {
+            // 渲染进程发起ipc，让主进程创建窗体
+            ipcRenderer.sendSync('openWindow', ['PlayVideo.controller', true])
+        })
+    }
+}
+
+new Home();

dist/application/assets/js/lib/.pydio

@@ -0,0 +1 @@
+220499cf-96d3-4f32-a87a-281f91de008c

dist/application/assets/js/lib/http.js

@@ -0,0 +1,62 @@
+class Utils {
+    /**
+     * 发送GET 请求
+     * @param URL 地址
+     * @param params 参数
+     * @param callback 回调
+     * @constructor
+     */
+    Http(URL, params,callback) {
+        $.ajax({
+            url: `http://www.bmycode.com:3000/api${URL}`,
+            type: 'GET',
+            data: params,
+            success: (res)=> {
+                callback(res)
+            }
+        })
+    }
+
+    /**
+     * 根据时间戳返回多久之前的时间
+     * @param timespan 时间戳
+     * @returns {string}
+     */
+    formatTime (timespan) {
+        var dateTime = new Date(timespan);
+        var year = dateTime.getFullYear();
+        var month = dateTime.getMonth() + 1;
+        var day = dateTime.getDate();
+        var hour = dateTime.getHours();
+        var minute = dateTime.getMinutes();
+        var second = dateTime.getSeconds();
+        var now = new Date();
+        var now_new = Date.parse(now.toDateString());  //typescript转换写法
+
+        var milliseconds = 0;
+        var timeSpanStr;
+
+        milliseconds = now_new - timespan;
+
+        if (milliseconds <= 1000 * 60 * 1) {
+            timeSpanStr = '刚刚';
+        }
+        else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
+            timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前';
+        }
+        else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
+            timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
+        }
+        else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
+            timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
+        }
+        else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year == now.getFullYear()) {
+            timeSpanStr = month + '月' + day + '号' + hour + ':' + minute;
+        } else {
+            timeSpanStr = year + '年' + month + '月' + day + '号' + hour + ':' + minute;
+        }
+        return timeSpanStr;
+    };
+}
+
+window.$Utils = new Utils()

dist/application/assets/js/lib/zui/.pydio

@@ -0,0 +1 @@
+273b55bb-5bfc-40e5-a839-b6b577ae395d

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();