first commit

src/application/.pydio

@@ -0,0 +1 @@
+9af67781-5f56-4703-8a0f-36bf92325403

src/application/assets/.pydio

@@ -0,0 +1 @@
+e161dad5-8741-4503-ab79-a3680cb3acd1

src/application/assets/img/.pydio

@@ -0,0 +1 @@
+5870d722-0824-4515-9172-8397f1276c1e

src/application/assets/js/.pydio

@@ -0,0 +1 @@
+48ab38da-fa2d-4cf5-bcc5-075c76854ef8

src/application/assets/js/lib/.pydio

@@ -0,0 +1 @@
+ece44459-a089-49b6-8666-6ba7b161a6e0

src/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()

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

@@ -0,0 +1 @@
+c5132154-4147-4be9-89d3-dda9ca159cd6

src/application/assets/js/page/.pydio

@@ -0,0 +1 @@
+780209c9-bb5e-4d40-a8b6-a2bd47c2eab3

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

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

src/application/assets/less/.pydio

@@ -0,0 +1 @@
+577aeb56-0023-42f0-b7e8-2d595cbabaa3

src/application/assets/less/Home.less

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

src/application/assets/less/PlayVideo.less

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

src/application/assets/less/clear.less

@@ -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;
+}

src/application/assets/less/header.less

@@ -0,0 +1,46 @@
+.action {
+  width: 100%;
+  height: 50px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 999;
+  .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;
+    .icon-houtui {
+      margin-right: 15px;
+    }
+  }
+  .right_menu {
+    width: calc(100% - 200px);
+    height: 100%;
+    background: #f9f9f9;
+    float: left;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .menu_text {
+      font-weight: 500;
+      font-size: 15px;
+      margin-left: 32px;
+    }
+    .menu_action {
+      i {
+        margin-right: 20px;
+        font-size: 22px;
+      }
+      .icon-yifu {
+        font-size: 20px;
+      }
+    }
+  }
+}

src/application/assets/less/nav.less

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

src/application/components/.pydio

@@ -0,0 +1 @@
+13877692-fec3-4c9a-a8d9-56ee0f825f6e

src/application/components/footer.jade

@@ -0,0 +1 @@
+h2 底部

src/application/components/header.jade

@@ -0,0 +1,10 @@
+.action
+    .left_action
+        i(class="iconfont icon-houtui")
+        i(class="iconfont icon-qianjin")
+    .right_menu
+        .menu_text iTunes 音乐
+        .menu_action
+            i(class="iconfont icon-iconzhengli_youjian")
+            i(class="iconfont icon-yifu")
+            i(class="iconfont icon-shezhi")

src/application/components/nav.jade

@@ -0,0 +1,39 @@
+.nav_menu
+    .title 我的音乐
+    .item_menu
+        i(class="iconfont icon-yinle")
+        span iTunes音乐
+    .item_menu
+        i(class="iconfont icon-changyongicon-")
+        span 下载管理
+    .item_menu
+        i(class="iconfont icon-yun")
+        span 我的音乐盘
+    .item_menu
+        i(class="iconfont icon-shoucang")
+        span 我的收藏
+
+    .title 我的云盘
+    .item_menu
+        i(class="iconfont icon-tupian")
+        span 精彩照片
+    .item_menu
+        i(class="iconfont icon-shipin1")
+        span 视频记忆
+    .item_menu
+        i(class="iconfont icon-wenjianjia1")
+        span 重要文件
+    .item_menu
+        i(class="iconfont icon-qita")
+        span 其他资料
+
+    .title 在线娱乐
+    .item_menu
+        i(class="iconfont icon-ziyuan")
+        span 短视频
+    .item_menu
+        i(class="iconfont icon-zhibo")
+        span 娱乐直播
+    .item_menu
+        i(class="iconfont icon-xinwen")
+        span 新闻资讯

src/application/layout/.pydio

@@ -0,0 +1 @@
+e26a9949-8bf3-45a8-a658-213dec0a0a26

src/application/layout/index.jade

