web/index.html
Rama master · réplica de lectura del repositorio original.
<!DOCTYPE html>
<!--
Gerbera - https://gerbera.io/
web/index.html - this file is part of Gerbera.
Copyright (C) 2016-2026 Gerbera Contributors
Gerbera is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License version 2
as published by the Free Software Foundation.
Gerbera is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Gerbera. If not, see <http://www.gnu.org/licenses/>.
$Id$
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Gerbera Media Server</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css" type="text/css" />
<link rel="stylesheet" href="vendor/bootstrap-4.6.2/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="vendor/bootstrap-4.6.2/css/bootstrap-grid.min.css" type="text/css" />
<link rel="stylesheet" href="assets/theme/gerbera.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<nav class="navbar navbar-expand-md navbar-dark" id="nav">
<button
type="button"
class="navbar-toggler navbar-toggler-right"
data-toggle="collapse"
data-target="#navbarContent"
aria-controls="navbarContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a id="nav-home" class="navbar-brand" data-gerbera-menu-cmd="HOME" title="Gerbera">
<img src="assets/theme/gerbera-logo-white.png" class="d-inline-block align-top" alt="Gerbera Logo" />
<span class="d-inline-block align-middle pl-2 text-light" id="server-name"></span>
</a>
<div class="collapse navbar-collapse" id="navbarContent">
<ul id="navbar" class="navbar-nav mr-auto">
<li class="nav-item" style="display: none">
<a id="nav-db" class="nav-link disabled" data-gerbera-menu-cmd="SELECT_TYPE" data-gerbera-type="db">
<i class="fa fa-database"></i>
<span>Database</span>
</a>
</li>
<li class="nav-item" style="display: none">
<a
id="nav-search"
class="nav-link disabled"
data-gerbera-menu-cmd="SELECT_TYPE"
data-gerbera-type="search"
>
<i class="fa fa-search"></i>
<span>Search</span>
</a>
</li>
<li class="nav-item" style="display: none">
<a id="nav-fs" class="nav-link disabled" data-gerbera-menu-cmd="SELECT_TYPE" data-gerbera-type="fs">
<i class="fa fa-folder-open"></i>
<span>File System</span>
</a>
</li>
<li class="nav-item" style="display: none">
<a
id="nav-clients"
class="nav-link disabled"
data-gerbera-menu-cmd="SELECT_CLIENTS"
data-gerbera-type="clients"
>
<i class="fa fa-desktop"></i>
<span>Clients</span>
</a>
</li>
<li class="nav-item" style="display: none">
<a
id="nav-config"
class="nav-link disabled"
data-gerbera-menu-cmd="SELECT_CONFIG"
data-gerbera-type="config"
>
<i class="fa fa-sliders"></i>
<span>Config</span>
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item" id="source-docs">
<a id="devs" class="nav-link noactive" href="./dev/index.html" target="_blank">
<i class="fa fa-code"></i>
<span>Source Docs</span>
</a>
</li>
<li class="nav-item" id="user-docs">
<a
id="docs"
class="nav-link noactive"
href="https://docs.gerbera.io/en/stable/index.html"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa fa-question-circle"></i>
<span>Documentation</span>
</a>
</li>
<li class="nav-item">
<a
id="report-issue"
class="nav-link noactive"
href="https://github.com/gerbera/gerbera/issues"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa fa-bug"></i>
<span>
Report an Issue
<i class="fa fa-external-link" aria-hidden="true"></i>
</span>
</a>
</li>
<li class="nav-item" hidden>
<div class="nav-link disabled noactive" id="gerbera-version">
<i class="fa fa-code-fork"></i>
<span></span>
</div>
</li>
<a id="logout" type="button" class="btn btn-danger my-2 my-sm-0" style="display: none">Logout</a>
</ul>
</div>
</nav>
<div id="trail" class="row no-gutters"></div>
</div>
<div id="home" class="h-100 overflow-auto">
<div class="d-flex flex-column h-100">
<div id="homeintro" class="grb-trail flowers">
<div class="row mx-2">
<div class="col md-10 m-auto text-center">
<h2>
Welcome to Gerbera
<span id="gerbera-title-version"></span>
</h2>
<p>
<a href="https://github.com/gerbera/gerbera" rel="noopener noreferrer" target="_blank"> Gerbera</a> is
an open source UPnP-AV media server.
</p>
</div>
</div>
</div>
<div id="login" style="display: none">
<form id="login-form" class="form p-5 my-lg-5 mx-lg-auto col-lg-4">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" />
</div>
<button id="login-submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-12" id="homelinks" style="display: none">
<div class="card-style mt-3">
<a id="addlink" href="javascript:;" onclick="$('#nav-fs').click();">
<div class="sublink d-flex card-style-bottom p-3">
<i class="fa fa-fw fa-plus-square-o fa-3x text-center grb-icon"></i>
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Add some files</h4>
<span class="text-muted">Browse and import your multimedia files into Gerbera.</span>
</div>
</div>
</a>
<a id="viewlink" href="javascript:;" onclick="$('#nav-db').click();">
<div class="sublink d-flex card-style-bottom px-3 py-3">
<i class="fa fa-fw fa-files-o fa-3x text-center grb-icon"></i>
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Browse indexed files</h4>
<span class="text-muted">View, update and remove files from Gerbera.</span>
</div>
</div>
</a>
<a id="searchlink" href="javascript:;" onclick="$('#nav-search').click();">
<div class="sublink d-flex card-style-bottom px-3 py-3">
<i class="fa fa-fw fa-search fa-3x text-center grb-icon"></i>
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Search indexed entries</h4>
<span class="text-muted">Find files managed by Gerbera.</span>
</div>
</div>
</a>
<a id="clientlink" href="javascript:;" onclick="$('#nav-clients').click();">
<div class="sublink d-flex card-style-bottom px-3 py-3">
<i class="fa fa-fw fa-desktop fa-3x text-center grb-icon"></i>
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Show connected clients</h4>
<span class="text-muted">View clients detected by Gerbera and their profile details.</span>
</div>
</div>
</a>
<a id="configlink" href="javascript:;" onclick="$('#nav-config').click();">
<div class="sublink d-flex card-style-bottom px-3 py-3">
<i class="fa fa-fw fa-sliders fa-3x text-center grb-icon"></i>
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Edit Configuration</h4>
<span class="text-muted">Change settings for Gerbera.</span>
</div>
</div>
</a>
<div class="sublink d-flex card-style-bottom px-3 py-3">
<i class="fa fa-fw fa-cog fa-3x text-center grb-icon"></i>
<div class="form-check form-check-inline">
<label class="form-check-label" for="displayMode_default">
Default
<input
type="radio"
name="displayMode"
class="form-check-input"
value="default"
id="displayMode_default"
/>
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="displayMode_light">
Light
<input
type="radio"
name="displayMode"
class="form-check-input"
value="light"
id="displayMode_light"
/>
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="displayMode_dark">
Dark
<input
type="radio"
name="displayMode"
class="form-check-input"
value="dark"
id="displayMode_dark"
/>
</label>
</div>
</div>
</div>
</div>
<div id="server-status" class="col-md-6 col-12">
<div class="card-style p-3 mt-3">
<h4>
<i class="fa fa-server text-center grb-icon"></i>
Server Statistics
</h4>
<table class="table">
<tr id="status-head" class="status-head">
<th>File Type</th>
<th>
<div class="stat-value">Count</div>
</th>
<th>
<div class="stat-value">Size</div>
</th>
</tr>
<tr id="status-item">
<td>
<div class="text-muted ml-4">General</div>
</td>
<td>
<div class="stat-value text-muted" id="status-item-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-item-size"></div>
</td>
</tr>
<tr id="status-audio" class="status-line">
<td>
<i class="fa fa-fw fa-music text-left grb-icon"></i>
Audio
</td>
<td>
<div class="stat-value" id="status-audio-count"></div>
</td>
<td>
<div class="stat-value" id="status-audio-size"></div>
</td>
</tr>
<tr id="status-audioMusic">
<td>
<div class="text-muted ml-4">Music Tracks</div>
</td>
<td>
<div class="stat-value text-muted" id="status-audioMusic-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-audioMusic-size"></div>
</td>
</tr>
<tr id="status-audioBook">
<td>
<div class="text-muted ml-4">Audiobooks</div>
</td>
<td>
<div class="stat-value text-muted" id="status-audioBook-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-audioBook-size"></div>
</td>
</tr>
<tr id="status-audioBroadcast">
<td>
<div class="text-muted ml-4">Audio Broadcasts</div>
</td>
<td>
<div class="stat-value text-muted" id="status-audioBroadcast-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-audioBroadcast-size"></div>
</td>
</tr>
<tr id="status-video" class="status-line">
<td>
<i class="fa fa-film text-left grb-icon"></i>
Videos
</td>
<td>
<div class="stat-value" id="status-video-count"></div>
</td>
<td>
<div class="stat-value" id="status-video-size"></div>
</td>
</tr>
<tr id="status-videoMovie">
<td>
<div class="text-muted ml-4">Movies</div>
</td>
<td>
<div class="stat-value text-muted" id="status-videoMovie-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-videoMovie-size"></div>
</td>
</tr>
<tr id="status-videoBroadcast">
<td>
<div class="text-muted ml-4">Video Broadcasts</div>
</td>
<td>
<div class="stat-value text-muted" id="status-videoBroadcast-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-videoBroadcast-size"></div>
</td>
</tr>
<tr id="status-videoMusicVideoClip">
<td>
<div class="text-muted ml-4">Music Video Clips</div>
</td>
<td>
<div class="stat-value text-muted" id="status-videoMusicVideoClip-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-videoMusicVideoClip-size"></div>
</td>
</tr>
<tr id="status-image" class="status-line">
<td>
<i class="fa fa-fw fa-camera text-left grb-icon"></i>
Images
</td>
<td>
<div class="stat-value" id="status-image-count"></div>
</td>
<td>
<div class="stat-value" id="status-image-size"></div>
</td>
</tr>
<tr id="status-imagePhoto">
<td>
<div class="text-muted ml-4">Photos</div>
</td>
<td>
<div class="stat-value text-muted" id="status-imagePhoto-count"></div>
</td>
<td>
<div class="stat-value text-muted" id="status-imagePhoto-size"></div>
</td>
</tr>
<tr id="status-text" class="status-line">
<td>
<i class="fa fa-fw fa-file-text grb-icon"></i>
Text
</td>
<td>
<div class="stat-value" id="status-text-count"></div>
</td>
<td>
<div class="stat-value" id="status-text-size"></div>
</td>
</tr>
<tr id="status-total" class="status-line">
<td>
<i class="fa fa-list text-left grb-icon"></i>
Total Media Files
</td>
<td>
<div class="stat-value" id="status-total-count"></div>
</td>
<td>
<div class="stat-value" id="status-total-size"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="server-empty" class="col-12 col-md-6 order-first">
<div class="card-style p-3 mt-3">
<h2>Getting Started</h2>
<p>
If you are seeing this page it means the server is running successfully!
<i class="fa fa-smile-o"></i>
</p>
<p>
Take a minute to check out the
<a
id="docsMain"
href="https://docs.gerbera.io/en/stable/index.html"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa fa-question-circle"></i>
<span>documentation</span>
</a>
</p>
<h4>Adding Content</h4>
<p>There are two methods to add library paths:</p>
<ol>
<li>
<h5>Set up Gerbera with dynamic content</h5>
<p class="text-muted">Easier to create but all setup is lost when your database is lost</p>
<ol>
<li>
Go to
<a href="javascript:;" onclick="$('#nav-fs').click();">
<i class="fa fa-folder-open"></i>
<strong>File System</strong>
</a>
view
</li>
<li>Look for folders containing your media files</li>
<li>
Click
<i class="fa fa-history"></i>
<strong>Add Autoscan Item</strong>
</li>
<li>Wait for import to complete</li>
<li>Check logs for error messages</li>
</ol>
</li>
<li>
<h5>Set up Gerbera with persistent content</h5>
<p class="text-muted">A bit more complicated but safer in the long run</p>
<ol>
<li>
Add an Autoscan entry in config.xml (
<a
id="docsImport"
href="https://docs.gerbera.io/en/stable/config-import.html#autoscan"
target="_blank"
rel="noopener noreferrer"
>
See documentation
<i class="fa fa-external-link"></i>
</a>
)
</li>
<li>Adjust further settings as required</li>
<li>Restart Gerbera service</li>
<li>Wait for import to complete</li>
<li>Check logs for error messages</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content" style="display: none">
<div id="left" style="flex-basis: 160px">
<div id="tree"></div>
</div>
<div id="splitterBar"> </div>
<div style="display: flex; justify-content: start">
<button id="hideTree" class="btn btn-default">
<i class="fa fa-angle-double-left"></i>
<i class="fa fa-angle-double-right hidden"></i>
</button>
</div>
<div id="right">
<div id="search" style="display: none; padding: 20px">
<h3><i class="fa fa-search"></i> Search</h3>
<span class="small text-muted">Please use UPnP syntax for Query and Sort</span>
<ul>
<li>
<label class="searchLabel"
>Query:
<span class="small text-muted"
>upnp:class derivedfrom "object.item" and dc:title contains "music"</span
></label
>
<br /><textarea id="searchQuery" cols="50" rows="2"></textarea> <br /><span
class="small text-muted"
id="searchCaps"
></span>
</li>
<li>
<label class="searchLabel">Sort: <span class="small text-muted">-dc:title</span></label>
<br /><textarea id="searchSort" cols="50" rows="1"></textarea> <br /><span
class="small text-muted"
id="sortCaps"
></span>
</li>
</ul>
<button id="searchButton" class="btn btn-primary">Execute</button>
</div>
<div id="database" style="display: none; padding: 20px">
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Export changed items</h4>
<span class="text-muted">Download JSON string from server and store in file.</span><br/>
<button id="exportButton" class="btn btn-primary">Export</button><br/>
<textarea id="exportCode" style="display: none" cols="80" rows="20"></textarea>
<span id="exportMissing" style="display: none">No Data available</span>
</div><br/><br/>
<div class="ml-2 grb-caption" style="width: 80%">
<h4>Import saved items</h4>
<span class="text-muted">Import JSON file and apply to server.</span><br/>
<button id="importButton" class="btn btn-primary">Import</button><br/>
<label>File Name</label><input id="importFile" style="width: 350px; margin-left: 20px"/>
</div>
</div>
<div id="datagrid"></div>
</div>
</div>
<div id="clients" style="display: none">
<div id="clientframe">
<div id="clientgrid"></div>
</div>
</div>
<div id="config" style="display: none">
<div id="configframe">
<div id="configgrid"></div>
</div>
</div>
<div id="loading-wrapper">
<div id="loading"></div>
</div>
</div>
<div id="video" style="display: none"></div>
<div id="editModal" class="modal fade edit-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable edit-dialog" role="document">
<div class="modal-content edit-content">
<div class="modal-header">
<h5 class="modal-title">Edit Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body edit-body">
<div class="container-fluid edit-table p-0">
<div class="row no-gutters">
<div class="col">
<form class="editor-form">
<div class="form-group" id="objectIdGroup" hidden>
<label for="editdObjectIdTxt">ID</label>
<span id="editdObjectIdTxt" class="h3"></span>
<input type="hidden" class="form-control" id="objectId" readonly disabled />
</div>
<div class="form-group" id="parentIdGroup" hidden>
<label for="addParentId">Parent ID</label>
<span id="addParentIdTxt" class="h3"></span>
<input type="hidden" class="form-control" id="addParentId" readonly disabled />
</div>
<div class="form-group">
<img id="mediaimage" />
</div>
<div class="form-group">
<label for="editObjectType">Type</label>
<select id="editObjectType" class="form-control">
<option value="audio">Audio File</option>
<option value="audioBroadcast">Audio Broadcast (URL)</option>
<option value="video">Video File</option>
<option value="videoBroadcast">Video Broadcast (URL)</option>
<option value="image">Image File</option>
<option value="imagePhoto">Photo File</option>
<option value="imageLink">Image Link (URL)</option>
<option value="container">Container</option>
<option value="item">General File</option>
<option value="external_url">External Link (URL)</option>
</select>
</div>
<div class="form-group">
<label for="editTitle">Title</label>
<input type="text" required class="form-control" id="editTitle" />
</div>
<div class="form-group">
<label for="editTitle">Location</label>
<input type="text" class="form-control" id="editLocation" />
</div>
<div class="form-group">
<label for="editClass">Class</label>
<input type="text" required class="form-control" id="editClass" value="default" />
</div>
<div class="form-group">
<label for="editSortKey">Sort Key</label>
<input type="text" required class="form-control" id="editSortKey" value="default" />
</div>
<div class="form-group">
<label for="editDesc">Description</label>
<input type="text" class="form-control" id="editDesc" />
</div>
<div class="form-group">
<label for="editMime">Mimetype</label>
<input type="text" class="form-control" id="editMime" />
</div>
<div class="form-group">
<label for="editProtocol">Protocol</label>
<input type="text" class="form-control" id="editProtocol" />
</div>
<div class="form-group">
<label>Flags</label>
<input type="text" class="form-control" id="editFlags" hidden />
<div class="row form-group grb-edit-check" hidden>
<label for="editFlag-Restricted">Restricted</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-Restricted" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-Searchable">Searchable</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-Searchable" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-UseResourceRef">UseResourceRef</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-UseResourceRef" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-PersistentContainer">PersistentContainer</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-PersistentContainer" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-PlaylistRef">PlaylistRef</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-PlaylistRef" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-ProxyUrl">ProxyUrl</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-ProxyUrl" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-OnlineService">OnlineService</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-OnlineService" />
</div>
<div class="row form-group grb-edit-check">
<label for="editFlag-OggTheora">OggTheora</label>
<input type="checkbox" class="form-control" name="editFlag" id="editFlag-OggTheora" />
</div>
</div>
<div class="form-group">
<label for="editLmt">Last Modified</label>
<input type="text" class="form-control" id="editLmt" />
</div>
<div class="form-group">
<label for="editLut">Last Updated</label>
<input type="text" class="form-control" id="editLut" />
</div>
</form>
</div>
<div class="col ml-2" id="editCol">
<div class="detail-area">
<table id="metadata" class="table"></table>
<table id="auxdata" class="table"></table>
<table id="resdata" class="table"></table>
<table id="refdata" class="table"></table>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
<div class="modal-footer bg-light">
<button id="hidebutton" type="button" class="btn btn-default">Hide Details</button>
<button id="detailbutton" type="button" class="btn btn-default">Show Details</button>
<button id="editCancel" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="editSave" type="submit" class="btn btn-primary" data-dismiss="modal">Save Item</button>
</div>
</div>
<!-- /.modal-dialog -->
</div>
</div>
<div id="autoscanModal" class="modal fade edit-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable edit-dialog" role="document">
<div class="modal-content edit-content">
<div class="modal-header">
<h5 class="modal-title">Edit Autoscan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body edit-body">
<div class="container-fluid edit-table p-0">
<form class="row no-gutters editor-form">
<div class="col" style="min-width: 250px !important">
<div class="form-group" id="autoscan-persistent-msg">
<span>
This is a persistent autoscan directory (defined in config), it cannot be modified via the web UI.
</span>
</div>
<div class="form-group row" hidden>
<div class="col-md-6">
<label for="autoscanId">ID:</label>
</div>
<div class="col-md-6">
<span id="autoscanIdTxt" class="overflow"></span>
<input type="hidden" id="autoscanId" />
<input type="checkbox" class="hidden" id="autoscanFromFs" />
<input type="checkbox" class="hidden" id="autoscanPersistent" />
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Scan Mode</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="radio"
name="autoscanMode"
id="autoscanModeNone"
class="form-check-input"
value="none"
aria-describedby="autoscanModeNoneHelp"
/>
<label for="autoscanModeNone" class="form-check-label">None</label>
<small id="autoscanModeNoneHelp" class="form-text text-muted">
Disable autoscanning for this directory
</small>
</div>
<div class="form-check">
<input
type="radio"
name="autoscanMode"
id="autoscanModeInotify"
class="form-check-input"
value="inotify"
aria-describedby="autoscanModeInotifyHelp"
/>
<label for="autoscanModeInotify" class="form-check-label">INotify</label>
<small id="autoscanModeInotifyHelp" class="form-text text-muted">
Efficiently and quickly update based on system filesystem events. This is the suggested method
unless the underlying system does not support it.
</small>
</div>
<div class="form-check">
<input
type="radio"
name="autoscanMode"
id="autoscanModeTimed"
class="form-check-input"
value="timed"
aria-describedby="autoscanModeTimedHelp"
/>
<label for="autoscanModeTimed" class="form-check-label">Timed</label>
<small id="autoscanModeTimedHelp" class="form-text text-muted">
Re-scans the directory at set intervals. Resource intensive if run too often.
</small>
</div>
<div class="form-check">
<input
type="radio"
name="autoscanMode"
id="autoscanModeManual"
class="form-check-input"
value="manual"
aria-describedby="autoscanModeManualHelp"
/>
<label for="autoscanModeManual" class="form-check-label">Manual</label>
<small id="autoscanModeManualHelp" class="form-text text-muted">
Scans have to be started manually
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Import Mode</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="radio"
name="importMode"
id="importModeMediatomb"
class="form-check-input"
value="mt"
aria-describedby="importModeNoneHelp"
/>
<label for="importModeMediatomb" class="form-check-label">MediaTomb</label>
<small id="importModeMediatombHelp" class="form-text text-muted">
Import mode as in MediaTomb: Handle each file completely before doing the next
</small>
</div>
<div class="form-check">
<input
type="radio"
name="importMode"
id="importModeGerbera"
class="form-check-input"
value="grb"
aria-describedby="importModeGerberaHelp"
/>
<label for="importModeGerbera" class="form-check-label">Gerbera</label>
<small id="importModeGerberaHelp" class="form-text text-muted">
Staged import mode: Handle all files together: Read, extract metadata and then create layout
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Recursive</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="checkbox"
name="autoscanRecursive"
id="autoscanRecursive"
class="form-check-input"
aria-describedby="autoscanRecursiveHelp"
/>
<label for="autoscanRecursive" class="form-check-label">Recursive</label>
<small id="autoscanRecursiveHelp" class="form-text text-muted">
Descend into child directories and index them.
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Include Hidden</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="checkbox"
name="autoscanHidden"
id="autoscanHidden"
class="form-check-input"
aria-describedby="autoscanHiddenHelp"
/>
<label for="autoscanHidden" class="form-check-label">Include Hidden Files and Folders</label>
<small id="autoscanHiddenHelp" class="form-text text-muted">
Include hidden files/directories
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Follow Symlinks</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="checkbox"
name="autoscanSymlinks"
id="autoscanSymlinks"
class="form-check-input"
aria-describedby="autoscanSymlinksHelp"
/>
<label for="autoscanSymlinks" class="form-check-label">Follow Symbolic Links</label>
<small id="autoscanSymlinksHelp" class="form-text text-muted">
Follow symbolic links and import them.
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Apply Directory Types</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="checkbox"
name="autoscanDirTypes"
id="autoscanDirTypes"
class="form-check-input"
aria-describedby="autoscanDirTypesHelp"
/>
<label for="autoscanDirTypes" class="form-check-label">Apply UPnP Directory Types</label>
<small id="autoscanDirTypesHelp" class="form-text text-muted">
Set UPnP Directory Type based on content.
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Force Rescan</label>
</div>
<div class="col-9">
<div class="form-check">
<input
type="checkbox"
name="autoscanForceRescan"
id="autoscanForceRescan"
class="form-check-input"
aria-describedby="autoscanForceRescanHelp"
/>
<label for="autoscanForceRescan" class="form-check-label">Force Rescan of Unknown Files</label>
<small id="autoscanForceRescanHelp" class="form-text text-muted">
Rescan unknown files on restart to fix missing properties.
</small>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<label for="autoscanInterval" class="col-3 col-form-label">Scan Interval (in seconds)</label>
<div class="col-4">
<input type="number" id="autoscanInterval" class="form-control" />
</div>
</div>
<div class="form-group row no-gutters">
<label for="autoscanRetryCount" class="col-3 col-form-label">Number of Scan Retries</label>
<div class="col-4">
<input type="number" id="autoscanRetryCount" class="form-control" />
</div>
</div>
</div>
<div class="col ml-2" id="detailAutoscanCol" style="min-width: 250px !important">
<div class="form-group row no-gutters">
<div class="col-3">
<label>Audio</label>
</div>
<div class="col-9">
<div class="form-check">
<div class="row no-gutters">
<div>
<input
type="checkbox"
name="autoscanAudio"
id="autoscanAudio"
class="form-check-input"
aria-describedby="autoscanAudioHelp"
/>
<label for="autoscanAudio" class="form-check-label grb-media-type">All Audio</label>
</div>
<div>
<input
type="checkbox"
name="autoscanAudioMusic"
id="autoscanAudioMusic"
class="form-check-input"
aria-describedby="autoscanAudioHelp"
/>
<label for="autoscanAudioMusic" class="form-check-label grb-media-type">Music</label>
</div>
<div>
<input
type="checkbox"
name="autoscanAudioBook"
id="autoscanAudioBook"
class="form-check-input"
aria-describedby="autoscanAudioHelp"
/>
<label for="autoscanAudioBook" class="form-check-label grb-media-type">Audio Book</label>
</div>
<div>
<input
type="checkbox"
name="autoscanAudioBroadcast"
id="autoscanAudioBroadcast"
class="form-check-input"
aria-describedby="autoscanAudioHelp"
/>
<label for="autoscanAudioBroadcast" class="form-check-label grb-media-type"
>Audio Broadcast</label
>
</div>
</div>
<small id="autoscanAudioHelp" class="form-text text-muted"
>Import audio files from directory.</small
>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Image</label>
</div>
<div class="col-9">
<div class="form-check">
<div class="row no-gutters">
<div>
<input
type="checkbox"
name="autoscanImage"
id="autoscanImage"
class="form-check-input"
aria-describedby="autoscanImageHelp"
/>
<label for="autoscanImage" class="form-check-label grb-media-type">All Images</label>
</div>
<div>
<input
type="checkbox"
name="autoscanImagePhoto"
id="autoscanImagePhoto"
class="form-check-input"
aria-describedby="autoscanImageHelp"
/>
<label for="autoscanImagePhoto" class="form-check-label grb-media-type">Photo</label>
</div>
</div>
<small id="autoscanImageHelp" class="form-text text-muted"
>Import image files from directory.</small
>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<div class="col-3">
<label>Video</label>
</div>
<div class="col-9">
<div class="form-check">
<div class="row no-gutters">
<div>
<input
type="checkbox"
name="autoscanVideo"
id="autoscanVideo"
class="form-check-input"
aria-describedby="autoscanVideoHelp"
/>
<label for="autoscanVideo" class="form-check-label grb-media-type">All Video</label>
</div>
<div>
<input
type="checkbox"
name="autoscanVideoMovie"
id="autoscanVideoMovie"
class="form-check-input"
aria-describedby="autoscanVideoHelp"
/>
<label for="autoscanVideoMovie" class="form-check-label grb-media-type">Movie</label>
</div>
<div>
<input
type="checkbox"
name="autoscanVideoTV"
id="autoscanVideoTV"
class="form-check-input"
aria-describedby="autoscanVideoHelp"
/>
<label for="autoscanVideoTV" class="form-check-label grb-media-type">TV</label>
</div>
<div>
<input
type="checkbox"
name="autoscanVideoMusicVideo"
id="autoscanVideoMusicVideo"
class="form-check-input"
aria-describedby="autoscanVideoHelp"
/>
<label for="autoscanVideoMusicVideo" class="form-check-label grb-media-type"
>Music Video</label
>
</div>
</div>
<small id="autoscanVideoHelp" class="form-text text-muted"
>Import video files from directory.</small
>
</div>
</div>
</div>
<div class="form-group row no-gutters">
<label for="autoscanContainerTypeAudio" class="col-3 col-form-label">Audio Container</label>
<div class="col-9">
<input
type="text"
name="autoscanContainerTypeAudio"
id="autoscanContainerTypeAudio"
class="form-control"
aria-describedby="autoscanContainertypeAudioHelp"
/>
<small id="autoscanContainertypeAudioHelp" class="form-text text-muted"
>Container type for audio files</small
>
</div>
</div>
<div class="form-group row no-gutters">
<label for="autoscanContainerTypeImage" class="col-3 col-form-label">Image Container</label>
<div class="col-9">
<input
type="text"
name="autoscanContainerTypeImage"
id="autoscanContainerTypeImage"
class="form-control"
aria-describedby="autoscanContainertypeImageHelp"
/>
<small id="autoscanContainertypeImageHelp" class="form-text text-muted"
>Container type for image files</small
>
</div>
</div>
<div class="form-group row no-gutters">
<label for="autoscanContainerTypeVideo" class="col-3 col-form-label">Video Container</label>
<div class="col-9">
<input
type="text"
name="autoscanContainerTypeVideo"
id="autoscanContainerTypeVideo"
class="form-control"
aria-describedby="autoscanContainertypeVideoHelp"
/>
<small id="autoscanContainertypeVideoHelp" class="form-controlform-text text-muted"
>Container type for video files</small
>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer bg-light">
<button id="hideAutoscanButton" type="button" class="btn btn-default">Hide Details</button>
<button id="detailAutoscanButton" type="button" class="btn btn-default">Show Details</button>
<button id="autoscanCancel" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="autoscanSave" type="submit" class="btn btn-primary" title="Save and Run" data-dismiss="modal">Save Autoscan</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div id="dirTweakModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Directory Tweak</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form>
<div class="form-group row">
<div class="col-md-4">
<label for="dirTweakLocation">Location:</label>
</div>
<div class="col-md-6">
<input type="text" id="dirTweakLocation" name="location" class="form-control" disabled />
<input type="number" id="dirTweakId" name="id" class="form-control" hidden />
<input type="number" id="dirTweakIndex" name="index" class="form-control" hidden />
<input type="text" id="dirTweakStatus" name="status" class="form-control" hidden />
</div>
</div>
<div class="form-check form-check-inline row">
<div class="col-md-4">
<label for="dirTweakInherit" class="form-check-label">Inherit settings to subdirs:</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline">
<input type="checkbox" name="dirTweakInherit" id="dirTweakInherit" class="form-check-input" />
</div>
</div>
</div>
<div class="form-check form-check-inline row">
<div class="col-md-4">
<label for="dirTweakSymLinks" class="form-check-label">Follow Symbolic Links:</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline">
<input type="checkbox" name="dirTweakSymLinks" id="dirTweakSymLinks" class="form-check-input" />
</div>
</div>
</div>
<div class="form-check form-check-inline row">
<div class="col-md-4">
<label for="dirTweakRecursive" class="form-check-label">Recursive import:</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline">
<input type="checkbox" name="dirTweakRecursive" id="dirTweakRecursive" class="form-check-input" />
</div>
</div>
</div>
<div class="form-check form-check-inline row">
<div class="col-md-4">
<label for="dirTweakHidden" class="form-check-label">Include hidden files/directories:</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline">
<input type="checkbox" name="dirTweakHidden" id="dirTweakHidden" class="form-check-input" />
</div>
</div>
</div>
<div class="form-check form-check-inline row">
<div class="col-md-4">
<label for="dirTweakCaseSens" class="form-check-label">Case sensitive resources:</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline">
<input type="checkbox" name="dirTweakCaseSens" id="dirTweakCaseSens" class="form-check-input" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="dirTweakMetaCharset">Metadata Charset</label>
</div>
<div class="col-md-6">
<input type="text" id="dirTweakMetaCharset" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="dirTweakFanArt">Fan Art File</label>
</div>
<div class="col-md-6">
<input type="text" id="dirTweakFanArt" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="dirTweakSubtitle">Subtitle File</label>
</div>
<div class="col-md-6">
<input type="text" id="dirTweakSubtitle" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="dirTweakResource">Resource File</label>
</div>
<div class="col-md-6">
<input type="text" id="dirTweakResource" class="form-control" />
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer bg-light">
<button id="dirTweakCancel" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="dirTweakDelete" type="submit" class="btn btn-primary" data-dismiss="modal" hidden>
Delete Directory Tweak
</button>
<button id="dirTweakSave" type="submit" class="btn btn-primary" data-dismiss="modal">
Save Directory Tweak
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div id="toast" class="alert">
<div id="grb-toast-wrapper">
<i id="grb-toast-icon" class="fa fa-star"></i>
<span id="grb-toast-msg"></span>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<script src="vendor/jquery/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="vendor/js-cookie.min.js" type="text/javascript"></script>
<script src="vendor/jquery/jquery-ui.min.js" type="text/javascript"></script>
<script src="vendor/tether-2.0.0/tether.min.js" type="text/javascript"></script>
<!-- <script src="vendor/popper/popper.min.js" type="text/javascript"></script> -->
<script src="vendor/bootstrap-4.6.2/js/bootstrap.min.js" type="text/javascript"></script>
<!-- <script src="vendor/bootstrap-5.3.3/js/bootstrap-bundle.min.js" type="text/javascript"></script> -->
<script src="vendor/md5.min.js" type="text/javascript"></script>
<script src="js/gerbera-app.module.js" type="module"></script>
<script src="js/gerbera-auth.module.js" type="module"></script>
<script src="js/gerbera-items.module.js" type="module"></script>
<script src="js/gerbera-tree.module.js" type="module"></script>
<script src="js/gerbera-menu.module.js" type="module"></script>
<script src="js/gerbera-trail.module.js" type="module"></script>
<script src="js/gerbera-autoscan.module.js" type="module"></script>
<script src="js/gerbera-updates.module.js" type="module"></script>
<script src="js/gerbera-clients.module.js" type="module"></script>
<script src="js/gerbera-config.module.js" type="module"></script>
<script src="js/gerbera-tweak.module.js" type="module"></script>
<script src="js/jquery.gerbera.items.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.toast.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.tree.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.trail.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.editor.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.autoscan.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.clients.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.config.js" type="text/javascript"></script>
<script src="js/jquery.gerbera.tweak.js" type="text/javascript"></script>
<script type="module">
import { GerberaApp } from "./js/gerbera-app.module.js";
$(document).ready(function () {
GerberaApp.initialize();
displayMode_default.addEventListener("click", setDisplayMode);
displayMode_light.addEventListener("click", setDisplayMode);
displayMode_dark.addEventListener("click", setDisplayMode);
});
function setDisplayMode(event) {
GerberaApp.setDisplayMode(event);
}
</script>
<script type="text/javascript">
let treeHidden = 0;
hideTree.addEventListener("click", treeHideButton);
function treeHideButton(event) {
if (!treeHidden) {
left.classList.add("hidden");
hideTree.children[treeHidden].classList.add("hidden");
treeHidden = 1;
hideTree.children[treeHidden].classList.remove("hidden");
} else {
left.classList.remove("hidden");
hideTree.children[treeHidden].classList.add("hidden");
treeHidden = 0;
hideTree.children[treeHidden].classList.remove("hidden");
}
}
</script>
<script type="text/javascript">
let ismdwn = 0;
splitterBar.addEventListener("mousedown", splitterMouseDown);
function splitterMouseDown(event) {
ismdwn = 1;
document.body.addEventListener("mousemove", splitterMouseMove);
document.body.addEventListener("mouseup", splitterEnd);
}
function splitterMouseMove(event) {
if (ismdwn === 1) {
let basis =
left.style && left.style.flexBasis
? Number.parseInt(left.style.flexBasis) + event.movementX
: event.clientX;
left.style.flexBasis = basis + "px";
} else {
splitterEnd();
}
}
const splitterEnd = (e) => {
ismdwn = 0;
document.body.removeEventListener("mouseup", splitterEnd);
splitterBar.removeEventListener("mousemove", splitterMouseMove);
};
</script>
</body>
</html>