cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

rework metadata manager tabs

Browse Source
This commit is contained in:
Luke Pulverenti 2015-07-14 16:29:51 -04:00
parent f5fb6ccca5
commit a7ade97b44
19 changed files with 672 additions and 824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard-ui/bower_components/font-roboto/roboto.html vendored
View File

@ -7,5 +7,5 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
<!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">

8
dashboard-ui/bower_components/paper-styles/.bower.json vendored
View File

@ -1,6 +1,6 @@
{
"name": "paper-styles",
"version": "1.0.9",
"version": "1.0.10",
"description": "Common (global) styles for Material Design elements.",
"authors": [
"The Polymer Authors"
@ -28,11 +28,11 @@
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.9",
"_release": "1.0.10",
"_resolution": {
"type": "version",
"tag": "v1.0.9",
"commit": "cb73f4d677c1bb64342263956a0592a2936922d2"
"tag": "v1.0.10",
"commit": "f1a79cd7916f7870a59918911062007bbc07867e"
},
"_source": "git://github.com/PolymerElements/paper-styles.git",
"_target": "^1.0.0",

2
dashboard-ui/bower_components/paper-styles/bower.json vendored
View File

@ -1,6 +1,6 @@
{
"name": "paper-styles",
"version": "1.0.9",
"version": "1.0.10",
"description": "Common (global) styles for Material Design elements.",
"authors": [
"The Polymer Authors"

2
dashboard-ui/bower_components/paper-styles/classes/typography.html vendored
View File

@ -7,7 +7,7 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../font-roboto/roboto.html">
<link rel="import" href="../../font-roboto/roboto.html">
<!--
Typographic styles are provided matching the Material Design standard styles:

8
dashboard-ui/css/metadataeditor.css
View File

@ -1,4 +1,8 @@
.editPageContent {
.editorTab {
padding-bottom: 200px;
}
.editPageContent {
padding: 0;
}
@ -193,7 +197,7 @@
.editorTile {
display: inline-block;
margin: 0 2em 2em 0;
margin: 1em 2em 2em 0;
text-align: center;
vertical-align: middle;
}

73
dashboard-ui/editcollectionitems.html
View File

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="editCollectionTitlesPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/editcollectionitems,jqmicons">
<div data-role="content editPageContent">
<div class="editPageSidebar">
<div class="libraryTree">
<ul></ul>
</div>
</div>
<div class="editPageInnerContent">
<h1 class="itemName editPageName">&nbsp;</h1>
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" id="btnEditMetadata">${TabMetadata}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabCollectionTitles}</a>
<a id="btnEditImages" href="#" data-role="button">${TabImages}</a>
</div>
<p style="margin-top: -20px;">
${EditCollectionItemsHelp}
</p>
<div>
<button type="button" id="btnAddItem" data-icon="plus" data-inline="true" data-mini="true">${ButtonAdd}</button>
<button type="button" id="btnRemoveItems" data-icon="delete" data-inline="true" data-mini="true" disabled="disabled">${ButtonRemove}</button>
</div>
<br />
<div class="collectionItems"></div>
</div>
</div>
<div data-role="popup" class="popupIdentify popup" data-theme="a">
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>
${HeaderAddTitles}
</h3>
</div>
<div data-role="content">
<form class="collectionItemSearchForm" style="max-width: initial;">
<div>
<label for="txtLookupName">${LabelName}</label>
<div style="display: inline-block; width: 75%;">
<input type="text" id="txtLookupName" required="required" />
</div>
<button type="submit" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext">
${ButtonSearch}
</button>
</div>
<div class="collectionItemSearchResults">
</div>
<button id="btnAddItems" type="button" data-icon="plus" data-mini="true">
${ButtonAdd}
</button>
</form>
</div>
</div>
</div>
</body>
</html>

143
dashboard-ui/edititemimages.html
View File

@ -1,143 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="editItemImagesPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemimages,jqmicons">
<div data-role="content editPageContent">
<div class="editPageSidebar smoothScrollY">
<div class="libraryTree">
<ul></ul>
</div>
</div>
<div class="editPageInnerContent">
<h1 class="itemName editPageName">&nbsp;</h1>
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" id="btnEditMetadata">${TabMetadata}</a>
<a id="btnEditSubtitles" style="display: none;" href="#" data-role="button">${TabSubtitles}</a>
<a id="btnEditCollectionTitles" style="display: none;" href="#" data-role="button">${TabCollectionTitles}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabImages}</a>
</div>
<div style="margin: 0 0 1em;">
<paper-button raised class="subdued btnBrowseAllImages"><iron-icon icon="cloud"></iron-icon><span>${ButtonBrowseImages}</span></paper-button>
<paper-button raised class="subdued btnOpenUploadMenu"><iron-icon icon="add"></iron-icon><span>${ButtonUpload}</span></paper-button>
</div>
<div id="imagesContainer" style="display: none;">
<h1>${HeaderImages}</h1>
<div id="images">
</div>
<br />
</div>
<div id="backdropsContainer" style="display: none;">
<h1>${HeaderBackdrops}</h1>
<div id="backdrops">
</div>
<br />
</div>
<div id="screenshotsContainer" style="display: none;">
<h1>${Screenshots}</h1>
<div id="screenshots">
</div>
</div>
</div>
</div>
<div data-role="popup" id="popupUpload" data-theme="a">
<form class="uploadItemImageForm" style="max-width: 100%; margin: 0 1.5em 1.5em;">
<h2>${HeaderAddUpdateImage}</h2>
<div>
<p>${LabelJpgPngOnly}</p>
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
<div id="imageDropZone" class="imageDropZone">
<h3>${LabelDropImageHere}</h3>
<output id="imageOutput"></output>
</div>
<div id="fldUpload" style="display: none;">
<p data-role="fieldcontain">
<label for="selectImageType">${LabelImageType}</label>
<select id="selectImageType" name="selectImageType">
<option value="Primary">${OptionPrimary}</option>
<option value="Art">${OptionArt}</option>
<option value="Backdrop">${OptionBackdrop}</option>
<option value="Banner">${OptionBanner}</option>
<option value="Box">${OptionBox}</option>
<option value="BoxRear">${OptionBoxRear}</option>
<option value="Disc">${OptionDisc}</option>
<option value="Icon">${OptionIcon}</option>
<option value="Logo">${OptionLogo}</option>
<option value="Menu">${OptionMenu}</option>
<option value="Screenshot">${OptionScreenshot}</option>
<option value="Thumb">${OptionThumb}</option>
</select>
</p>
<button type="submit" data-icon="check" data-theme="b">${ButtonUpload}</button>
</div>
<a data-role="button" data-rel="back" data-icon="delete" onclick="Events.trigger($('#uploadImage').val('')[0], 'change');">${ButtonCancel}</a>
</div>
</form>
</div>
<div data-role="popup" class="popup popupDownload" data-theme="a">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">${ButtonClose}</a>
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderBrowseOnlineImages}</h3>
</div>
<div data-role="content">
<div style="text-align: center;">
<div style="margin: 0; display: inline-block;">
<label for="selectImageProvider">${LabelSource}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
<option value="">${OptionAll}</option>
</select>
</div>
<div style="margin: 0; display: inline-block;">
<label for="selectBrowsableImageType">${LabelImage}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectBrowsableImageType" name="selectBrowsableImageType" data-mini="true" data-inline="true">
<option value="Primary">${OptionPrimary}</option>
<option value="Art">${OptionArt}</option>
<option value="Backdrop">${OptionBackdrop}</option>
<option value="Banner">${OptionBanner}</option>
<option value="Box">${OptionBox}</option>
<option value="BoxRear">${OptionBoxRear}</option>
<option value="Disc">${OptionDisc}</option>
<option value="Icon">${OptionIcon}</option>
<option value="Logo">${OptionLogo}</option>
<option value="Menu">${OptionMenu}</option>
<option value="Screenshot">${OptionScreenshot}</option>
<option value="Thumb">${OptionThumb}</option>
</select>
</div>
<div class="availableImagesPaging" style="margin: 0; display: inline-block;"></div>
<div style="margin: 0; display: inline-block; vertical-align: middle; margin-left: 10px;">
<label for="chkAllLanguages">${LabelAllLanguages}</label>
<input type="checkbox" id="chkAllLanguages" data-mini="true" />
</div>
</div>
<div class="availableImagesList"></div>
<div style="text-align: center;">
<a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-icon="delete">${ButtonClose}</a>
</div>
</div>
</div>
</div>
</body>
</html>

919
dashboard-ui/edititemmetadata.html
View File

@ -4,8 +4,8 @@
<title>Emby</title>
</head>
<body>
<div id="editItemMetadataPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemmetadata,jqmicons">
<div data-role="content editPageContent">
<div id="editItemMetadataPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemmetadata,jqmicons,scripts/edititemsubtitles,scripts/editcollectionitems,scripts/edititemimages">
<div>
<div class="editPageSidebar smoothScrollY">
<div class="libraryTree">
<ul></ul>
@ -14,375 +14,449 @@
<div class="editPageInnerContent" style="display: none;">
<h1 class="itemName editPageName">&nbsp;</h1>
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" class="ui-btn-active">${TabMetadata}</a>
<a id="btnEditSubtitles" style="display: none;" href="#" data-role="button">${TabSubtitles}</a>
<a id="btnEditCollectionTitles" style="display: none;" href="editcollectionitems.html" data-role="button">${TabCollectionTitles}</a>
<a href="#" data-role="button" id="btnEditImages">${TabImages}</a>
</div>
<paper-tabs>
<paper-tab class="metadataTabButton">${TabMetadata}</paper-tab>
<paper-tab class="subtitleTabButton">${TabSubtitles}</paper-tab>
<paper-tab class="collectionItemsTabButton">${TabCollectionTitles}</paper-tab>
<paper-tab class="imagesTabButton">${TabImages}</paper-tab>
</paper-tabs>
<form class="editItemMetadataForm editMetadataForm" style="margin-top: -20px;">
<div class="metadataFormFields">
<neon-animated-pages>
<neon-animatable>
<div class="editorTab">
<div>
<button class="btnSave" type="submit" data-theme="a" data-icon="check" data-mini="true" data-inline="true">
${ButtonSave}
</button>
<button class="btnRefresh btnSimpleRefresh" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonRefresh}</button>
<button class="btnRefresh btnRefreshAdvanced" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonAdvancedRefresh}</button>
<button id="btnIdentify" type="button" data-icon="info" data-mini="true" data-inline="true">${ButtonIdentify}</button>
<div style="vertical-align: bottom; display: inline-block;">
<div id="fldDelete" style="display: none;">
<button id="btnDelete" type="button" data-icon="delete" data-mini="true" data-inline="true">${ButtonDelete}</button>
</div>
</div>
</div>
<form class="editItemMetadataForm editMetadataForm">
<div class="metadataFormFields">
<div style="padding: 10px 0;">
<div data-role="fieldcontain" id="fldContentType" style="display:none;">
<label for="selectContentType">${LabelContentType}</label>
<select id="selectContentType" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldPath">
<label for="txtPath">${LabelPath}</label>
<input type="text" id="txtPath" readonly="readonly" />
</div>
<div data-role="fieldcontain">
<label for="txtName">${LabelName}</label>
<input type="text" id="txtName" required="required" />
</div>
<div data-role="fieldcontain" id="fldSortName" style="display: none;">
<label for="txtSortName">${LabelSortName}</label>
<input type="text" id="txtSortName" />
</div>
<div data-role="fieldcontain" id="fldDateAdded" style="display: none;">
<label for="txtDateAdded">${LabelDateAdded}</label>
<input type="date" id="txtDateAdded" />
</div>
<div data-role="fieldcontain" id="fldStatus" style="display: none;">
<label for="selectStatus">${LabelStatus}</label>
<select id="selectStatus" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldArtist" style="display: none;">
<label for="txtArtist">${LabelArtists}</label>
<input type="text" id="txtArtist" placeholder="${LabelArtistsHelp}" />
</div>
<div data-role="fieldcontain" id="fldAlbumArtist" style="display: none;">
<label for="txtAlbumArtist">${LabelAlbumArtists}</label>
<input type="text" id="txtAlbumArtist" placeholder="${LabelArtistsHelp}" />
</div>
<div data-role="fieldcontain" id="fldAlbum" style="display: none;">
<label for="txtAlbum">${LabelAlbum}</label>
<input type="text" id="txtAlbum" />
</div>
<div data-role="fieldcontain" id="fldParentIndexNumber" style="display: none;">
<label id="lblParentIndexNumber" for="txtParentIndexNumber"></label>
<input type="number" id="txtParentIndexNumber" pattern="[0-9]*" />
</div>
<div data-role="fieldcontain" id="fldIndexNumber" style="display: none;">
<label id="lblIndexNumber" for="txtIndexNumber"></label>
<input type="number" id="txtIndexNumber" pattern="[0-9]*" />
</div>
<div id="fldCommunityRating" style="display: none;" data-role="fieldcontain">
<label for="txtCommunityRating">${LabelCommunityRating}</label>
<input type="number" id="txtCommunityRating" step=".1" min="0" max="10" />
</div>
<div id="fldCommunityVoteCount" style="display: none;" data-role="fieldcontain">
<label for="txtCommunityVoteCount">${LabelVoteCount}</label>
<input type="number" id="txtCommunityVoteCount" />
</div>
<div id="fldMetascore" style="display: none;" data-role="fieldcontain">
<label for="txtMetascore">${LabelMetascore}</label>
<input type="number" id="txtMetascore" step="1" min="0" max="100" />
</div>
<div data-role="fieldcontain" id="fldCriticRating" style="display: none;">
<label for="txtCriticRating">${LabelCriticRating}</label>
<input type="number" id="txtCriticRating" step=".1" />
</div>
<div data-role="fieldcontain" id="fldCriticRatingSummary" style="display: none;">
<label for="txtCriticRatingSummary">${LabelCriticRatingSummary}</label>
<input type="text" id="txtCriticRatingSummary" />
</div>
<div data-role="fieldcontain" id="fldAwardSummary" style="display: none;">
<label for="txtAwardSummary">${LabelAwardSummary}</label>
<input type="text" id="txtAwardSummary" />
</div>
<div data-role="fieldcontain">
<label for="txtHomePageUrl">${LabelWebsite}</label>
<input type="url" id="txtHomePageUrl" />
</div>
<div data-role="fieldcontain" id="fldTagline" style="display: none;">
<label for="txtTagline">${LabelTagline}</label>
<input type="text" id="txtTagline" />
</div>
<div data-role="fieldcontain">
<label for="txtOverview">${LabelOverview}</label>
<textarea id="txtOverview"></textarea>
</div>
<div data-role="fieldcontain" id="fldShortOverview" style="display: none;">
<label for="txtShortOverview">${LabelShortOverview}</label>
<textarea id="txtShortOverview"></textarea>
</div>
<div data-role="fieldcontain" id="fldPremiereDate" style="display: none;">
<label id="lblPremiereDate" for="txtPremiereDate">${LabelReleaseDate}</label>
<input type="date" id="txtPremiereDate" />
</div>
<div data-role="fieldcontain" id="fldYear" style="display: none;">
<label id="lblYear" for="txtProductionYear">${LabelYear}</label>
<input type="number" id="txtProductionYear" />
</div>
<div data-role="fieldcontain" id="fldPlaceOfBirth" style="display: none;">
<label for="txtPlaceOfBirth">${LabelPlaceOfBirth}</label>
<input type="text" id="txtPlaceOfBirth" />
</div>
<div data-role="fieldcontain" id="fldEndDate" style="display: none;">
<label id="lblEndDate" for="txtEndDate">${LabelEndDate}</label>
<input type="date" id="txtEndDate" />
</div>
<div data-role="fieldcontain" id="fldAirDays" style="display: none;">
<label for="selectAirDays">${LabelAirDays}</label>
<div style="text-align: center;margin:2em 0 .5em;">
<div data-role="controlgroup" data-mini="true">
<input type="checkbox" class="chkAirDay" id="chkSunday" data-day="Sunday">
<label for="chkSunday">${OptionSunday}</label>
<input type="checkbox" class="chkAirDay" id="chkMonday" data-day="Monday">
<label for="chkMonday">${OptionMonday}</label>
<input type="checkbox" class="chkAirDay" id="chkTuesday" data-day="Tuesday">
<label for="chkTuesday">${OptionTuesday}</label>
<input type="checkbox" class="chkAirDay" id="chkWednesday" data-day="Wednesday">
<label for="chkWednesday">${OptionWednesday}</label>
<input type="checkbox" class="chkAirDay" id="chkThursday" data-day="Thursday">
<label for="chkThursday">${OptionThursday}</label>
<input type="checkbox" class="chkAirDay" id="chkFriday" data-day="Friday">
<label for="chkFriday">${OptionFriday}</label>
<input type="checkbox" class="chkAirDay" id="chkSaturday" data-day="Saturday">
<label for="chkSaturday">${OptionSaturday}</label>
</div>
<paper-button raised class="submit">
<button class="btnSave clearButton" type="submit" data-role="none" style="display:inline-block;">
<iron-icon icon="check"></iron-icon><span>${ButtonSave}</span>
</button>
</paper-button>
</div>
<div data-role="fieldcontain" id="fldAirTime" style="display: none;">
<label for="txtAirTime">${LabelAirTime}</label>
<input type="time" id="txtAirTime" />
</div>
<div data-role="fieldcontain" id="fldSeriesRuntime" style="display: none;">
<label for="txtSeriesRuntime">${LabelRuntimeMinutes}</label>
<input type="number" id="txtSeriesRuntime" />
</div>
<div data-role="fieldcontain" id="fldOfficialRating" style="display: none;">
<label for="selectOfficialRating">${LabelParentalRating}</label>
<select id="selectOfficialRating" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldCustomRating" style="display: none;">
<label for="selectCustomRating">${LabelCustomRating}</label>
<select id="selectCustomRating" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldBudget" style="display: none;">
<label for="txtBudget">${LabelBudget}</label>
<input type="number" id="txtBudget" />
</div>
<div data-role="fieldcontain" id="fldRevenue" style="display: none;">
<label for="txtRevenue">${LabelRevenue}</label>
<input type="number" id="txtRevenue" />
</div>
<div data-role="fieldcontain" id="fldOriginalAspectRatio" style="display: none;">
<label for="txtOriginalAspectRatio">${LabelOriginalAspectRatio}</label>
<input type="text" id="txtOriginalAspectRatio" />
</div>
<div data-role="fieldcontain" id="fldPlayers" style="display: none;">
<label for="txtPlayers">${LabelPlayers}</label>
<input type="number" id="txtPlayers" pattern="[0-9]*" />
</div>
<div data-role="fieldcontain" id="fld3dFormat" style="display: none;">
<label for="select3dFormat">${Label3DFormat}</label>
<select id="select3dFormat" data-mini="true">
<option value=""></option>
<option value="HalfSideBySide">HSBS</option>
<option value="HalfTopAndBottom">HTAB</option>
<option value="FullSideBySide">FSBS</option>
<option value="FullTopAndBottom">FTAB</option>
</select>
</div>
</div>
<br />
<div class="detailSection" id="collapsibleDvdEpisodeInfo" style="display: none;">
<div class="detailSectionHeader">
${HeaderAlternateEpisodeNumbers}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<br />
<div>
<label for="txtDvdSeasonNumber">${LabelDvdSeasonNumber}</label>
<input type="number" id="txtDvdSeasonNumber" pattern="[0-9]*" />
</div>
<div>
<label for="txtDvdEpisodeNumber">${LabelDvdEpisodeNumber}</label>
<input type="number" id="txtDvdEpisodeNumber" pattern="[0-9]*" />
</div>
<div>
<label for="txtAbsoluteEpisodeNumber">${LabelAbsoluteEpisodeNumber}</label>
<input type="number" id="txtAbsoluteEpisodeNumber" pattern="[0-9]*" />
</div>
</div>
</div>
<div class="detailSection" id="collapsibleSpecialEpisodeInfo" style="display: none;">
<div class="detailSectionHeader">
${HeaderSpecialEpisodeInfo}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<br />
<div>
<label for="txtAirsBeforeSeason">${LabelAirsBeforeSeason}</label>
<input type="number" id="txtAirsBeforeSeason" pattern="[0-9]*" />
</div>
<div>
<label for="txtAirsAfterSeason">${LabelAirsAfterSeason}</label>
<input type="number" id="txtAirsAfterSeason" pattern="[0-9]*" />
</div>
<div>
<label for="txtAirsBeforeEpisode">${LabelAirsBeforeEpisode}</label>
<input type="number" id="txtAirsBeforeEpisode" pattern="[0-9]*" />
</div>
</div>
</div>
<div class="detailSection">
<div class="detailSectionHeader">
${HeaderExternalIds}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<div class="externalIds editorFieldset">
</div>
</div>
</div>
<div class="detailSection" id="collapsibleDisplaySettings" style="display:none;">
<div class="detailSectionHeader">
${HeaderDisplaySettings}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<br />
<div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
<label for="txtDisplayMediaType">${LabelTreatImageAs}</label>
<input type="text" id="txtDisplayMediaType" />
</div>
<div id="fldDisplaySpecialsInline" class="fldDisplaySetting">
<label for="chkDisplaySpecialsInline">${LabelDisplaySpecialsWithinSeasons}</label>
<input data-mini="true" type="checkbox" id="chkDisplaySpecialsInline" />
</div>
<div id="fldDisplayOrder" class="fldDisplaySetting">
<label for="selectDisplayOrder" id="labelDisplayOrder">${LabelDisplayOrder}</label>
<select id="selectDisplayOrder" data-mini="true"></select>
</div>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="countriesCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderCountries}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
<paper-button raised class="subdued btnRefresh btnRefreshAdvanced"><iron-icon icon="refresh"></iron-icon><span>${ButtonRefresh}</span></paper-button>
<paper-button id="btnIdentify" raised class="subdued"><iron-icon icon="info"></iron-icon><span>${ButtonIdentify}</span></paper-button>
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listCountries"></ul>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderGenres}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
</div>
</div>
<div data-mini="true" data-role="collapsible" id="peopleCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderPeople}</h3>
<div>
<br />
<button type="button" id="btnAddPerson" data-icon="plus" data-mini="true" data-theme="a">${ButtonAdd}</button>
<br />
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="peopleList"></ul>
</div>
</div>
<div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderPlotKeywords}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listKeywords"></ul>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderStudios}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
</div>
</div>
<div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderTags}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderMetadataSettings}</h3>
<div>
<br />
<div>
<label for="selectLanguage">${LabelMetadataDownloadLanguage}</label>
<select id="selectLanguage" data-mini="true"></select>
</div>
<div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
<br />
<div>
<label for="selectCountry">${LabelCountry}</label>
<select id="selectCountry" data-mini="true"></select>
</div>
<div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
<p>
<div style="padding: 10px 0;">
<div data-role="fieldcontain" id="fldContentType" style="display:none;">
<label for="selectContentType">${LabelContentType}</label>
<select id="selectContentType" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldPath">
<label for="txtPath">${LabelPath}</label>
<input type="text" id="txtPath" readonly="readonly" />
</div>
<div data-role="fieldcontain">
<label for="txtName">${LabelName}</label>
<input type="text" id="txtName" required="required" />
</div>
<div data-role="fieldcontain" id="fldSortName" style="display: none;">
<label for="txtSortName">${LabelSortName}</label>
<input type="text" id="txtSortName" />
</div>
<div data-role="fieldcontain" id="fldDateAdded" style="display: none;">
<label for="txtDateAdded">${LabelDateAdded}</label>
<input type="date" id="txtDateAdded" />
</div>
<div data-role="fieldcontain" id="fldStatus" style="display: none;">
<label for="selectStatus">${LabelStatus}</label>
<select id="selectStatus" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldArtist" style="display: none;">
<label for="txtArtist">${LabelArtists}</label>
<input type="text" id="txtArtist" placeholder="${LabelArtistsHelp}" />
</div>
<div data-role="fieldcontain" id="fldAlbumArtist" style="display: none;">
<label for="txtAlbumArtist">${LabelAlbumArtists}</label>
<input type="text" id="txtAlbumArtist" placeholder="${LabelArtistsHelp}" />
</div>
<div data-role="fieldcontain" id="fldAlbum" style="display: none;">
<label for="txtAlbum">${LabelAlbum}</label>
<input type="text" id="txtAlbum" />
</div>
<div data-role="fieldcontain" id="fldParentIndexNumber" style="display: none;">
<label id="lblParentIndexNumber" for="txtParentIndexNumber"></label>
<input type="number" id="txtParentIndexNumber" pattern="[0-9]*" />
</div>
<div data-role="fieldcontain" id="fldIndexNumber" style="display: none;">
<label id="lblIndexNumber" for="txtIndexNumber"></label>
<input type="number" id="txtIndexNumber" pattern="[0-9]*" />
</div>
<div id="fldCommunityRating" style="display: none;" data-role="fieldcontain">
<label for="txtCommunityRating">${LabelCommunityRating}</label>
<input type="number" id="txtCommunityRating" step=".1" min="0" max="10" />
</div>
<div id="fldCommunityVoteCount" style="display: none;" data-role="fieldcontain">
<label for="txtCommunityVoteCount">${LabelVoteCount}</label>
<input type="number" id="txtCommunityVoteCount" />
</div>
<div id="fldMetascore" style="display: none;" data-role="fieldcontain">
<label for="txtMetascore">${LabelMetascore}</label>
<input type="number" id="txtMetascore" step="1" min="0" max="100" />
</div>
<div data-role="fieldcontain" id="fldCriticRating" style="display: none;">
<label for="txtCriticRating">${LabelCriticRating}</label>
<input type="number" id="txtCriticRating" step=".1" />
</div>
<div data-role="fieldcontain" id="fldCriticRatingSummary" style="display: none;">
<label for="txtCriticRatingSummary">${LabelCriticRatingSummary}</label>
<input type="text" id="txtCriticRatingSummary" />
</div>
<div data-role="fieldcontain" id="fldAwardSummary" style="display: none;">
<label for="txtAwardSummary">${LabelAwardSummary}</label>
<input type="text" id="txtAwardSummary" />
</div>
<div data-role="fieldcontain">
<label for="txtHomePageUrl">${LabelWebsite}</label>
<input type="url" id="txtHomePageUrl" />
</div>
<div data-role="fieldcontain" id="fldTagline" style="display: none;">
<label for="txtTagline">${LabelTagline}</label>
<input type="text" id="txtTagline" />
</div>
<div data-role="fieldcontain">
<label for="txtOverview">${LabelOverview}</label>
<textarea id="txtOverview"></textarea>
</div>
<div data-role="fieldcontain" id="fldShortOverview" style="display: none;">
<label for="txtShortOverview">${LabelShortOverview}</label>
<textarea id="txtShortOverview"></textarea>
</div>
<div data-role="fieldcontain" id="fldPremiereDate" style="display: none;">
<label id="lblPremiereDate" for="txtPremiereDate">${LabelReleaseDate}</label>
<input type="date" id="txtPremiereDate" />
</div>
<div data-role="fieldcontain" id="fldYear" style="display: none;">
<label id="lblYear" for="txtProductionYear">${LabelYear}</label>
<input type="number" id="txtProductionYear" />
</div>
<div data-role="fieldcontain" id="fldPlaceOfBirth" style="display: none;">
<label for="txtPlaceOfBirth">${LabelPlaceOfBirth}</label>
<input type="text" id="txtPlaceOfBirth" />
</div>
<div data-role="fieldcontain" id="fldEndDate" style="display: none;">
<label id="lblEndDate" for="txtEndDate">${LabelEndDate}</label>
<input type="date" id="txtEndDate" />
</div>
<div data-role="fieldcontain" id="fldAirDays" style="display: none;">
<label for="selectAirDays">${LabelAirDays}</label>
<div data-role="controlgroup" data-mini="true">
<input type="checkbox" class="chkAirDay" id="chkSunday" data-day="Sunday">
<label for="chkSunday">${OptionSunday}</label>
<input type="checkbox" class="chkAirDay" id="chkMonday" data-day="Monday">
<label for="chkMonday">${OptionMonday}</label>
<input type="checkbox" class="chkAirDay" id="chkTuesday" data-day="Tuesday">
<label for="chkTuesday">${OptionTuesday}</label>
<input type="checkbox" class="chkAirDay" id="chkWednesday" data-day="Wednesday">
<label for="chkWednesday">${OptionWednesday}</label>
<input type="checkbox" class="chkAirDay" id="chkThursday" data-day="Thursday">
<label for="chkThursday">${OptionThursday}</label>
<input type="checkbox" class="chkAirDay" id="chkFriday" data-day="Friday">
<label for="chkFriday">${OptionFriday}</label>
<input type="checkbox" class="chkAirDay" id="chkSaturday" data-day="Saturday">
<label for="chkSaturday">${OptionSaturday}</label>
</div>
</div>
<div data-role="fieldcontain" id="fldAirTime" style="display: none;">
<label for="txtAirTime">${LabelAirTime}</label>
<input type="time" id="txtAirTime" />
</div>
<div data-role="fieldcontain" id="fldSeriesRuntime" style="display: none;">
<label for="txtSeriesRuntime">${LabelRuntimeMinutes}</label>
<input type="number" id="txtSeriesRuntime" />
</div>
<div data-role="fieldcontain" id="fldOfficialRating" style="display: none;">
<label for="selectOfficialRating">${LabelParentalRating}</label>
<select id="selectOfficialRating" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldCustomRating" style="display: none;">
<label for="selectCustomRating">${LabelCustomRating}</label>
<select id="selectCustomRating" data-mini="true"></select>
</div>
<div data-role="fieldcontain" id="fldBudget" style="display: none;">
<label for="txtBudget">${LabelBudget}</label>
<input type="number" id="txtBudget" />
</div>
<div data-role="fieldcontain" id="fldRevenue" style="display: none;">
<label for="txtRevenue">${LabelRevenue}</label>
<input type="number" id="txtRevenue" />
</div>
<div data-role="fieldcontain" id="fldOriginalAspectRatio" style="display: none;">
<label for="txtOriginalAspectRatio">${LabelOriginalAspectRatio}</label>
<input type="text" id="txtOriginalAspectRatio" />
</div>
<div data-role="fieldcontain" id="fldPlayers" style="display: none;">
<label for="txtPlayers">${LabelPlayers}</label>
<input type="number" id="txtPlayers" pattern="[0-9]*" />
</div>
<div data-role="fieldcontain" id="fld3dFormat" style="display: none;">
<label for="select3dFormat">${Label3DFormat}</label>
<select id="select3dFormat" data-mini="true">
<option value=""></option>
<option value="HalfSideBySide">HSBS</option>
<option value="HalfTopAndBottom">HTAB</option>
<option value="FullSideBySide">FSBS</option>
<option value="FullTopAndBottom">FTAB</option>
</select>
</div>
</div>
<br />
<label for="chkLockData">${LabelLockItemToPreventChanges}</label>
<input data-mini="true" type="checkbox" id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
</p>
<br />
<div id="providerSettingsContainer" style="display: none">
<div class="detailSection" id="collapsibleDvdEpisodeInfo" style="display: none;">
<div class="detailSectionHeader">
${HeaderAlternateEpisodeNumbers}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<br />
<div>
<label for="txtDvdSeasonNumber">${LabelDvdSeasonNumber}</label>
<input type="number" id="txtDvdSeasonNumber" pattern="[0-9]*" />
</div>
<div>
<label for="txtDvdEpisodeNumber">${LabelDvdEpisodeNumber}</label>
<input type="number" id="txtDvdEpisodeNumber" pattern="[0-9]*" />
</div>
<div>
<label for="txtAbsoluteEpisodeNumber">${LabelAbsoluteEpisodeNumber}</label>
<input type="number" id="txtAbsoluteEpisodeNumber" pattern="[0-9]*" />
</div>
</div>
</div>
<div class="detailSection" id="collapsibleSpecialEpisodeInfo" style="display: none;">
<div class="detailSectionHeader">
${HeaderSpecialEpisodeInfo}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<br />
<div>
<label for="txtAirsBeforeSeason">${LabelAirsBeforeSeason}</label>
<input type="number" id="txtAirsBeforeSeason" pattern="[0-9]*" />
</div>
<div>
<label for="txtAirsAfterSeason">${LabelAirsAfterSeason}</label>
<input type="number" id="txtAirsAfterSeason" pattern="[0-9]*" />
</div>
<div>
<label for="txtAirsBeforeEpisode">${LabelAirsBeforeEpisode}</label>
<input type="number" id="txtAirsBeforeEpisode" pattern="[0-9]*" />
</div>
</div>
</div>
<div class="detailSection">
<div class="detailSectionHeader">
${HeaderExternalIds}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<div class="externalIds editorFieldset">
</div>
</div>
</div>
<div class="detailSection" id="collapsibleDisplaySettings" style="display:none;">
<div class="detailSectionHeader">
${HeaderDisplaySettings}
</div>
<div class="detailSectionContent" style="padding: 0 .5em;">
<br />
<div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
<label for="txtDisplayMediaType">${LabelTreatImageAs}</label>
<input type="text" id="txtDisplayMediaType" />
</div>
<div id="fldDisplaySpecialsInline" class="fldDisplaySetting">
<label for="chkDisplaySpecialsInline">${LabelDisplaySpecialsWithinSeasons}</label>
<input data-mini="true" type="checkbox" id="chkDisplaySpecialsInline" />
</div>
<div id="fldDisplayOrder" class="fldDisplaySetting">
<label for="selectDisplayOrder" id="labelDisplayOrder">${LabelDisplayOrder}</label>
<select id="selectDisplayOrder" data-mini="true"></select>
</div>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="countriesCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderCountries}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listCountries"></ul>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderGenres}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
</div>
</div>
<div data-mini="true" data-role="collapsible" id="peopleCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderPeople}</h3>
<div>
<br />
<button type="button" id="btnAddPerson" data-icon="plus" data-mini="true" data-theme="a">${ButtonAdd}</button>
<br />
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="peopleList"></ul>
</div>
</div>
<div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderPlotKeywords}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listKeywords"></ul>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderStudios}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
</div>
</div>
<div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderTags}</h3>
<div data-role="editableListviewContainer">
<div>
<div style="display: inline-block; width: 80%;">
<input type="text" class="txtEditableListview" />
</div>
<a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
</div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
</div>
</div>
<div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none; margin-top: 1em;">
<h3>${HeaderMetadataSettings}</h3>
<div>
<br />
<div>
<label for="selectLanguage">${LabelMetadataDownloadLanguage}</label>
<select id="selectLanguage" data-mini="true"></select>
</div>
<div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
<br />
<div>
<label for="selectCountry">${LabelCountry}</label>
<select id="selectCountry" data-mini="true"></select>
</div>
<div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
<p>
<br />
<label for="chkLockData">${LabelLockItemToPreventChanges}</label>
<input data-mini="true" type="checkbox" id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
</p>
<br />
<div id="providerSettingsContainer" style="display: none">
</div>
<br />
</div>
</div>
<br />
<button type="submit" data-role="none" class="clearButton btnSave">
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
</button>
</div>
</form>
</div>
</neon-animatable>
<neon-animatable>
<div class="editorTab subtitleTabContent">
<br />
<div class="readOnlyContent" style="max-width: 700px;">
<div class="subtitleList"></div>
</div>
<h1>${HeaderSearchForSubtitles}</h1>
<form class="subtitleSearchForm">
<div style="display: inline-block; width: 85%;">
<label for="selectLanguage">${LabelLanguage}</label>
<select id="selectLanguage" required="required" data-mini="true"></select>
</div>
<button type="submit" data-icon="search" class="btnSearchSubtitles" data-inline="true" data-iconpos="notext" data-mini="true" style="vertical-align: bottom;">${ButtonSearch}</button>
</form>
<br />
<div class="readOnlyContent" style="max-width: 700px;">
<div class="subtitleResults"></div>
<div class="noSearchResults" style="display: none;">
${MessageNoSubtitleSearchResultsFound}
</div>
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="editorTab collectionItemsTabContent">
<p style="margin:1.5em 0;">
${EditCollectionItemsHelp}
</p>
<div>
<button type="button" id="btnAddItem" data-icon="plus" data-inline="true" data-mini="true">${ButtonAdd}</button>
<button type="button" id="btnRemoveItems" data-icon="delete" data-inline="true" data-mini="true" disabled="disabled">${ButtonRemove}</button>
</div>
<br />
<div class="collectionItems"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="editorTab imageEditorTab">
<div style="text-align: center;margin:2em 0 .5em;">
<paper-button raised class="subdued btnBrowseAllImages"><iron-icon icon="cloud"></iron-icon><span>${ButtonBrowseImages}</span></paper-button>
<paper-button raised class="subdued btnOpenUploadMenu"><iron-icon icon="add"></iron-icon><span>${ButtonUpload}</span></paper-button>
</div>
<div id="imagesContainer" style="display: none;">
<h1>${HeaderImages}</h1>
<div id="images">
</div>
<br />
</div>
</div>
<br />
<button class="btnSave" type="submit" data-theme="a" data-icon="check">
${ButtonSave}
</button>
</div>
</form>
<div id="backdropsContainer" style="display: none;">
<h1>${HeaderBackdrops}</h1>
<div id="backdrops">
</div>
<br />
</div>
<div id="screenshotsContainer" style="display: none;">
<h1>${Screenshots}</h1>
<div id="screenshots">
</div>
</div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
</div>
<div data-role="content">
</div>
<div data-role="popup" class="popupIdentify popup" data-theme="a">
<div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
@ -534,6 +608,135 @@
</div>
</div>
</div>
<div data-role="popup" class="ui-content popupSubtitleViewer">
<a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<div class="subtitleViewerContent">
<pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
</div>
</div>
<div data-role="popup" class="popupIdentifyCollection popup" data-theme="a">
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>
${HeaderAddTitles}
</h3>
</div>
<div data-role="content">
<form class="collectionItemSearchForm" style="max-width: initial;">
<div>
<label for="txtLookupName">${LabelName}</label>
<div style="display: inline-block; width: 75%;">
<input type="text" id="txtLookupName" required="required" />
</div>
<button type="submit" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext">
${ButtonSearch}
</button>
</div>
<div class="collectionItemSearchResults">
</div>
<button id="btnAddItems" type="button" data-icon="plus" data-mini="true">
${ButtonAdd}
</button>
</form>
</div>
</div>
<div data-role="popup" id="popupUpload" data-theme="a">
<form class="uploadItemImageForm" style="max-width: 100%; margin: 0 1.5em 1.5em;">
<h2>${HeaderAddUpdateImage}</h2>
<div>
<p>${LabelJpgPngOnly}</p>
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
<div id="imageDropZone" class="imageDropZone">
<h3>${LabelDropImageHere}</h3>
<output id="imageOutput"></output>
</div>
<div id="fldUpload" style="display: none;">
<p data-role="fieldcontain">
<label for="selectImageType">${LabelImageType}</label>
<select id="selectImageType" name="selectImageType">
<option value="Primary">${OptionPrimary}</option>
<option value="Art">${OptionArt}</option>
<option value="Backdrop">${OptionBackdrop}</option>
<option value="Banner">${OptionBanner}</option>
<option value="Box">${OptionBox}</option>
<option value="BoxRear">${OptionBoxRear}</option>
<option value="Disc">${OptionDisc}</option>
<option value="Icon">${OptionIcon}</option>
<option value="Logo">${OptionLogo}</option>
<option value="Menu">${OptionMenu}</option>
<option value="Screenshot">${OptionScreenshot}</option>
<option value="Thumb">${OptionThumb}</option>
</select>
</p>
<button type="submit" data-icon="check" data-theme="b">${ButtonUpload}</button>
</div>
<a data-role="button" data-rel="back" data-icon="delete" onclick="Events.trigger($('#uploadImage').val('')[0], 'change');">${ButtonCancel}</a>
</div>
</form>
</div>
<div data-role="popup" class="popup popupDownload" data-theme="a">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">${ButtonClose}</a>
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderBrowseOnlineImages}</h3>
</div>
<div data-role="content">
<div style="text-align: center;">
<div style="margin: 0; display: inline-block;">
<label for="selectImageProvider">${LabelSource}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
<option value="">${OptionAll}</option>
</select>
</div>
<div style="margin: 0; display: inline-block;">
<label for="selectBrowsableImageType">${LabelImage}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectBrowsableImageType" name="selectBrowsableImageType" data-mini="true" data-inline="true">
<option value="Primary">${OptionPrimary}</option>
<option value="Art">${OptionArt}</option>
<option value="Backdrop">${OptionBackdrop}</option>
<option value="Banner">${OptionBanner}</option>
<option value="Box">${OptionBox}</option>
<option value="BoxRear">${OptionBoxRear}</option>
<option value="Disc">${OptionDisc}</option>
<option value="Icon">${OptionIcon}</option>
<option value="Logo">${OptionLogo}</option>
<option value="Menu">${OptionMenu}</option>
<option value="Screenshot">${OptionScreenshot}</option>
<option value="Thumb">${OptionThumb}</option>
</select>
</div>
<div class="availableImagesPaging" style="margin: 0; display: inline-block;"></div>
<div style="margin: 0; display: inline-block; vertical-align: middle; margin-left: 10px;">
<label for="chkAllLanguages">${LabelAllLanguages}</label>
<input type="checkbox" id="chkAllLanguages" data-mini="true" />
</div>
</div>
<div class="availableImagesList"></div>
<div style="text-align: center;">
<a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-icon="delete">${ButtonClose}</a>
</div>
</div>
</div>
</div>
</body>
</html>

