first commit

ksAll/public/.pydio

@@ -0,0 +1 @@
+34772b88-49a3-4114-a9d4-1c185188e99e

ksAll/public/images/.pydio

@@ -0,0 +1 @@
+8f4c1da5-8f6e-4eba-b406-0f2771bc6df3

ksAll/public/javascripts/.pydio

@@ -0,0 +1 @@
+1fd0ed1e-e902-4979-a707-36d7e75c863e

ksAll/public/javascripts/index.js

@@ -0,0 +1,155 @@
+let pageNum = "";
+
+function checkAjax() {
+  if (location.search.length == 0) {
+    getVideoList();
+  } else {
+    getRecommendFeeds();
+  }
+}
+
+/**
+ * 获取和 photoId 相似的推荐数据
+ */
+function getRecommendFeeds() {
+  Http("/RecommendFeeds", {
+    photoId: location.search.split("=")[1]
+  }, res => {
+    let { list } = res;
+    console.log(list);
+    list.forEach(function (val, index) {
+      RenderList(val);
+    })
+  })
+}
+
+/**
+ * 发送ajax请求被收藏的数据
+ */
+function getVideoList() {
+  Http("/list", { page: pageNum }, res => {
+    let MMList = res.data;
+    pageNum = MMList.pcursor;
+    MMList.list.forEach(function (val, index) {
+      RenderList(val);
+    })
+  })
+}
+
+function RenderList(val) {
+  $("ul").append(`
+          <li class="list">
+            <div class="back">
+              <div class="zz" style="background: url('${val.thumbnailUrl}'); background-position: center center;"></div>
+              <img src="${val.thumbnailUrl}"/>
+            </div>
+            <div class="list-bottom">
+              <div class="bottom-info">
+                <a target="_blank" title="${val.user.id}" href="https://live.kuaishou.com/profile/${val.user.id}">
+                  <img class="avatar" src="${val.user.avatar}"/>
+                  <span class="title">${val.caption}</span>
+                </a>
+              </div>
+              <div class="pid">${val.id}</div>
+              <div class="action" principalId="${val.user.id}" photoId="${val.id}">
+                <a class="down">下载</a>
+                <a class="play">播放</a>
+              </div>
+            </div>
+          </li>
+  `);
+
+  BindPlayClick();
+  BindDownClick();
+}
+
+// 播放视频
+function BindPlayClick() {
+  document.querySelectorAll(".play").forEach((val, index) => {
+    val.onclick = function () {
+      Http('/play', {
+        principalId: $(val).parent().attr("principalId"),
+        photoId: $(val).parent().attr("photoId")
+      }, url => {
+        $(".video video").attr("src", url.playUrl);
+        $(".video").slideDown("slow");
+      })
+    }
+  })
+}
+
+// 下载视频
+function BindDownClick() {
+
+  document.querySelectorAll(".down").forEach((val, index) => {
+    val.onclick = function () {
+      Http('/play', {
+        principalId: $(val).parent().attr("principalId"),
+        photoId: $(val).parent().attr("photoId")
+      }, url => {
+        downMp4(url.playUrl, $(val).parent().attr("photoId"))
+      })
+    }
+  });
+}
+
+
+// 滚动加载数据
+$(window).scroll(function () {
+  var scrollTop = $(this).scrollTop();
+  var scrollHeight = $(document).height();
+  var windowHeight = $(this).height();
+  console.log("scrollTop: ", scrollTop);
+  console.log("windowHeight: ", windowHeight);
+  console.log("scrollHeight: ", scrollHeight);
+  console.log("scrollTop + windowHeight: ", scrollTop + windowHeight);
+  if (Number((scrollTop + windowHeight).toFixed()) == scrollHeight) {
+    console.log("到底了,发起请求")
+    checkAjax()
+  }
+});
+
+// 关闭视频播放弹窗
+$(".close").click(function () {
+  $("video").get(0).pause();
+  $(".video video").attr("src", "");
+  $(".video").slideUp("slow");
+});
+
+// video 父元素被悬浮就开始视频播放
+// 以实现不静音而自动播放
+$(".video").mouseover(function () {
+  $("video").get(0).play()
+});
+
+
+// 发送ajax请求
+function Http(URL, params, callback) {
+  $.ajax({
+    url: `http://127.0.0.1:8090/api${URL}`,
+    type: 'GET',
+    data: params,
+    success: (res) => {
+      callback(res)
+    }
+  })
+}
+
+// 下载MP4视频
+function downMp4(urls, photoId) {
+  fetch(urls).then(res => res.blob()).then(blob => {
+    const a = document.createElement('a');
+
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    const url = window.URL.createObjectURL(blob);
+
+    a.href = url;
+    a.download = `bmy-${photoId}.mp4`;
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  });
+}
+
+checkAjax();

ksAll/public/javascripts/recommend.js

