mirror/typecho-joe
2
0
Fork 0
mirror of https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git synced 2026-02-18 01:20:04 +08:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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(`<li class="error">${res.data}</li>`)
if (!res.data.class.length) return $('.joe_video__type-list').html(`<li class="error">暂无数据！</li>`)
let htmlStr = '<li class="item" data-t="">全部</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 .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('<p class="error">数据加载失败！请检查！</p>')
if (!res.data.list.length) {
$('.joe_video__list-item').css('display', 'block').html('<p class="error">当前分类暂无数据！</p>')
} 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(`<li class="error">${res.data}</li>`);
if (!res.data.class.length) return $('.joe_video__type-list').html(`<li class="error">暂无数据！</li>`);
let htmlStr = '<li class="item" data-t="">全部</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 .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('<p class="error">数据加载失败！请检查！</p>');
if (!res.data.list.length) {
$('.joe_video__list-item').css('display', 'block').html('<p class="error">暂无数据！</p>');
} else {
let 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">
<i class="year" style="display: ${_.vod_year && _.vod_year != 0 ? 'block' : 'none'}">${_.vod_year}</i>
<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}">
</div>
<p class="title">${_.vod_name}</p>
</a>`
})
$('.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 += `
<li class="joe_video__pagination-item" data-pg="0">首页</li>
<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">
<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>
</li>
<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg}</li>
`
}
htmlStr += `<li class="joe_video__pagination-item active">${queryData.pg + 1}</li>`
if (queryData.pg != total) {
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}">
<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>
</svg>
</li>
`
}
if (queryData.pg < total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${total}">末页</li>`
$('.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(`<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(`
</a>`;
});
$('.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 += `
<li class="joe_video__pagination-item" data-pg="1">首页</li>
<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">
<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>
</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}</li>`;
if (queryData.pg != pagecount) {
htmlStr += `
<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}">
<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>
</svg>
</li>
`;
}
if (queryData.pg < pagecount) htmlStr += `<li class="joe_video__pagination-item" data-pg="${pagecount}">末页</li>`;
$('.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(`<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">
<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>
@@ -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">${getContent(item)}</p></dd>
</dl>
`)
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 += `<li data-src="${_.split('$')[1] || ''}" class="item">${_.split('$')[0] || ''}</li>`));
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 += `
<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执行时长');
});