54
dashboard-ui/edititemsubtitles.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="editItemSubtitlesPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemsubtitles,jqmicons">
<div data-role="content editPageContent">
<div class="editPageSidebar smoothScrollY">
<div class="libraryTree">
<ul></ul>
</div>
</div>
<div class="editPageInnerContent">
<h1 class="itemName editPageName">&nbsp;</h1>
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a id="btnEditMetadata" href="#" data-role="button">${TabMetadata}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabSubtitles}</a>
<a id="btnEditImages" href="#" data-role="button">${TabImages}</a>
</div>
<div class="readOnlyContent" style="max-width: 700px;">
<div class="subtitleList"></div>
</div>
<h1>${HeaderSearchForSubtitles}</h1>
<form class="subtitleSearchForm">
<div style="display: inline-block; width: 85%;">
<label for="selectLanguage">${LabelLanguage}</label>
<select id="selectLanguage" required="required" data-mini="true"></select>
</div>
<button type="submit" data-icon="search" class="btnSearchSubtitles" data-inline="true" data-iconpos="notext" data-mini="true" style="vertical-align: bottom;">${ButtonSearch}</button>
</form>
<br />
<div class="readOnlyContent" style="max-width: 700px;">
<div class="subtitleResults"></div>
<div class="noSearchResults" style="display: none;">
${MessageNoSubtitleSearchResultsFound}
</div>
</div>
</div>
</div>
<div data-role="popup" class="ui-content popupSubtitleViewer">
<a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<div class="subtitleViewerContent">
<pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
</div>
</div>
</div>
</body>
</html>