@@ -0,0 +1,30 @@
+doctype html
+html
+    head
+        meta(charset="utf-8")
+        meta(http-equiv="X-UA-Compatible" content="IE=edge")
+        meta(name="viewport" content="width=device-width, initial-scale=1")
+        meta(name="renderer" content="webkit")
+        meta(http-equiv="Cache-Control" content="no-siteapp")
+        link(rel='stylesheet', href='../../assets/css/header.css')
+        link(rel='stylesheet', href='../../assets/css/nav.css')
+        script(src="../../assets/js/lib/http.js")
+        // - 从 Index.config.ts 中渲染公共 css 和 js
+        each val,index in globals.css
+            link(rel='stylesheet', href=`${val}`)
+        each val,index in globals.js
+            script(src=`${val}`)
+        script.
+            if (typeof module === 'object') {
+                window.jQuery = window.$ = module.exports;
+            };
+
+        block title
+    body
+        - if (header)
+            include ../components/header
+        - if (nav)
+            include ../components/nav
+        block content
+
+        block script

src/application/page/.pydio

@@ -0,0 +1 @@
+eac2e5cf-4383-4f4b-b53b-fd2f393a49ac

src/application/page/Home/.pydio

@@ -0,0 +1 @@
+4a111cfc-b7cf-40d4-929b-b16936294b4b

src/application/page/Home/Home.jade

@@ -0,0 +1,28 @@
+extends ../../layout/index
+
+block title
+
+    title #{title}
+    link(rel='stylesheet', href='../../assets/css/clear.css')
+    link(rel='stylesheet', href='../../assets/css/Home.css')
+
+//- 网站的主体内容区域
+block content
+    .content
+        .Home
+            ul.video_list(page="#{list.pcursor}")
+              each val,index in list.list
+                li
+                  .abbreviation_f(principalId="#{val.user.id}" photoId="#{val.id}" workType="#{val.workType}")
+                      .zz(style="background: url(#{val.thumbnailUrl});background-position: center center;")
+                      img(class="thumbnailUrl" src="#{val.thumbnailUrl}")
+                      div(class="#{val.workType == 'video' ? 'tips red':'tips green'}")
+                        | #{val.workType == 'video' ? '视频':'图片'}
+                        - if (val.imgUrls.length != 0)
+                            div(class="imgUrls" style="display:none") #{JSON.stringify(val.imgUrls)}
+                  .info
+                      img(src="#{val.user.avatar}")
+                      p #{val.caption}
+
+block script
+    script(src="../../assets/js/page/Home.js")

src/application/page/PlayVideo/.pydio

@@ -0,0 +1 @@
+287a9417-e25d-47c0-a1e6-77e2cd2fc62b

src/application/page/PlayVideo/PlayVideo.jade

@@ -0,0 +1,54 @@
+extends ../../layout/index
+
+block title
+
+    title 播放页面
+    link(rel='stylesheet', href='../../assets/css/clear.css')
+    link(rel='stylesheet', href='../../assets/css/PlayVideo.css')
+    link(rel='stylesheet', href='https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css')
+
+//- 网站的主体内容区域
+block content
+    .PlayVideo
+        .title
+            span #{video.caption}
+            i(class="iconfont down_video icon-changyongicon-")
+            i(class="iconfont down_comment icon-comment")
+        .comment_list
+            each val,index in Comment.commentList
+                .item_comment
+                    img(src="#{val.headurl}")
+                    .list_item
+                        .item_title #{val.authorName}
+                        .item_content #{val.content}
+                        i(class="iconfont icon-like")
+                            span.numbe #{val.likedCount}
+                            span.view_other
+                                - if (val.subComments.length != 0)
+                                    span 查看#{val.subCommentCount}条评论
+                                    i(class="iconfont icon-cc-down")
+                            .showComment
+                                each v,i in val.subComments
+                                    .item_comment.sub_comment
+                                        img(src="#{v.headurl}")
+                                        .list_item
+                                            .item_title #{v.authorName}
+                                            .item_content #{v.content}
+
+        - if (img == true)
+            .swiper-container
+                .swiper-wrapper
+                    - each val,index in video.list
+                        .swiper-slide
+                            img(src="#{val}")
+                .swiper-pagination
+                .swiper-button-prev
+                .swiper-button-next
+        - else
+            video#my-video(controlsList="nodownload" loop controls autoplay
+                poster='#{video.poster}'
+                src="#{video.playUrl}")
+
+block script
+    script(src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js")
+    script(src="../../assets/js/page/PlayVideo.js")