caojiezi2003/Jony
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
杜恒 2021-02-01 18:11:49 +08:00
parent 16742a8c7d
commit df1bd105c6
6 changed files with 556 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/joe.video.css
View File

File diff suppressed because one or more lines are too long

627
assets/css/joe.video.scss
View File

@ -1,287 +1,350 @@
.joe_video { .joe_video {
&__contain { &__contain {
position: relative; position: relative;
background: var(--background); background: var(--background);
border-radius: var(--radius-wrap); border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
padding: 60px 15px 15px; padding: 60px 15px 15px;
&-title { &-title {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: -10px; left: -10px;
background: var(--theme); background: var(--theme);
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15); box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding: 0 12px; padding: 0 12px;
border-radius: 2px 2px 2px 0; border-radius: 2px 2px 2px 0;
user-select: none; user-select: none;
&::before { &::after {
content: ''; content: '';
position: absolute; position: absolute;
border-style: solid; bottom: -10px;
border-width: 10px; left: -10px;
bottom: -20px; border-style: solid;
left: 0; border-width: 10px;
z-index: -1; border-color: var(--theme) transparent transparent;
border-color: var(--theme) transparent transparent; transform: rotate(90deg);
} }
} }
} }
&__type { &__type {
margin-bottom: 15px; margin-bottom: 15px;
&-list { &-list {
display: grid; display: grid;
gap: 15px; gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-top: 1px solid var(--classC); border-top: 1px solid var(--classC);
padding-top: 15px; padding-top: 15px;
.item { .item {
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
background: var(--classD); background: var(--classD);
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
border-radius: 14px; border-radius: 14px;
cursor: pointer; cursor: pointer;
color: var(--routine); color: var(--routine);
font-size: 12px; font-size: 12px;
padding: 0 15px; padding: 0 15px;
text-align: center; text-align: center;
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;
&.active { &.active {
transform: translateY(-2px); transform: translateY(-2px);
color: #fff; color: #fff;
background: var(--theme); background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
} }
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
} }
} }
.error { .error {
text-align: center; text-align: center;
color: var(--routine); color: var(--routine);
user-select: none; user-select: none;
} }
} }
} }
&__list { &__list {
margin-bottom: 15px; margin-bottom: 15px;
&-item { &-item {
display: grid; display: grid;
gap: 15px; gap: 15px;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
border-top: 1px solid var(--classC); border-top: 1px solid var(--classC);
padding-top: 15px; padding-top: 15px;
.item { .item {
position: relative; position: relative;
border-radius: var(--radius-inner); border-radius: var(--radius-inner);
overflow: hidden; overflow: hidden;
.year { .year {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
padding: 2px 5px; padding: 2px 5px;
border-radius: 2px; border-radius: 2px;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
background: #ff6800; background: #ff6800;
color: #fff; color: #fff;
z-index: 3; z-index: 3;
} }
.thumb { .thumb {
position: relative; position: relative;
height: 220px; height: 220px;
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
transition: background 0.3s ease-out; transition: background 0.3s ease-out;
z-index: 2; z-index: 2;
} }
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin: -25px 0 0 -25px; margin: -25px 0 0 -25px;
opacity: 0; opacity: 0;
background: url(../img/play.png) no-repeat; background: url(../img/play.png) no-repeat;
transform: scale(2); transform: scale(2);
transition: transform 0.25s ease-out, opacity 0.25s ease-out; transition: transform 0.25s ease-out, opacity 0.25s ease-out;
z-index: 3; z-index: 3;
} }
&:hover { &:hover {
&::before { &::before {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
&::after { &::after {
opacity: 0.8; opacity: 0.8;
transform: scale(1); transform: scale(1);
} }
} }
} }
.title { .title {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 10px; padding: 0 10px;
text-align: center; text-align: center;
color: var(--routine); color: var(--routine);
background: var(--classD); background: var(--classD);
height: 34px; height: 34px;
line-height: 34px; line-height: 34px;
font-size: 12px; font-size: 12px;
} }
} }
.error { .error {
text-align: center; text-align: center;
color: var(--minor); color: var(--minor);
} }
&:empty { &:empty {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 180px; height: 180px;
&::after { &::after {
content: ''; content: '';
display: block; display: block;
width: 70px; width: 70px;
height: 70px; height: 70px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=); background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
} &-search {
&__pagination { position: absolute;
display: flex; top: 15px;
align-items: center; right: 15px;
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; display: flex;
border-top: 1px solid var(--classC); align-items: center;
padding-top: 15px; .input {
.thumbnail { width: 180px;
position: relative; height: 30px;
width: 180px; padding: 0 12px;
height: 250px; color: var(--routine);
min-width: 180px; background: var(--background);
min-height: 180px; border: 1px solid var(--theme);
margin-right: 15px; font-size: 12px;
.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 { .button {
overflow: hidden; height: 30px;
dt { border: none;
font-size: 24px; background: var(--theme);
color: var(--main); color: #fff;
max-width: 100%; padding: 0 12px;
overflow: hidden; font-size: 12px;
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; &__pagination {
user-select: none; display: flex;
} align-items: center;
} justify-content: flex-end;
} &-item {
&__player { user-select: none;
&-play { cursor: pointer;
width: 100%; margin-left: 5px;
height: 480px; height: 32px;
background: #000; 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);
}
}
}
}
} }

327
assets/js/joe.video.js
View File

@ -1,134 +1,147 @@
/* 视频页面需要用到JS */ /* 视频页面需要用到JS */
console.time('Video.js执行时长') console.time('Video.js执行时长');
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const p = new URLSearchParams(window.location.search) const p = new URLSearchParams(window.location.search);
const vod_id = p.get('vod_id') const vod_id = p.get('vod_id');
if (vod_id) { if (vod_id) {
initVideoDetail() initVideoDetail();
} else { } else {
initVideoList() initVideoList();
} }
/* 初始化列表页 */
/* 初始化列表页 */ function initVideoList() {
function initVideoList() { /* 当前的分类id */
/* 当前的分类id */ let queryData = { pg: '', t: '', wd: '' };
let queryData = { pg: -999, t: -999 } /* 总页数 */
/* 总页数 */ let pagecount = '';
let total = -999 /* 是否正在加载列表 */
/* 是否正在加载列表 */ let isLoading = false;
let isLoading = false /* 获取视频分类 */
/* 获取视频分类 */ $.ajax({
$.ajax({ url: Joe.BASE_API,
url: Joe.BASE_API, type: 'POST',
type: 'POST', data: { routeType: 'maccms_list' },
data: { routeType: 'maccms_list' }, success(res) {
success(res) { if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`);
if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`) if (!res.data.class.length) return $('.joe_video__type-list').html(`<li class="error">暂无数据！</li>`);
if (!res.data.class.length) return $('.joe_video__type-list').html(`<li class="error">暂无数据！</li>`) let htmlStr = '<li class="item" data-t="">全部</li>';
let htmlStr = '<li class="item" data-t="">全部</li>' res.data.class.forEach(_ => (htmlStr += `<li class="item" data-t="${_.type_id}">${_.type_name}</li>`));
res.data.class.forEach(_ => (htmlStr += `<li class="item" data-t="${_.type_id}">${_.type_name}</li>`)) $('.joe_video__type-list').html(htmlStr);
$('.joe_video__type-list').html(htmlStr) $('.joe_video__type-list .item').first().click();
$('.joe_video__type-list .item').first().click() }
} });
}) /* 点击切换分类 */
/* 点击切换分类 */ $('.joe_video__type-list').on('click', '.item', function () {
$('.joe_video__type-list').on('click', '.item', function () { const t = $(this).attr('data-t');
const t = $(this).attr('data-t') if (isLoading) return;
if (t === queryData.t || isLoading) return window.scrollTo({ top: 0, behavior: 'smooth' });
window.scrollTo({ top: 0, behavior: 'smooth' }) $(this).addClass('active').siblings().removeClass('active');
$(this).addClass('active').siblings().removeClass('active') queryData.pg = 1;
queryData.pg = 0 queryData.t = t;
queryData.t = t queryData.wd = '';
renderDom() $('.joe_video__list-search input').val('');
}) renderDom();
/* 渲染视频列表 */ });
function renderDom() { /* 渲染视频列表 */
$('.joe_video__list-item').css('display', '').html('') function renderDom() {
isLoading = true $('.joe_video__list-item').css('display', '').html('');
$.ajax({ isLoading = true;
url: Joe.BASE_API, $.ajax({
type: 'POST', url: Joe.BASE_API,
data: { routeType: 'maccms_list', t: queryData.t, pg: queryData.pg, ac: 'videolist' }, type: 'POST',
success(res) { data: { routeType: 'maccms_list', ac: 'videolist', t: queryData.t, pg: queryData.pg, wd: queryData.wd },
if (res.code !== 1) return $('.joe_video__list-item').css('display', 'block').html('<p class="error">数据加载失败！请检查！</p>') success(res) {
if (!res.data.list.length) { if (res.code !== 1) return $('.joe_video__list-item').css('display', 'block').html('<p class="error">数据加载失败！请检查！</p>');
$('.joe_video__list-item').css('display', 'block').html('<p class="error">当前分类暂无数据！</p>') if (!res.data.list.length) {
} else { $('.joe_video__list-item').css('display', 'block').html('<p class="error">暂无数据！</p>');
let htmlStr = '' } else {
res.data.list.forEach(_ => { let htmlStr = '';
htmlStr += ` res.data.list.forEach(_ => {
htmlStr += `
<a class="item animated bounceIn" href="${window.location.href + '?vod_id=' + _.vod_id}" target="_blank" rel="noopener noreferrer nofollow"> <a class="item animated bounceIn" href="${window.location.href + '?vod_id=' + _.vod_id}" target="_blank" rel="noopener noreferrer nofollow">
<i class="year" style="display: ${_.vod_year && _.vod_year != 0 ? 'block' : 'none'}">${_.vod_year}</i> <i class="year" style="display: ${_.vod_year && _.vod_year != 0 ? 'block' : 'none'}">${_.vod_year}</i>
<div class="thumb"> <div class="thumb">
<img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="pic video_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.vod_pic}" alt="${_.vod_name}"> <img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="pic video_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.vod_pic}" alt="${_.vod_name}">
</div> </div>
<p class="title">${_.vod_name}</p> <p class="title">${_.vod_name}</p>
</a>` </a>`;
}) });
$('.joe_video__list-item').html(htmlStr) $('.joe_video__list-item').html(htmlStr);
new LazyLoad('.video_lazyload') new LazyLoad('.video_lazyload');
} }
total = res.data.pagecount pagecount = res.data.pagecount;
initPagination() initPagination();
}, },
complete: () => (isLoading = false) complete: () => (isLoading = false)
}) });
} }
/* 初始化分页 */ /* 初始化分页 */
function initPagination() { function initPagination() {
let htmlStr = '' let htmlStr = '';
if (queryData.pg !== 0) { if (queryData.pg != 1) {
htmlStr += ` htmlStr += `
<li class="joe_video__pagination-item" data-pg="0">首页</li> <li class="joe_video__pagination-item" data-pg="1">首页</li>
<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}"> <li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"> <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path> <path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path>
</svg> </svg>
</li> </li>
<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg}</li> <li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg - 1}</li>
` `;
} }
htmlStr += `<li class="joe_video__pagination-item active">${queryData.pg + 1}</li>` htmlStr += `<li class="joe_video__pagination-item active">${queryData.pg}</li>`;
if (queryData.pg != total) { if (queryData.pg != pagecount) {
htmlStr += ` htmlStr += `
<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">${queryData.pg + 2}</li> <li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">${queryData.pg + 1}</li>
<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}"> <li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">
<svg class="next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"> <svg class="next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path> <path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path>
</svg> </svg>
</li> </li>
` `;
} }
if (queryData.pg < total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${total}">末页</li>` if (queryData.pg < pagecount) htmlStr += `<li class="joe_video__pagination-item" data-pg="${pagecount}">末页</li>`;
$('.joe_video__pagination').html(htmlStr) $('.joe_video__pagination').html(htmlStr);
} }
/* 切换分页 */ /* 切换分页 */
$('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () { $('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () {
const pg = $(this).attr('data-pg') const pg = $(this).attr('data-pg');
if (!pg || isLoading) return if (!pg || isLoading) return;
window.scrollTo({ top: 0, behavior: 'smooth' }) window.scrollTo({ top: 0, behavior: 'smooth' });
queryData.pg = Number(pg) queryData.pg = Number(pg);
renderDom() renderDom();
}) });
} /* 搜索功能 */
const searchFn = () => {
/* 初始化播放页 */ const val = $('.joe_video__list-search input').val();
function initVideoDetail() { if (!val || isLoading) return;
$.ajax({ queryData.pg = 1;
url: Joe.BASE_API, queryData.t = '';
type: 'POST', queryData.wd = val;
data: { $('.joe_video__type-list .item').first().addClass('active').siblings().removeClass('active');
routeType: 'maccms_list', renderDom();
ac: 'detail', };
ids: vod_id $('.joe_video__list-search .button').on('click', searchFn);
}, $('.joe_video__list-search .input').on('keyup', e => e.keyCode === 13 && searchFn());
success(res) { }
if (res.code !== 1) return $('.joe_video__detail-info').html(`<p class="error">${res.data}</p>`) /* 初始化播放页 */
if (!res.data.list.length) return $('.joe_video__detail-info').html(`<p class="error">数据抓取异常！请检查！</p>`) function initVideoDetail() {
const item = res.data.list[0] const player = $('.joe_video__player-play').attr('data-player');
/* 设置视频详情 */ $.ajax({
$('.joe_video__detail-info').html(` 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(`<p class="error">${res.data}</p>`);
if (!res.data.list.length) return $('.joe_video__detail-info').html(`<p class="error">数据抓取异常！请检查！</p>`);
const item = res.data.list[0];
/* 设置视频详情 */
$('.joe_video__detail-info').html(`
<div class="thumbnail"> <div class="thumbnail">
<img class="pic video_lazyload" onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" src="${Joe.LAZY_LOAD}" data-original="${item.vod_pic}" alt="${item.vod_name}"> <img class="pic video_lazyload" onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" src="${Joe.LAZY_LOAD}" data-original="${item.vod_pic}" alt="${item.vod_name}">
<i class="year" style="display: ${item.vod_year && item.vod_year != 0 ? 'block' : 'none'}">${item.vod_year}</i> <i class="year" style="display: ${item.vod_year && item.vod_year != 0 ? 'block' : 'none'}">${item.vod_year}</i>
@ -140,23 +153,53 @@ document.addEventListener('DOMContentLoaded', () => {
<dd><span class="muted">导演：</span><p class="text">${item.vod_director || '未知'}</p></dd> <dd><span class="muted">导演：</span><p class="text">${item.vod_director || '未知'}</p></dd>
<dd><span class="muted">简介：</span><p class="text">${getContent(item)}</p></dd> <dd><span class="muted">简介：</span><p class="text">${getContent(item)}</p></dd>
</dl> </dl>
`) `);
new LazyLoad('.video_lazyload') new LazyLoad('.video_lazyload');
/* 设置视频播放标题 */ /* 设置视频播放标题 */
$('.joe_video__player .joe_video__contain-title').html('正在播放：' + item.vod_name) $('.joe_video__player .joe_video__contain-title').html('正在播放：' + item.vod_name);
} /* 设置播放链接 */
}) let parseList = str => {
} let htmlStr = '';
let arr = str.split('#');
function getContent(item) { arr.forEach(_ => (htmlStr += `<li data-src="${_.split('$')[1] || ''}" class="item">${_.split('$')[0] || ''}</li>`));
if (item.vod_content) { return htmlStr;
return item.vod_content.replace(/<[^>]+>/g, '') };
} else if (item.vod_blurb) { let playFromArr = item.vod_play_from.split('$$$');
return item.vod_blurb.replace(/<[^>]+>/g, '') let playUrlArr = item.vod_play_url.split('$$$');
} else { let maps = new Map();
return '暂无简介' playFromArr.forEach((element, index) => maps.set(element, playUrlArr[index] || []));
} let htmlStr = '';
} let index = 0;
for (let [key, value] of maps) {
console.timeEnd('Video.js执行时长') index++;
}) htmlStr += `
<div class="joe_video__source joe_video__contain">
<div class="joe_video__contain-title">播放线路 ${index}</div>
<ul class="joe_video__source-list">${parseList(value)}</ul>
</div>
`;
}
$('.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执行时长');
});

