diff --git a/assets/css/joe.video.css b/assets/css/joe.video.css index a61b238..61f5761 100644 --- a/assets/css/joe.video.css +++ b/assets/css/joe.video.css @@ -1 +1 @@ -.joe_video__contain{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px}.joe_video__contain-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__contain-title::before{content:'';position:absolute;border-style:solid;border-width:10px;bottom:-20px;left:0;z-index:-1;border-color:var(--theme) transparent transparent}.joe_video__type{margin-bottom:15px}.joe_video__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_video__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_video__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__list{margin-bottom:15px}.joe_video__list-item{display:grid;gap:15px;grid-template-columns:repeat(6, 1fr);border-top:1px solid var(--classC);padding-top:15px}.joe_video__list-item .item{position:relative;border-radius:var(--radius-inner);overflow:hidden}.joe_video__list-item .item .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__list-item .item .thumb{position:relative;height:220px}.joe_video__list-item .item .thumb .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__list-item .item .thumb::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.3s ease-out;z-index:2}.joe_video__list-item .item .thumb::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;background:url(../img/play.png) no-repeat;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_video__list-item .item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_video__list-item .item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_video__list-item .item .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;text-align:center;color:var(--routine);background:var(--classD);height:34px;line-height:34px;font-size:12px}.joe_video__list-item .error{text-align:center;color:var(--minor)}.joe_video__list-item:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_video__list-item:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_video__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_video__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_video__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_video__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_video__pagination-item.active,.joe_video__pagination-item:hover{color:#fff;background:var(--theme)}.joe_video__pagination-item.active svg,.joe_video__pagination-item:hover svg{fill:#fff}.joe_video__detail{margin-bottom:15px}.joe_video__detail-info{display:flex;border-top:1px solid var(--classC);padding-top:15px}.joe_video__detail-info .thumbnail{position:relative;width:180px;height:250px;min-width:180px;min-height:180px;margin-right:15px}.joe_video__detail-info .thumbnail .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__detail-info .thumbnail .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__detail-info .description{overflow:hidden}.joe_video__detail-info .description dt{font-size:24px;color:var(--main);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.joe_video__detail-info .description dd{position:relative;padding-left:45px;line-height:24px;margin-bottom:5px}.joe_video__detail-info .description dd .muted{position:absolute;left:0;color:var(--minor)}.joe_video__detail-info .description dd .text{word-break:break-all;color:var(--routine);display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.joe_video__detail-info .error{color:var(--minor);margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__player-play{width:100%;height:480px;background:#000} +.joe_video__contain{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px}.joe_video__contain-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__contain-title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_video__type{margin-bottom:15px}.joe_video__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_video__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_video__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__list{margin-bottom:15px}.joe_video__list-item{display:grid;gap:15px;grid-template-columns:repeat(6, 1fr);border-top:1px solid var(--classC);padding-top:15px}.joe_video__list-item .item{position:relative;border-radius:var(--radius-inner);overflow:hidden}.joe_video__list-item .item .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__list-item .item .thumb{position:relative;height:220px}.joe_video__list-item .item .thumb .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__list-item .item .thumb::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.3s ease-out;z-index:2}.joe_video__list-item .item .thumb::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;background:url(../img/play.png) no-repeat;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_video__list-item .item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_video__list-item .item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_video__list-item .item .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;text-align:center;color:var(--routine);background:var(--classD);height:34px;line-height:34px;font-size:12px}.joe_video__list-item .error{text-align:center;color:var(--minor)}.joe_video__list-item:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_video__list-item:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_video__list-search{position:absolute;top:15px;right:15px;display:flex;align-items:center}.joe_video__list-search .input{width:180px;height:30px;padding:0 12px;color:var(--routine);background:var(--background);border:1px solid var(--theme);font-size:12px}.joe_video__list-search .button{height:30px;border:none;background:var(--theme);color:#fff;padding:0 12px;font-size:12px}.joe_video__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_video__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_video__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_video__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_video__pagination-item.active,.joe_video__pagination-item:hover{color:#fff;background:var(--theme)}.joe_video__pagination-item.active svg,.joe_video__pagination-item:hover svg{fill:#fff}.joe_video__detail{margin-bottom:15px}.joe_video__detail-info{display:flex;border-top:1px solid var(--classC);padding-top:15px}.joe_video__detail-info .thumbnail{position:relative;width:180px;height:250px;min-width:180px;min-height:180px;margin-right:15px}.joe_video__detail-info .thumbnail .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__detail-info .thumbnail .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__detail-info .description{overflow:hidden}.joe_video__detail-info .description dt{font-size:24px;color:var(--main);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.joe_video__detail-info .description dd{position:relative;padding-left:45px;line-height:24px;margin-bottom:5px}.joe_video__detail-info .description dd .muted{position:absolute;left:0;color:var(--minor)}.joe_video__detail-info .description dd .text{word-break:break-all;color:var(--routine);display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.joe_video__detail-info .error{color:var(--minor);margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__player{margin-bottom:15px}.joe_video__player-play{width:100%;height:480px;background:#000}.joe_video__source{margin-bottom:15px}.joe_video__source:last-child{margin-bottom:0}.joe_video__source-list{display:grid;grid-template-columns:repeat(8, 1fr);gap:15px;border-top:1px solid var(--classC);padding-top:15px}.joe_video__source-list .item{height:30px;line-height:30px;border-radius:14px;background:var(--classD);color:var(--routine);cursor:pointer;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;padding:0 10px}.joe_video__source-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__source-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)} diff --git a/assets/css/joe.video.scss b/assets/css/joe.video.scss index ab75d63..d5d55f3 100644 --- a/assets/css/joe.video.scss +++ b/assets/css/joe.video.scss @@ -1,287 +1,350 @@ .joe_video { - &__contain { - position: relative; - background: var(--background); - border-radius: var(--radius-wrap); - box-shadow: var(--box-shadow); - padding: 60px 15px 15px; - &-title { - position: absolute; - top: 15px; - left: -10px; - background: var(--theme); - color: #fff; - font-weight: 500; - box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15); - height: 30px; - line-height: 30px; - padding: 0 12px; - border-radius: 2px 2px 2px 0; - user-select: none; - &::before { - content: ''; - position: absolute; - border-style: solid; - border-width: 10px; - bottom: -20px; - left: 0; - z-index: -1; - border-color: var(--theme) transparent transparent; - } - } - } - &__type { - margin-bottom: 15px; - &-list { - display: grid; - gap: 15px; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); - border-top: 1px solid var(--classC); - padding-top: 15px; - .item { - user-select: none; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - background: var(--classD); - height: 28px; - line-height: 28px; - border-radius: 14px; - cursor: pointer; - color: var(--routine); - font-size: 12px; - padding: 0 15px; - text-align: center; - transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s; - &.active { - transform: translateY(-2px); - color: #fff; - background: var(--theme); - box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); - } - &:hover { - transform: translateY(-2px); - box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); - } - } - .error { - text-align: center; - color: var(--routine); - user-select: none; - } - } - } - &__list { - margin-bottom: 15px; - &-item { - display: grid; - gap: 15px; - grid-template-columns: repeat(6, 1fr); - border-top: 1px solid var(--classC); - padding-top: 15px; - .item { - position: relative; - border-radius: var(--radius-inner); - overflow: hidden; - .year { - position: absolute; - top: 8px; - right: 8px; - padding: 2px 5px; - border-radius: 2px; - font-size: 12px; - font-style: normal; - background: #ff6800; - color: #fff; - z-index: 3; - } - .thumb { - position: relative; - height: 220px; - .pic { - width: 100%; - height: 100%; - object-fit: cover; - } - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0); - transition: background 0.3s ease-out; - z-index: 2; - } - &::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 50px; - height: 50px; - margin: -25px 0 0 -25px; - opacity: 0; - background: url(../img/play.png) no-repeat; - transform: scale(2); - transition: transform 0.25s ease-out, opacity 0.25s ease-out; - z-index: 3; - } - &:hover { - &::before { - background: rgba(0, 0, 0, 0.5); - } - &::after { - opacity: 0.8; - transform: scale(1); - } - } - } - .title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 0 10px; - text-align: center; - color: var(--routine); - background: var(--classD); - height: 34px; - line-height: 34px; - font-size: 12px; - } - } - .error { - text-align: center; - color: var(--minor); - } - &:empty { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 180px; - &::after { - content: ''; - display: block; - width: 70px; - height: 70px; - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=); - background-repeat: no-repeat; - background-size: 100% 100%; - } - } - } - } - &__pagination { - display: flex; - align-items: center; - justify-content: flex-end; - &-item { - user-select: none; - cursor: pointer; - margin-left: 5px; - height: 32px; - line-height: 32px; - padding: 0 15px; - background: var(--background); - color: var(--main); - border-radius: 2px; - transition: background 0.35s, color 0.35s; - svg { - fill: var(--routine); - transition: fill 0.35s; - } - .next { - transform: rotate(180deg); - } - &.active, - &:hover { - color: #fff; - background: var(--theme); - svg { - fill: #fff; - } - } - } - } - &__detail { - margin-bottom: 15px; - &-info { + &__contain { + position: relative; + background: var(--background); + border-radius: var(--radius-wrap); + box-shadow: var(--box-shadow); + padding: 60px 15px 15px; + &-title { + position: absolute; + top: 15px; + left: -10px; + background: var(--theme); + color: #fff; + font-weight: 500; + box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15); + height: 30px; + line-height: 30px; + padding: 0 12px; + border-radius: 2px 2px 2px 0; + user-select: none; + &::after { + content: ''; + position: absolute; + bottom: -10px; + left: -10px; + border-style: solid; + border-width: 10px; + border-color: var(--theme) transparent transparent; + transform: rotate(90deg); + } + } + } + &__type { + margin-bottom: 15px; + &-list { + display: grid; + gap: 15px; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + border-top: 1px solid var(--classC); + padding-top: 15px; + .item { + user-select: none; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + background: var(--classD); + height: 28px; + line-height: 28px; + border-radius: 14px; + cursor: pointer; + color: var(--routine); + font-size: 12px; + padding: 0 15px; + text-align: center; + transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s; + &.active { + transform: translateY(-2px); + color: #fff; + background: var(--theme); + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); + } + &:hover { + transform: translateY(-2px); + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); + } + } + .error { + text-align: center; + color: var(--routine); + user-select: none; + } + } + } + &__list { + margin-bottom: 15px; + &-item { + display: grid; + gap: 15px; + grid-template-columns: repeat(6, 1fr); + border-top: 1px solid var(--classC); + padding-top: 15px; + .item { + position: relative; + border-radius: var(--radius-inner); + overflow: hidden; + .year { + position: absolute; + top: 8px; + right: 8px; + padding: 2px 5px; + border-radius: 2px; + font-size: 12px; + font-style: normal; + background: #ff6800; + color: #fff; + z-index: 3; + } + .thumb { + position: relative; + height: 220px; + .pic { + width: 100%; + height: 100%; + object-fit: cover; + } + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0); + transition: background 0.3s ease-out; + z-index: 2; + } + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 50px; + height: 50px; + margin: -25px 0 0 -25px; + opacity: 0; + background: url(../img/play.png) no-repeat; + transform: scale(2); + transition: transform 0.25s ease-out, opacity 0.25s ease-out; + z-index: 3; + } + &:hover { + &::before { + background: rgba(0, 0, 0, 0.5); + } + &::after { + opacity: 0.8; + transform: scale(1); + } + } + } + .title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 10px; + text-align: center; + color: var(--routine); + background: var(--classD); + height: 34px; + line-height: 34px; + font-size: 12px; + } + } + .error { + text-align: center; + color: var(--minor); + } + &:empty { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 180px; + &::after { + content: ''; + display: block; + width: 70px; + height: 70px; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=); + background-repeat: no-repeat; + background-size: 100% 100%; + } + } + } + &-search { + position: absolute; + top: 15px; + right: 15px; display: flex; - border-top: 1px solid var(--classC); - padding-top: 15px; - .thumbnail { - position: relative; - width: 180px; - height: 250px; - min-width: 180px; - min-height: 180px; - margin-right: 15px; - .pic { - width: 100%; - height: 100%; - object-fit: cover; - } - .year { - position: absolute; - top: 8px; - right: 8px; - padding: 2px 5px; - border-radius: 2px; - font-size: 12px; - font-style: normal; - background: #ff6800; - color: #fff; - z-index: 3; - } + align-items: center; + .input { + width: 180px; + height: 30px; + padding: 0 12px; + color: var(--routine); + background: var(--background); + border: 1px solid var(--theme); + font-size: 12px; } - .description { - overflow: hidden; - dt { - font-size: 24px; - color: var(--main); - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-bottom: 10px; - } - dd { - position: relative; - padding-left: 45px; - line-height: 24px; - margin-bottom: 5px; - .muted { - position: absolute; - left: 0; - color: var(--minor); - } - .text { - word-break: break-all; - color: var(--routine); - display: -webkit-box; - -webkit-line-clamp: 2; - /*! autoprefixer: off */ - -webkit-box-orient: vertical; - /* autoprefixer: on */ - overflow: hidden; - text-overflow: ellipsis; - } - } + .button { + height: 30px; + border: none; + background: var(--theme); + color: #fff; + padding: 0 12px; + font-size: 12px; } - .error { - color: var(--minor); - margin: 0 auto; - user-select: none; - } - } - } - &__player { - &-play { - width: 100%; - height: 480px; - background: #000; - } - } + } + } + &__pagination { + display: flex; + align-items: center; + justify-content: flex-end; + &-item { + user-select: none; + cursor: pointer; + margin-left: 5px; + height: 32px; + line-height: 32px; + padding: 0 15px; + background: var(--background); + color: var(--main); + border-radius: 2px; + transition: background 0.35s, color 0.35s; + svg { + fill: var(--routine); + transition: fill 0.35s; + } + .next { + transform: rotate(180deg); + } + &.active, + &:hover { + color: #fff; + background: var(--theme); + svg { + fill: #fff; + } + } + } + } + &__detail { + margin-bottom: 15px; + &-info { + display: flex; + border-top: 1px solid var(--classC); + padding-top: 15px; + .thumbnail { + position: relative; + width: 180px; + height: 250px; + min-width: 180px; + min-height: 180px; + margin-right: 15px; + .pic { + width: 100%; + height: 100%; + object-fit: cover; + } + .year { + position: absolute; + top: 8px; + right: 8px; + padding: 2px 5px; + border-radius: 2px; + font-size: 12px; + font-style: normal; + background: #ff6800; + color: #fff; + z-index: 3; + } + } + .description { + overflow: hidden; + dt { + font-size: 24px; + color: var(--main); + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 10px; + } + dd { + position: relative; + padding-left: 45px; + line-height: 24px; + margin-bottom: 5px; + .muted { + position: absolute; + left: 0; + color: var(--minor); + } + .text { + word-break: break-all; + color: var(--routine); + display: -webkit-box; + -webkit-line-clamp: 2; + /*! autoprefixer: off */ + -webkit-box-orient: vertical; + /* autoprefixer: on */ + overflow: hidden; + text-overflow: ellipsis; + } + } + } + .error { + color: var(--minor); + margin: 0 auto; + user-select: none; + } + } + } + &__player { + margin-bottom: 15px; + &-play { + width: 100%; + height: 480px; + background: #000; + } + } + &__source { + margin-bottom: 15px; + &:last-child { + margin-bottom: 0; + } + &-list { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 15px; + border-top: 1px solid var(--classC); + padding-top: 15px; + .item { + height: 30px; + line-height: 30px; + border-radius: 14px; + background: var(--classD); + color: var(--routine); + cursor: pointer; + text-align: center; + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s; + padding: 0 10px; + &.active { + transform: translateY(-2px); + color: #fff; + background: var(--theme); + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); + } + &:hover { + transform: translateY(-2px); + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); + } + } + } + } } diff --git a/assets/js/joe.video.js b/assets/js/joe.video.js index 4bb1287..9a690c1 100644 --- a/assets/js/joe.video.js +++ b/assets/js/joe.video.js @@ -1,134 +1,147 @@ /* 视频页面需要用到JS */ -console.time('Video.js执行时长') +console.time('Video.js执行时长'); document.addEventListener('DOMContentLoaded', () => { - const p = new URLSearchParams(window.location.search) - const vod_id = p.get('vod_id') - if (vod_id) { - initVideoDetail() - } else { - initVideoList() - } - - /* 初始化列表页 */ - function initVideoList() { - /* 当前的分类id */ - let queryData = { pg: -999, t: -999 } - /* 总页数 */ - let total = -999 - /* 是否正在加载列表 */ - let isLoading = false - /* 获取视频分类 */ - $.ajax({ - url: Joe.BASE_API, - type: 'POST', - data: { routeType: 'maccms_list' }, - success(res) { - if (res.code !== 1) return $('.joe_video__type-list').html(`
  • ${res.data}
  • `) - if (!res.data.class.length) return $('.joe_video__type-list').html(`
  • 暂无数据!
  • `) - let htmlStr = '
  • 全部
  • ' - res.data.class.forEach(_ => (htmlStr += `
  • ${_.type_name}
  • `)) - $('.joe_video__type-list').html(htmlStr) - $('.joe_video__type-list .item').first().click() - } - }) - /* 点击切换分类 */ - $('.joe_video__type-list').on('click', '.item', function () { - const t = $(this).attr('data-t') - if (t === queryData.t || isLoading) return - window.scrollTo({ top: 0, behavior: 'smooth' }) - $(this).addClass('active').siblings().removeClass('active') - queryData.pg = 0 - queryData.t = t - renderDom() - }) - /* 渲染视频列表 */ - function renderDom() { - $('.joe_video__list-item').css('display', '').html('') - isLoading = true - $.ajax({ - url: Joe.BASE_API, - type: 'POST', - data: { routeType: 'maccms_list', t: queryData.t, pg: queryData.pg, ac: 'videolist' }, - success(res) { - if (res.code !== 1) return $('.joe_video__list-item').css('display', 'block').html('

    数据加载失败!请检查!

    ') - if (!res.data.list.length) { - $('.joe_video__list-item').css('display', 'block').html('

    当前分类暂无数据!

    ') - } else { - let htmlStr = '' - res.data.list.forEach(_ => { - htmlStr += ` + const p = new URLSearchParams(window.location.search); + const vod_id = p.get('vod_id'); + if (vod_id) { + initVideoDetail(); + } else { + initVideoList(); + } + /* 初始化列表页 */ + function initVideoList() { + /* 当前的分类id */ + let queryData = { pg: '', t: '', wd: '' }; + /* 总页数 */ + let pagecount = ''; + /* 是否正在加载列表 */ + let isLoading = false; + /* 获取视频分类 */ + $.ajax({ + url: Joe.BASE_API, + type: 'POST', + data: { routeType: 'maccms_list' }, + success(res) { + if (res.code !== 1) return $('.joe_video__type-list').html(`
  • ${res.data}
  • `); + if (!res.data.class.length) return $('.joe_video__type-list').html(`
  • 暂无数据!
  • `); + let htmlStr = '
  • 全部
  • '; + res.data.class.forEach(_ => (htmlStr += `
  • ${_.type_name}
  • `)); + $('.joe_video__type-list').html(htmlStr); + $('.joe_video__type-list .item').first().click(); + } + }); + /* 点击切换分类 */ + $('.joe_video__type-list').on('click', '.item', function () { + const t = $(this).attr('data-t'); + if (isLoading) return; + window.scrollTo({ top: 0, behavior: 'smooth' }); + $(this).addClass('active').siblings().removeClass('active'); + queryData.pg = 1; + queryData.t = t; + queryData.wd = ''; + $('.joe_video__list-search input').val(''); + renderDom(); + }); + /* 渲染视频列表 */ + function renderDom() { + $('.joe_video__list-item').css('display', '').html(''); + isLoading = true; + $.ajax({ + url: Joe.BASE_API, + type: 'POST', + data: { routeType: 'maccms_list', ac: 'videolist', t: queryData.t, pg: queryData.pg, wd: queryData.wd }, + success(res) { + if (res.code !== 1) return $('.joe_video__list-item').css('display', 'block').html('

    数据加载失败!请检查!

    '); + if (!res.data.list.length) { + $('.joe_video__list-item').css('display', 'block').html('

    暂无数据!

    '); + } else { + let htmlStr = ''; + res.data.list.forEach(_ => { + htmlStr += ` ${_.vod_year}
    ${_.vod_name}

    ${_.vod_name}

    -
    ` - }) - $('.joe_video__list-item').html(htmlStr) - new LazyLoad('.video_lazyload') - } - total = res.data.pagecount - initPagination() - }, - complete: () => (isLoading = false) - }) - } - /* 初始化分页 */ - function initPagination() { - let htmlStr = '' - if (queryData.pg !== 0) { - htmlStr += ` -
  • 首页
  • -
  • - - - -
  • -
  • ${queryData.pg}
  • - ` - } - htmlStr += `
  • ${queryData.pg + 1}
  • ` - if (queryData.pg != total) { - htmlStr += ` -
  • ${queryData.pg + 2}
  • -
  • - - - -
  • - ` - } - if (queryData.pg < total) htmlStr += `
  • 末页
  • ` - $('.joe_video__pagination').html(htmlStr) - } - /* 切换分页 */ - $('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () { - const pg = $(this).attr('data-pg') - if (!pg || isLoading) return - window.scrollTo({ top: 0, behavior: 'smooth' }) - queryData.pg = Number(pg) - renderDom() - }) - } - - /* 初始化播放页 */ - function initVideoDetail() { - $.ajax({ - url: Joe.BASE_API, - type: 'POST', - data: { - routeType: 'maccms_list', - ac: 'detail', - ids: vod_id - }, - success(res) { - if (res.code !== 1) return $('.joe_video__detail-info').html(`

    ${res.data}

    `) - if (!res.data.list.length) return $('.joe_video__detail-info').html(`

    数据抓取异常!请检查!

    `) - const item = res.data.list[0] - /* 设置视频详情 */ - $('.joe_video__detail-info').html(` + `; + }); + $('.joe_video__list-item').html(htmlStr); + new LazyLoad('.video_lazyload'); + } + pagecount = res.data.pagecount; + initPagination(); + }, + complete: () => (isLoading = false) + }); + } + /* 初始化分页 */ + function initPagination() { + let htmlStr = ''; + if (queryData.pg != 1) { + htmlStr += ` +
  • 首页
  • +
  • + + + +
  • +
  • ${queryData.pg - 1}
  • + `; + } + htmlStr += `
  • ${queryData.pg}
  • `; + if (queryData.pg != pagecount) { + htmlStr += ` +
  • ${queryData.pg + 1}
  • +
  • + + + +
  • + `; + } + if (queryData.pg < pagecount) htmlStr += `
  • 末页
  • `; + $('.joe_video__pagination').html(htmlStr); + } + /* 切换分页 */ + $('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () { + const pg = $(this).attr('data-pg'); + if (!pg || isLoading) return; + window.scrollTo({ top: 0, behavior: 'smooth' }); + queryData.pg = Number(pg); + renderDom(); + }); + /* 搜索功能 */ + const searchFn = () => { + const val = $('.joe_video__list-search input').val(); + if (!val || isLoading) return; + queryData.pg = 1; + queryData.t = ''; + queryData.wd = val; + $('.joe_video__type-list .item').first().addClass('active').siblings().removeClass('active'); + renderDom(); + }; + $('.joe_video__list-search .button').on('click', searchFn); + $('.joe_video__list-search .input').on('keyup', e => e.keyCode === 13 && searchFn()); + } + /* 初始化播放页 */ + function initVideoDetail() { + const player = $('.joe_video__player-play').attr('data-player'); + $.ajax({ + url: Joe.BASE_API, + type: 'POST', + data: { + routeType: 'maccms_list', + ac: 'detail', + ids: vod_id + }, + success(res) { + if (res.code !== 1) return $('.joe_video__detail-info').html(`

    ${res.data}

    `); + if (!res.data.list.length) return $('.joe_video__detail-info').html(`

    数据抓取异常!请检查!

    `); + const item = res.data.list[0]; + /* 设置视频详情 */ + $('.joe_video__detail-info').html(`
    ${item.vod_name} ${item.vod_year} @@ -140,23 +153,53 @@ document.addEventListener('DOMContentLoaded', () => {
    导演:

    ${item.vod_director || '未知'}

    简介:

    ${getContent(item)}

    - `) - new LazyLoad('.video_lazyload') - /* 设置视频播放标题 */ - $('.joe_video__player .joe_video__contain-title').html('正在播放:' + item.vod_name) - } - }) - } - - function getContent(item) { - if (item.vod_content) { - return item.vod_content.replace(/<[^>]+>/g, '') - } else if (item.vod_blurb) { - return item.vod_blurb.replace(/<[^>]+>/g, '') - } else { - return '暂无简介' - } - } - - console.timeEnd('Video.js执行时长') -}) + `); + new LazyLoad('.video_lazyload'); + /* 设置视频播放标题 */ + $('.joe_video__player .joe_video__contain-title').html('正在播放:' + item.vod_name); + /* 设置播放链接 */ + let parseList = str => { + let htmlStr = ''; + let arr = str.split('#'); + arr.forEach(_ => (htmlStr += `
  • ${_.split('$')[0] || ''}
  • `)); + return htmlStr; + }; + let playFromArr = item.vod_play_from.split('$$$'); + let playUrlArr = item.vod_play_url.split('$$$'); + let maps = new Map(); + playFromArr.forEach((element, index) => maps.set(element, playUrlArr[index] || [])); + let htmlStr = ''; + let index = 0; + for (let [key, value] of maps) { + index++; + htmlStr += ` +
    +
    播放线路 ${index}
    + +
    + `; + } + $('.joe_video__player').after(htmlStr); + $('.joe_video__source').first().find('.joe_video__source-list .item').first().click(); + } + }); + $(document).on('click', '.joe_video__source-list .item', function () { + $('.joe_video__source-list .item').removeClass('active'); + $(this).addClass('active'); + const url = $(this).attr('data-src') || $(this).html(); + $('.joe_video__player-play').attr({ src: player + url }); + const offset = $('.joe_video__player').offset().top - $('.joe_header').height() - 15; + window.scrollTo({ top: offset, behavior: 'smooth' }); + }); + } + function getContent(item) { + if (item.vod_content) { + return item.vod_content.replace(/<[^>]+>/g, ''); + } else if (item.vod_blurb) { + return item.vod_blurb.replace(/<[^>]+>/g, ''); + } else { + return '暂无简介'; + } + } + console.timeEnd('Video.js执行时长'); +}); diff --git a/core/api.php b/core/api.php index 32daf62..c5d6656 100644 --- a/core/api.php +++ b/core/api.php @@ -6,11 +6,7 @@ function _getRanking($self) header("HTTP/1.1 200 OK"); $ranking_txt = Helper::options()->JAside_Ranking; $ranking_arr = explode("$", $ranking_txt); - $arrContextOptions = [ - 'ssl' => ['verify_peer' => false, 'verify_peer_name' => false], - 'http' => ['method' => 'GET', 'timeout' => 5] - ]; - $json = file_get_contents("https://the.top/v1/{$ranking_arr[1]}/1/9", false, stream_context_create($arrContextOptions)); + $json = _curl("https://the.top/v1/{$ranking_arr[1]}/1/9"); $res = json_decode($json, TRUE); if ($res['code'] === 0) { $self->response->throwJson([ @@ -176,11 +172,7 @@ function _pushRecord($self) function _getWallpaperType($self) { header("HTTP/1.1 200 OK"); - $arrContextOptions = [ - 'ssl' => ['verify_peer' => false, 'verify_peer_name' => false], - 'http' => ['method' => 'GET', 'timeout' => 5] - ]; - $json = file_get_contents("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome", false, stream_context_create($arrContextOptions)); + $json = _curl("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ @@ -202,15 +194,7 @@ function _getWallpaperList($self) $cid = $self->request->cid; $start = $self->request->start; $count = $self->request->count; - $arrContextOptions = [ - 'ssl' => ['verify_peer' => false, 'verify_peer_name' => false], - 'http' => ['method' => 'GET', 'timeout' => 5] - ]; - $json = file_get_contents( - "http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome", - false, - stream_context_create($arrContextOptions) - ); + $json = _curl("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ @@ -236,17 +220,8 @@ function _getMaccmsList($self) $t = $self->request->t ? $self->request->t : ''; $pg = $self->request->pg ? $self->request->pg : ''; $wd = $self->request->wd ? $self->request->wd : ''; - if ($cms_api) { - $arrContextOptions = [ - 'ssl' => ['verify_peer' => false, 'verify_peer_name' => false], - 'http' => ['method' => 'GET', 'timeout' => 5] - ]; - $json = file_get_contents( - $cms_api . '?ac=' . $ac . '&ids=' . $ids . '&t=' . $t . '&pg=' . $pg . '&wd=' . $wd, - false, - stream_context_create($arrContextOptions) - ); + $json = _curl("{$cms_api}?ac={$ac}&ids={$ids}&t={$t}&pg={$pg}&wd={$wd}"); $res = json_decode($json, TRUE); if ($res['code'] === 1) { $self->response->throwJson([ diff --git a/core/function.php b/core/function.php index 4aaccff..9166061 100644 --- a/core/function.php +++ b/core/function.php @@ -262,4 +262,19 @@ function _getAsideAuthorNav() "; } } -} \ No newline at end of file +} + +function _curl($url) +{ + $ch = curl_init(); + curl_setopt($ch, CURLOPT_URL, $url); + curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); + if (strpos($url, 'https') !== false) { + curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); + curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); + } + curl_setopt($ch, CURLOPT_TIMEOUT, 5); + $result = curl_exec($ch); + curl_close($ch); + return $result; +} diff --git a/video.php b/video.php index d15bdf7..902e351 100644 --- a/video.php +++ b/video.php @@ -34,7 +34,7 @@
    正在播放:
    - +
    @@ -45,11 +45,14 @@
    视频列表
    +
    - need('public/aside.php'); ?>