46
dashboard-ui/scripts/editcollectionitems.js
View File

@ -2,14 +2,6 @@
var currentItem;
function updateTabs(page, item) {
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
$('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
}
function reload(page) {
Dashboard.showLoadingMsg();
@ -22,8 +14,6 @@
LibraryBrowser.renderName(item, $('.itemName', page), true);
updateTabs(page, item);
reloadTitles(page, item);
});
}
@ -192,7 +182,7 @@
Dashboard.hideLoadingMsg();
$('.popupIdentify', page).popup('close');
$('.popupIdentifyCollection', page).popup('close');
reload(page);
@ -237,29 +227,14 @@
return false;
}
$(document).on('pageinitdepends', "#editCollectionTitlesPage", function () {
$(document).on('pageinitdepends', "#editItemMetadataPage", function () {
var page = this;
$('.libraryTree', page).on('itemclicked', function (event, data) {
if (data.id != currentItem.Id) {
MetadataEditor.currentItemId = data.id;
MetadataEditor.currentItemType = data.itemType;
//Dashboard.navigate('edititemmetadata.html?id=' + data.id);
//$.mobile.urlHistory.ignoreNextHashChange = true;
window.location.hash = 'editItemImagesPage?id=' + data.id;
reload(page);
}
});
$('#btnAddItem', page).on('click', function () {
var popup = $('.popupIdentify', page).popup('open');
var popup = $('.popupIdentifyCollection', page).popup('open');
$('#txtLookupName', popup).val('');
$('.collectionItemSearchResults', popup).empty();
@ -279,17 +254,14 @@
$('.collectionItemSearchForm').off('submit', onSearchFormSubmit).on('submit', onSearchFormSubmit);
}).on('pagebeforeshowready', "#editCollectionTitlesPage", function () {
$(page.querySelector('neon-animated-pages')).on('tabchange', function () {
var page = this;
if (parseInt(this.selected) == 2) {
var tabContent = page.querySelector('.collectionItemsTabContent');
reload(page);
}).on('pagebeforehide', "#editCollectionTitlesPage", function () {
var page = this;
currentItem = null;
reload(tabContent);
}
});
});
})(jQuery, document, window, window.FileReader, escape);

59
dashboard-ui/scripts/edititemimages.js
View File

@ -8,15 +8,6 @@
var browsableImageType = 'Primary';
var selectedProvider;
function updateTabs(page, item) {
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
$('#btnEditSubtitles', page).attr('href', 'edititemsubtitles.html?' + query);
$('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
}
function getBaseRemoteOptions() {
var options = {};
@ -245,20 +236,6 @@
LibraryBrowser.renderName(item, $('.itemName', page), true);
updateTabs(page, item);
if (item.Type == "BoxSet") {
$('#btnEditCollectionTitles', page).show();
} else {
$('#btnEditCollectionTitles', page).hide();
}
if (item.MediaType == "Video" && item.LocationType == "FileSystem" && item.Type !== 'TvChannel') {
$('#btnEditSubtitles', page).show();
} else {
$('#btnEditSubtitles', page).hide();
}
ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
if (providers.length) {
@ -520,25 +497,10 @@
window.EditItemImagesPage = new editItemImages();
$(document).on('pageinitdepends', "#editItemImagesPage", function () {
$(document).on('pageinitdepends', "#editItemMetadataPage", function () {
var page = this;
$('.libraryTree', page).on('itemclicked', function (event, data) {
if (data.id != currentItem.Id) {
MetadataEditor.currentItemId = data.id;
MetadataEditor.currentItemType = data.itemType;
//Dashboard.navigate('edititemmetadata.html?id=' + data.id);
//$.mobile.urlHistory.ignoreNextHashChange = true;
window.location.hash = 'editItemImagesPage?id=' + data.id;
reload(page);
}
});
$('#selectBrowsableImageType', page).on('change', function () {
browsableImageType = this.value;
@ -578,12 +540,6 @@
reloadBrowsableImages(page);
});
}).on('pageshowready', "#editItemImagesPage", function () {
var page = this;
reload(page);
$('#uploadImage', page).on("change", function () {
setFiles(page, this.files);
});
@ -605,15 +561,14 @@
return false;
});
}).on('pagebeforehide', "#editItemImagesPage", function () {
$(page.querySelector('neon-animated-pages')).on('tabchange', function () {
var page = this;
if (parseInt(this.selected) == 3) {
var tabContent = page.querySelector('.imageEditorTab');
currentItem = null;
$('#uploadImage', page).off("change");
$("#imageDropZone", page).off('dragover').off('drop');
reload(tabContent);
}
});
});
})(jQuery, document, window, window.FileReader, escape);

91
dashboard-ui/scripts/edititemmetadata.js
View File

@ -4,15 +4,6 @@
var currentSearchResult;
var metadataEditorInfo;
function updateTabs(page, item) {
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
$('#btnEditSubtitles', page).attr('href', 'edititemsubtitles.html?' + query);
$('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
}
function reload(page) {
unbindItemChanged(page);
@ -50,21 +41,19 @@
LibraryBrowser.renderName(item, $('.itemName', page), true);
updateTabs(page, item);
setFieldVisibilities(page, item);
fillItemInfo(page, item, metadataEditorInfo.ParentalRatingOptions);
if (item.Type == "BoxSet") {
$('#btnEditCollectionTitles', page).show();
$('.collectionItemsTabButton', page).show();
} else {
$('#btnEditCollectionTitles', page).hide();
$('.collectionItemsTabButton', page).hide();
}
if (item.MediaType == "Video" && item.LocationType == "FileSystem" && item.Type !== 'TvChannel') {
$('#btnEditSubtitles', page).show();
$('.subtitleTabButton', page).show();
} else {
$('#btnEditSubtitles', page).hide();
$('.subtitleTabButton', page).hide();
}
if (item.MediaType == 'Photo') {
@ -85,20 +74,8 @@
$('#fldTagline', page).hide();
}
Dashboard.getCurrentUser().done(function (user) {
var moreCommands = LibraryBrowser.getMoreCommands(item, user);
if (moreCommands.indexOf('delete') != -1) {
$('#fldDelete', page).show();
} else {
$('#fldDelete', page).hide();
}
Dashboard.hideLoadingMsg();
bindItemChanged(page);
});
Dashboard.hideLoadingMsg();
bindItemChanged(page);
});
}
@ -1447,7 +1424,7 @@
//$.mobile.urlHistory.ignoreNextHashChange = true;
window.location.hash = 'editItemMetadataPage?id=' + data.id;
reload(page);
$(page.querySelector('neon-animated-pages')).trigger('tabchange');
}
});
@ -1462,14 +1439,34 @@
$('.popupAdvancedRefreshForm').off('submit', EditItemMetadataPage.onRefreshFormSubmit).on('submit', EditItemMetadataPage.onRefreshFormSubmit);
$('.identifyOptionsForm').off('submit', EditItemMetadataPage.onIdentificationOptionsSubmit).on('submit', EditItemMetadataPage.onIdentificationOptionsSubmit);
$(page.querySelector('paper-tabs')).on('iron-select', function () {
page.querySelector('neon-animated-pages').selected = this.selected;
});
var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages');
configurePaperLibraryTabs(page, tabs, pages);
$(tabs).on('iron-select', function () {
var selected = this.selected;
page.querySelector('neon-animated-pages').selected = selected;
});
$(pages).on('tabchange', function () {
loadTab(page, parseInt(this.selected));
});
}).on('pageshowready', "#editItemMetadataPage", function () {
var page = this;
reload(page);
$(LibraryBrowser).on('itemdeleting', onItemDeleted);
page.querySelector('paper-tabs').selected = parseInt(getParameterByName('tab') || '0');
page.querySelector('paper-tabs').selected = 0;
}).on('pagebeforehide', "#editItemMetadataPage", function () {
var page = this;
@ -1479,5 +1476,35 @@
});
function configurePaperLibraryTabs(ownerpage, tabs, pages) {
tabs.hideScrollButtons = true;
$(ownerpage).on('pagebeforeshowready', LibraryBrowser.onTabbedPageBeforeShowReady);
$(pages).on('iron-select', function () {
// When transition animations are used, add a content loading delay to allow the animations to finish
// Otherwise with both operations happening at the same time, it can cause the animation to not run at full speed.
var delay = 500;
var pgs = this;
setTimeout(function () {
$(pgs).trigger('tabchange');
}, delay);
});
}
function loadTab(page, index) {
switch (index) {
case 0:
reload(page);
break;
default:
break;
}
}
})(jQuery, document, window);

