349 lines
11 KiB
HTML
349 lines
11 KiB
HTML
{% import 'macro/svg.html' as SVG %}
|
||
{% import 'macro/oops.html' as OOPS %}
|
||
<div class="container-xl">
|
||
<!-- Page title -->
|
||
<div class="page-header d-print-none">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<h2 class="page-title">
|
||
我的媒体库
|
||
</h2>
|
||
</div>
|
||
<div class="col-auto ms-auto d-print-none">
|
||
<div class="btn-list">
|
||
<a href="javascript:show_mediasync_modal()" class="btn btn-primary d-none d-sm-inline-block">
|
||
{{ SVG.refresh() }}
|
||
媒体库同步
|
||
</a>
|
||
<a href="javascript:show_mediasync_modal()" class="btn btn-primary d-sm-none btn-icon">
|
||
{{ SVG.refresh() }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% if ServerSucess %}
|
||
<div class="page-body">
|
||
<div class="container-xl">
|
||
<div class="row row-deck row-cards">
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="subheader">电影</div>
|
||
</div>
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="h1 mb-0 me-2">{{ MediaCount.MovieCount }}</div>
|
||
</div>
|
||
</div>
|
||
<div id="chart-movie-bg" class="chart-sm"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="subheader">电视剧/动漫</div>
|
||
</div>
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="h1 mb-3 me-2">{{ MediaCount.SeriesCount }}</div>
|
||
<div class="me-auto">
|
||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||
{{ MediaCount.EpisodeCount }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="chart-tv-bg" class="chart-sm"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card">
|
||
<div class="card-stamp">
|
||
<div class="card-stamp-icon" style="background-color: transparent">
|
||
<img src="../static/img/music.png">
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="subheader">音乐</div>
|
||
</div>
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="h1 mb-3 me-2">{{ MediaCount.SongCount }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card">
|
||
<div class="card-stamp">
|
||
<div class="card-stamp-icon" style="background-color: transparent">
|
||
<img src="../static/img/users.png">
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="subheader">活跃用户</div>
|
||
</div>
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="h1 mb-3 me-2">{{ UserCount }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12">
|
||
<div class="row row-cards">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<p class="mb-3">存储空间共 <strong>{{ TotalSpace }}</strong></p>
|
||
<div class="progress progress-separated mb-3">
|
||
<div class="progress-bar bg-primary" role="progressbar" style="width: {{ UsedPercent }}%"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto d-flex align-items-center pe-2">
|
||
<span class="legend me-2 bg-primary"></span>
|
||
<span>已使用</span>
|
||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ UsedSapce }}</span>
|
||
</div>
|
||
<div class="col-auto d-flex align-items-center ps-2">
|
||
<span class="legend me-2"></span>
|
||
<span>空闲</span>
|
||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ FreeSpace }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="card" style="height: 27rem">
|
||
<div class="card-body card-body-scrollable card-body-scrollable-shadow">
|
||
<div class="divide-y">
|
||
{% for Activity in Activitys %}
|
||
<div>
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<span class="avatar">
|
||
{% if Activity.type == "LG" %}
|
||
{{ SVG.user() }}
|
||
{% else %}
|
||
{{ SVG.player_play() }}
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
<div class="col">
|
||
<div class="text-truncate">
|
||
{{ Activity.event }}
|
||
</div>
|
||
<div class="text-muted">{{ Activity.date }}</div>
|
||
</div>
|
||
<div class="col-auto align-self-center">
|
||
<div class="bg-primary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
{{ OOPS.systemerror('媒体服务器连接失败！', '当前无法连接媒体服务器获取数据，请确认Emby/Jellyfin/Plex配置是否正确。') }}
|
||
{% endif %}
|
||
<div class="modal modal-blur fade" id="index-mediasync-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card border-0">
|
||
<div class="card-body text-center">
|
||
<div class="mb-3">
|
||
<span class="avatar avatar-xl avatar-rounded"
|
||
style="background-image: url(../static/img/{{ MediaServerType }}.png)"></span>
|
||
</div>
|
||
<div class="card-title mb-1">{{ MediaServerType|title }}</div>
|
||
<div class="text-muted" id="mediasync_status"></div>
|
||
</div>
|
||
<div class="card-progress">
|
||
<div class="progress-bar bg-green" id="mediasync_process_bar" style="width: 0%" role="progressbar"
|
||
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<a href="javascript:start_media_sync(true)" id="mediasync_btn" class="card-btn">开始同步</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
if ('{{ ServerSucess }}' != 'False') {
|
||
// 电影变化图
|
||
if (typeof (chart_movie) != 'undefined')
|
||
chart_movie.dispose();
|
||
|
||
chart_movie = echarts.init($('#chart-movie-bg')[0], null, {
|
||
height: 40.0
|
||
});
|
||
|
||
option_chart_movie = {
|
||
animation: true,
|
||
color: [
|
||
tabler.getColor('primary')
|
||
],
|
||
legend: {
|
||
show: false,
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
top: 0,
|
||
right: 0,
|
||
bottom: 2,
|
||
containLabel: false
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: {{ MovieChartLabels| safe }}
|
||
},
|
||
yAxis: {show: false,},
|
||
series: [{
|
||
name: '电影',
|
||
type: 'line',
|
||
large: true,
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: {{ MovieNums }}
|
||
}]
|
||
};
|
||
chart_movie.setOption(option_chart_movie);
|
||
|
||
// 电视剧变化图
|
||
if (typeof (chart_tv) != 'undefined')
|
||
chart_tv.dispose();
|
||
|
||
chart_tv = echarts.init($('#chart-tv-bg')[0], null, {
|
||
height: 40.0
|
||
});
|
||
|
||
option_chart_tv = {
|
||
animation: true,
|
||
color: [
|
||
tabler.getColor('primary'),
|
||
tabler.getColor('gray-600')
|
||
],
|
||
legend: {
|
||
show: false,
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
top: 0,
|
||
right: 0,
|
||
bottom: 2,
|
||
containLabel: false
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: {{ TvChartLabels| safe }}
|
||
},
|
||
yAxis: {show: false,},
|
||
series: [{
|
||
name: '电视剧',
|
||
type: 'line',
|
||
large: true,
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: {{ TvNums }}
|
||
}, {
|
||
name: '动漫',
|
||
type: 'line',
|
||
large: true,
|
||
smooth: true,
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
width: 1.5,
|
||
type: 'dashed'
|
||
},
|
||
data: {{ AnimeNums }}
|
||
}]
|
||
};
|
||
chart_tv.setOption(option_chart_tv);
|
||
|
||
// 响应大小调整
|
||
window.onresize = function () {
|
||
chart_tv.resize();
|
||
chart_movie.resize();
|
||
};
|
||
}
|
||
</script>
|
||
<script type="text/javascript">
|
||
//显示媒体库同步框
|
||
function show_mediasync_modal() {
|
||
//获取同步状态
|
||
ajax_post("refresh_process", {type: "mediasync"}, function (ret) {
|
||
if (ret.code === 0 && ret.value < 100) {
|
||
//同步中
|
||
$("#index-mediasync-modal").modal('show');
|
||
start_media_sync(false);
|
||
} else {
|
||
//没有在同步，获取目前同步的数据情况
|
||
ajax_post("mediasync_state", {}, function (ret) {
|
||
if (ret.code === 0) {
|
||
$("#mediasync_status").text(ret.text);
|
||
}
|
||
$("#mediasync_btn").text("开始同步")
|
||
.attr("href", "javascript:start_media_sync(true)");
|
||
$("#index-mediasync-modal").modal('show');
|
||
}, true, false);
|
||
}
|
||
}, true, false);
|
||
}
|
||
|
||
//关闭媒体库同步框
|
||
function close_mediasync_modal() {
|
||
$("#index-mediasync-modal").modal('hide');
|
||
refresh_sync_process_flag = false;
|
||
}
|
||
|
||
//开始媒体库同步
|
||
function start_media_sync(flag) {
|
||
$("#mediasync_btn").text("关闭")
|
||
.attr("href", "javascript:close_mediasync_modal()");
|
||
if (flag) {
|
||
ajax_post("start_mediasync", {}, function (ret) {
|
||
refresh_sync_process_flag = true;
|
||
refresh_sync_process();
|
||
}, true, false);
|
||
} else {
|
||
refresh_sync_process_flag = true;
|
||
refresh_sync_process();
|
||
}
|
||
}
|
||
|
||
//刷新进度及文件
|
||
var refresh_sync_process_flag = false;
|
||
function refresh_sync_process() {
|
||
if (!refresh_sync_process_flag) {
|
||
return;
|
||
}
|
||
ajax_post("refresh_process", {type: "mediasync"}, function (ret) {
|
||
if (ret.code === 0) {
|
||
$("#mediasync_process_bar").attr("style", "width: " + ret.value + "%")
|
||
.attr("aria-valuenow", ret.value);
|
||
$("#mediasync_status").text(ret.text);
|
||
}
|
||
if (ret.value < 100) {
|
||
setTimeout("refresh_sync_process()", 200);
|
||
}
|
||
}, true, false);
|
||
}
|
||
|
||
</script> |