33
core/api.php
View File

@ -6,11 +6,7 @@ function _getRanking($self)
header("HTTP/1.1 200 OK"); header("HTTP/1.1 200 OK");
$ranking_txt = Helper::options()->JAside_Ranking; $ranking_txt = Helper::options()->JAside_Ranking;
$ranking_arr = explode("$", $ranking_txt); $ranking_arr = explode("$", $ranking_txt);
$arrContextOptions = [ $json = _curl("https://the.top/v1/{$ranking_arr[1]}/1/9");
'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));
$res = json_decode($json, TRUE); $res = json_decode($json, TRUE);
if ($res['code'] === 0) { if ($res['code'] === 0) {
$self->response->throwJson([ $self->response->throwJson([
@ -176,11 +172,7 @@ function _pushRecord($self)
function _getWallpaperType($self) function _getWallpaperType($self)
{ {
header("HTTP/1.1 200 OK"); header("HTTP/1.1 200 OK");
$arrContextOptions = [ $json = _curl("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome");
'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));
$res = json_decode($json, TRUE); $res = json_decode($json, TRUE);
if ($res['errno'] == 0) { if ($res['errno'] == 0) {
$self->response->throwJson([ $self->response->throwJson([
@ -202,15 +194,7 @@ function _getWallpaperList($self)
$cid = $self->request->cid; $cid = $self->request->cid;
$start = $self->request->start; $start = $self->request->start;
$count = $self->request->count; $count = $self->request->count;
$arrContextOptions = [ $json = _curl("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome");
'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)
);
$res = json_decode($json, TRUE); $res = json_decode($json, TRUE);
if ($res['errno'] == 0) { if ($res['errno'] == 0) {
$self->response->throwJson([ $self->response->throwJson([
@ -236,17 +220,8 @@ function _getMaccmsList($self)
$t = $self->request->t ? $self->request->t : ''; $t = $self->request->t ? $self->request->t : '';
$pg = $self->request->pg ? $self->request->pg : ''; $pg = $self->request->pg ? $self->request->pg : '';
$wd = $self->request->wd ? $self->request->wd : ''; $wd = $self->request->wd ? $self->request->wd : '';
if ($cms_api) { if ($cms_api) {
$arrContextOptions = [ $json = _curl("{$cms_api}?ac={$ac}&ids={$ids}&t={$t}&pg={$pg}&wd={$wd}");
'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)
);
$res = json_decode($json, TRUE); $res = json_decode($json, TRUE);
if ($res['code'] === 1) { if ($res['code'] === 1) {
$self->response->throwJson([ $self->response->throwJson([

15
core/function.php
View File

@ -263,3 +263,18 @@ function _getAsideAuthorNav()
} }
} }
} }
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;
}

7
video.php
View File

@ -34,7 +34,7 @@
</div> </div>
<div class="joe_video__player joe_video__contain"> <div class="joe_video__player joe_video__contain">
<div class="joe_video__contain-title">正在播放：</div> <div class="joe_video__contain-title">正在播放：</div>
<iframe src="" data-player="<?php echo $this->options->JCustomPlayer ? $this->options->JCustomPlayer : '/usr/themes/Joe/library/player.php?url=' ?>" class="joe_video__player-play"></iframe> <iframe class="joe_video__player-play" data-player="<?php echo $this->options->JCustomPlayer ? $this->options->JCustomPlayer : '/usr/themes/Joe/library/player.php?url=' ?>"></iframe>
</div> </div>
<?php else : ?> <?php else : ?>
<div class="joe_video__type joe_video__contain"> <div class="joe_video__type joe_video__contain">
@ -45,11 +45,14 @@
</div> </div>
<div class="joe_video__list joe_video__contain"> <div class="joe_video__list joe_video__contain">
<div class="joe_video__contain-title">视频列表</div> <div class="joe_video__contain-title">视频列表</div>
<div class="joe_video__list-search">
<input class="input" type="text" placeholder="请输入影片名称...">
<button class="button">搜 索</button>
</div>
<div class="joe_video__list-item"></div> <div class="joe_video__list-item"></div>
</div> </div>
<ul class="joe_video__pagination"></ul> <ul class="joe_video__pagination"></ul>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php $this->need('public/aside.php'); ?> <?php $this->need('public/aside.php'); ?>
</div> </div>