67
dashboard-ui/scripts/edititemsubtitles.js
View File

@ -2,14 +2,6 @@
var currentItem;
function updateTabs(page, item) {
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
$('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
}
function showLocalSubtitles(page, index) {
Dashboard.showLoadingMsg();
@ -273,28 +265,12 @@
LibraryBrowser.renderName(item, $('.itemName', page), true);
updateTabs(page, item);
fillSubtitleList(page, item);
Dashboard.hideLoadingMsg();
});
}
function onWebSocketMessageReceived(e, data) {
var msg = data;
if (msg.MessageType === "LibraryChanged") {
if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
Logger.log('Item updated - reloading subtitles');
reload($.mobile.activePage);
}
}
}
function onSearchSubmit() {
var form = this;
@ -305,51 +281,30 @@
return false;
}
$(document).on('pageinitdepends', "#editItemSubtitlesPage", function () {
$(document).on('pageinitdepends', "#editItemMetadataPage", function () {
var page = this;
$('.libraryTree', page).on('itemclicked', function (event, data) {
if (data.id != currentItem.Id) {
MetadataEditor.currentItemId = data.id;
MetadataEditor.currentItemType = data.itemType;
//Dashboard.navigate('edititemmetadata.html?id=' + data.id);
//$.mobile.urlHistory.ignoreNextHashChange = true;
window.location.hash = 'editItemSubtitlesPage?id=' + data.id;
reload(page);
}
});
$('.subtitleSearchForm').off('submit', onSearchSubmit).on('submit', onSearchSubmit);
}).on('pageshowready', "#editItemSubtitlesPage", function () {
$(page.querySelector('neon-animated-pages')).on('tabchange', function () {
var page = this;
if (parseInt(this.selected) == 1) {
var tabContent = page.querySelector('.subtitleTabContent');
$('.subtitleResults', page).empty();
$('.subtitleResults', tabContent).empty();
Dashboard.showLoadingMsg();
Dashboard.showLoadingMsg();
reload(page);
reload(tabContent);
ApiClient.getCultures().done(function (languages) {
ApiClient.getCultures().done(function (languages) {
fillLanguages(page, languages);
fillLanguages(tabContent, languages);
});
}
});
$(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
}).on('pagebeforehide', "#editItemSubtitlesPage", function () {
var page = this;
currentItem = null;
$(ApiClient).off("websocketmessage", onWebSocketMessageReceived);
});
})(jQuery, window, document);

3
dashboard-ui/scripts/homeupcoming.js
View File

@ -132,11 +132,12 @@
$(document).on('pageinitdepends', "#indexPage", function () {
var page = this;
var tabContent = page.querySelector('.homeUpcomingTabContent');
$(page.querySelector('neon-animated-pages')).on('tabchange', function () {
if (parseInt(this.selected) == 3) {
var tabContent = page.querySelector('.homeUpcomingTabContent');
if (LibraryBrowser.needsRefresh(tabContent)) {
loadUpcoming(tabContent);
}

6
dashboard-ui/scripts/indexpage.js
View File

@ -211,7 +211,9 @@
var page = this;
var tabs = page.querySelector('paper-tabs');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('neon-animated-pages'));
var pages = page.querySelector('neon-animated-pages');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages);
$(tabs).on('iron-select', function () {
var selected = this.selected;
@ -229,7 +231,7 @@
}
});
$(page.querySelector('neon-animated-pages')).on('tabchange', function () {
$(pages).on('tabchange', function () {
loadTab(page, parseInt(this.selected));
});

2
dashboard-ui/scripts/itembynamedetailpage.js
View File

@ -88,7 +88,7 @@
$('.btnSync', page).addClass('hide');
}
var editImagesHref = user.Policy.IsAdministrator ? 'edititemimages.html' + editQuery : null;
var editImagesHref = user.Policy.IsAdministrator ? 'edititemmetadata.html' + (editQuery + "&tab=3") : null;
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, editImagesHref, true));

4
dashboard-ui/scripts/itemdetailpage.js
View File

@ -133,7 +133,7 @@
function renderImage(page, item, user) {
var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemmetadata.html?tab=3&id=" + item.Id : "";
LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref);
}
@ -959,7 +959,7 @@
html += '<span>' + type.name + '</span>';
if (user.Policy.IsAdministrator) {
html += '<a class="detailSectionHeaderButton" href="editcollectionitems.html?id=' + currentItem.Id + '" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonEdit') + '</a>';
html += '<a class="detailSectionHeaderButton" href="edititemmetadata.html?tab=2&id=' + currentItem.Id + '" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonEdit') + '</a>';
}
html += '</div>';

6
dashboard-ui/scripts/reports.js
View File

@ -138,18 +138,18 @@
}
if (!rRow.HasImageTagsPrimary) {
html += '<a href="edititemimages.html?id=' + rRow.Id + '"><img src="css/images/editor/missingprimaryimage.png" title="Missing primary image." style="height:16px;" /></a>';
html += '<a href="edititemmetadata.html?tab=3&id=' + rRow.Id + '"><img src="css/images/editor/missingprimaryimage.png" title="Missing primary image." style="height:16px;" /></a>';
}
if (!rRow.HasImageTagsBackdrop) {
if (rRow.RowType !== "Episode" && rRow.RowType !== "Season" && rRow.MediaType !== "Audio" && rRow.RowType !== "TvChannel" && rRow.RowType !== "MusicAlbum") {
html += '<a href="edititemimages.html?id=' + rRow.Id + '"><img src="css/images/editor/missingbackdrop.png" title="Missing backdrop image." style="height:16px;" /></a>';
html += '<a href="edititemmetadata.html?tab=3&id=' + rRow.Id + '"><img src="css/images/editor/missingbackdrop.png" title="Missing backdrop image." style="height:16px;" /></a>';
}
}
if (!rRow.HasImageTagsLogo) {
if (rRow.RowType === "Movie" || rRow.RowType === "Trailer" || rRow.RowType === "Series" || rRow.RowType === "MusicArtist" || rRow.RowType === "BoxSet") {
html += '<a href="edititemimages.html?id=' + rRow.Id + '"><img src="css/images/editor/missinglogo.png" title="Missing logo image." style="height:16px;" /></a>';
html += '<a href="edititemmetadata.html?tab=3&id=' + rRow.Id + '"><img src="css/images/editor/missinglogo.png" title="Missing logo image." style="height:16px;" /></a>';
}
}
break;

1
dashboard-ui/vulcanize-out.html
View File

@ -6735,7 +6735,6 @@ this._removeChildren();
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
<style is="custom-style">