first commit

项目合集/快手/backend/public/.pydio

@@ -0,0 +1 @@
+05d24c42-200a-40ee-b165-3ee1913d144b

项目合集/快手/backend/public/images/.pydio

@@ -0,0 +1 @@
+a5002f32-53e0-4591-9f76-e5ea7fc89a8a

项目合集/快手/backend/public/javascripts/.pydio

@@ -0,0 +1 @@
+176fe3ac-5a58-4fd2-bdbe-a15f9d8c8577

项目合集/快手/backend/public/javascripts/index.js

@@ -0,0 +1,127 @@
+let pageNum = "";
+
+getVideoList();
+
+/**
+ * 发送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="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();
+  if (scrollTop + windowHeight == scrollHeight) {
+    getVideoList()
+    console.log("到底了,发起请求")
+  }
+});
+
+// 关闭视频播放弹窗
+$(".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:3000/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);
+  });
+}

项目合集/快手/backend/public/stylesheets/.pydio

@@ -0,0 +1 @@
+0a439c7f-73ce-45b1-a330-6586fe91ebfa

项目合集/快手/backend/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%;height:260px;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 .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}

项目合集/快手/backend/public/stylesheets/index.less

@@ -0,0 +1,97 @@
+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%;
+  height: 260px;
+  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;
+      }
+    }
+    .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;
+        }
+      }
+    }
+  }
+}

项目合集/快手/backend/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}

项目合集/快手/backend/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;
+}