Ctrl K
ComunidadGuías…

web/index.html

Rama master · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!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&nbsp;
                  <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>
                        &nbsp;&nbsp;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">&nbsp;</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>&nbsp;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">&times;</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">&times;</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">&times;</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">&times;</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>