@@ -0,0 +1,30 @@
+class recommend {
+    constructor() {
+        this.getRecommendFeeds();
+
+    }
+
+    getRecommendFeeds() {
+        this.Http("/RecommendFeeds", { 
+            photoId: location.search.split("=")[1] 
+        }, res => {
+            let { list } = res;
+           console.log(list);
+        })
+    }
+
+
+    Http(URL, params, callback) {
+        $.ajax({
+            url: `http://127.0.0.1:8090/api${URL}`,
+            type: 'GET',
+            data: params,
+            success: (res) => {
+                callback(res)
+            }
+        })
+    }
+
+}
+
+new recommend();

ksAll/public/javascripts/utils/.pydio

@@ -0,0 +1 @@
+0f1f1ba9-af22-4072-9da3-28317b98af52

ksAll/public/javascripts/utils/index.js

@@ -0,0 +1,7 @@
+class Utils {
+    
+}
+
+var {
+    
+} = new Utils();

ksAll/public/stylesheets/.pydio

@@ -0,0 +1 @@
+45365c93-931b-44bb-92e0-47b88e544036

ksAll/public/stylesheets/index.css

@@ -0,0 +1 @@
+ul{display:flex;overflow:hidden;justify-content:space-around;flex-wrap:wrap}.video{text-align:center;background:rgba(0,0,0,0.87843137);width:100%;height:100%;position:fixed;z-index:9;display:none}.video .close{width:60px;height:60px;background:rgba(255,255,255,0.61176471);border-radius:100%;color:#615e5e;text-align:center;line-height:55px;position:absolute;right:20px;top:30px;font-size:31px;cursor:pointer}.list{width:15%;margin:10px 10px 10px 10px;background:#fff}.list .back{width:100%;height:178px;text-align:center;position:relative;overflow:hidden}.list .back .zz{position:absolute;width:100%;height:100%;z-index:2;background:#000;filter:blur(10px)}.list .back img{width:103px;height:178px;position:absolute;z-index:3;left:50%;margin-left:-51.5px}.list .list-bottom{padding:10px 5px 5px 5px;box-sizing:border-box}.list .list-bottom .action{display:flex;justify-content:space-between;height:36px;align-items:center;padding:3px 5px 0 5px;color:#b7b7b7;font-size:13px}.list .list-bottom .action a{cursor:pointer}.list .list-bottom .pid{font-size:16px;margin:10px 0;color:#8e8d8d}.list .list-bottom .bottom-info a{display:flex;justify-content:flex-start;align-items:center;color:#bababa}.list .list-bottom .bottom-info a .avatar{width:35px;height:35px;border-radius:100%}.list .list-bottom .bottom-info a .title{font-size:13px;width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:10px}

ksAll/public/stylesheets/index.less

@@ -0,0 +1,101 @@
+ul {
+  display: flex;
+  overflow: hidden;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.video {
+  text-align: center;
+  background: rgba(0, 0, 0, 0.8784313725490196);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 9;
+  display: none;
+  .close {
+    width: 60px;
+    height: 60px;
+    background: rgba(255, 255, 255, 0.611764705882353);
+    border-radius: 100%;
+    color: #615e5e;
+    text-align: center;
+    line-height: 55px;
+    position: absolute;
+    right: 20px;
+    top: 30px;
+    font-size: 31px;
+    cursor: pointer;
+  }
+}
+.list {
+  width: 15%;
+  margin: 10px 10px 10px 10px;
+  background: #fff;
+  .back {
+    width: 100%;
+    height: 178px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    .zz {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      background: #000;
+      filter: blur(10px);
+    }
+    img {
+      width: 103px;
+      height: 178px;
+      position: absolute;
+      z-index: 3;
+      left: 50%;
+      margin-left: -103px / 2;
+    }
+  }
+  .list-bottom {
+    padding: 10px 5px 5px 5px;
+    box-sizing: border-box;
+    .action {
+      display: flex;
+      justify-content: space-between;
+      height: 36px;
+      align-items: center;
+      padding: 3px 5px 0 5px;
+      color: #b7b7b7;
+      font-size: 13px;
+      a {
+        cursor: pointer;
+      }
+    }
+    .pid {
+      font-size: 16px;
+      margin: 10px 0;
+      color: #8e8d8d;
+    }
+    .bottom-info {
+
+      a {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #bababa;
+        .avatar {
+          width: 35px;
+          height: 35px;
+          border-radius: 100%;
+        }
+        .title {
+          font-size: 13px;
+          width: 230px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow:ellipsis;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}

ksAll/public/stylesheets/style.css

@@ -0,0 +1 @@
+body,ul,li,p,a{margin:0;padding:0;list-style:none;text-decoration:none}body{background:#f5f5f5}body,html{width:100%;height:100%}video{outline:none}

ksAll/public/stylesheets/style.less

@@ -0,0 +1,18 @@
+body, ul,li,p,a{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+}
+
+body {
+  background: #f5f5f5;
+}
+
+body,html {
+  width: 100%;
+  height: 100%;
+}
+video {
+  outline: none;
+}