mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
First separation commit.
Added LICENSE, README.md, CONTRIBUTORS.md
This commit is contained in:
Erwin de Haan
parent
09513af31b
commit
4678528d00
657 changed files with 422 additions and 0 deletions
211
src/bower_components/emby-webcomponents/subtitlesettings/subtitleappearancehelper.js
vendored
Normal file
211
src/bower_components/emby-webcomponents/subtitlesettings/subtitleappearancehelper.js
vendored
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
define([], function() {
|
||||
"use strict";
|
||||
|
||||
function getTextStyles(settings, isCue) {
|
||||
var list = [];
|
||||
if (isCue) switch (settings.textSize || "") {
|
||||
case "smaller":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: ".5em"
|
||||
});
|
||||
break;
|
||||
case "small":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: ".7em"
|
||||
});
|
||||
break;
|
||||
case "large":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "1.3em"
|
||||
});
|
||||
break;
|
||||
case "larger":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "1.72em"
|
||||
});
|
||||
break;
|
||||
case "extralarge":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "2em"
|
||||
});
|
||||
break;
|
||||
default:
|
||||
case "medium":
|
||||
} else switch (settings.textSize || "") {
|
||||
case "smaller":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: ".8em"
|
||||
});
|
||||
break;
|
||||
case "small":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "inherit"
|
||||
});
|
||||
break;
|
||||
case "larger":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "2em"
|
||||
});
|
||||
break;
|
||||
case "extralarge":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "2.2em"
|
||||
});
|
||||
break;
|
||||
case "large":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "1.72em"
|
||||
});
|
||||
break;
|
||||
default:
|
||||
case "medium":
|
||||
list.push({
|
||||
name: "font-size",
|
||||
value: "1.36em"
|
||||
})
|
||||
}
|
||||
switch (settings.dropShadow || "") {
|
||||
case "raised":
|
||||
list.push({
|
||||
name: "text-shadow",
|
||||
value: "-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black"
|
||||
});
|
||||
break;
|
||||
case "depressed":
|
||||
list.push({
|
||||
name: "text-shadow",
|
||||
value: "1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black"
|
||||
});
|
||||
break;
|
||||
case "uniform":
|
||||
list.push({
|
||||
name: "text-shadow",
|
||||
value: "-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000"
|
||||
});
|
||||
break;
|
||||
case "none":
|
||||
list.push({
|
||||
name: "text-shadow",
|
||||
value: "none"
|
||||
});
|
||||
break;
|
||||
default:
|
||||
case "dropshadow":
|
||||
list.push({
|
||||
name: "text-shadow",
|
||||
value: "#000000 0px 0px 7px"
|
||||
})
|
||||
}
|
||||
var background = settings.textBackground || "transparent";
|
||||
background && list.push({
|
||||
name: "background-color",
|
||||
value: background
|
||||
});
|
||||
var textColor = settings.textColor || "#ffffff";
|
||||
switch (textColor && list.push({
|
||||
name: "color",
|
||||
value: textColor
|
||||
}), settings.font || "") {
|
||||
case "typewriter":
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: '"Courier New",monospace'
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "none"
|
||||
});
|
||||
break;
|
||||
case "print":
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: "Georgia,Times New Roman,Arial,Helvetica,serif"
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "none"
|
||||
});
|
||||
break;
|
||||
case "console":
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: "Consolas,Lucida Console,Menlo,Monaco,monospace"
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "none"
|
||||
});
|
||||
break;
|
||||
case "cursive":
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: "Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif"
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "none"
|
||||
});
|
||||
break;
|
||||
case "casual":
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: "Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif"
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "none"
|
||||
});
|
||||
break;
|
||||
case "smallcaps":
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: "Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif"
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "small-caps"
|
||||
});
|
||||
break;
|
||||
default:
|
||||
list.push({
|
||||
name: "font-family",
|
||||
value: "inherit"
|
||||
}), list.push({
|
||||
name: "font-variant",
|
||||
value: "none"
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
||||
function getWindowStyles(settings) {
|
||||
return []
|
||||
}
|
||||
|
||||
function getStyles(settings, isCue) {
|
||||
return {
|
||||
text: getTextStyles(settings, isCue),
|
||||
window: getWindowStyles(settings)
|
||||
}
|
||||
}
|
||||
|
||||
function applyStyleList(styles, elem) {
|
||||
for (var i = 0, length = styles.length; i < length; i++) {
|
||||
var style = styles[i];
|
||||
elem.style[style.name] = style.value
|
||||
}
|
||||
}
|
||||
|
||||
function applyStyles(elements, appearanceSettings) {
|
||||
var styles = getStyles(appearanceSettings);
|
||||
elements.text && applyStyleList(styles.text, elements.text), elements.window && applyStyleList(styles.window, elements.window)
|
||||
}
|
||||
return {
|
||||
getStyles: getStyles,
|
||||
applyStyles: applyStyles
|
||||
}
|
||||
});
|
||||
100
src/bower_components/emby-webcomponents/subtitlesettings/subtitlesettings.js
vendored
Normal file
100
src/bower_components/emby-webcomponents/subtitlesettings/subtitlesettings.js
vendored
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
define(["require", "globalize", "appSettings", "apphost", "focusManager", "loading", "connectionManager", "subtitleAppearanceHelper", "dom", "events", "listViewStyle", "emby-select", "emby-input", "emby-checkbox", "flexStyles"], function(require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events) {
|
||||
"use strict";
|
||||
|
||||
function populateLanguages(select, languages) {
|
||||
var html = "";
|
||||
html += "<option value=''>" + globalize.translate("sharedcomponents#AnyLanguage") + "</option>";
|
||||
for (var i = 0, length = languages.length; i < length; i++) {
|
||||
var culture = languages[i];
|
||||
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>"
|
||||
}
|
||||
select.innerHTML = html
|
||||
}
|
||||
|
||||
function getSubtitleAppearanceObject(context) {
|
||||
var appearanceSettings = {};
|
||||
return appearanceSettings.textSize = context.querySelector("#selectTextSize").value, appearanceSettings.dropShadow = context.querySelector("#selectDropShadow").value, appearanceSettings.font = context.querySelector("#selectFont").value, appearanceSettings.textBackground = context.querySelector("#inputTextBackground").value, appearanceSettings.textColor = context.querySelector("#inputTextColor").value, appearanceSettings
|
||||
}
|
||||
|
||||
function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
|
||||
apiClient.getCultures().then(function(allCultures) {
|
||||
appHost.supports("subtitleburnsettings") && user.Policy.EnableVideoPlaybackTranscoding && context.querySelector(".fldBurnIn").classList.remove("hide");
|
||||
var selectSubtitleLanguage = context.querySelector("#selectSubtitleLanguage");
|
||||
populateLanguages(selectSubtitleLanguage, allCultures), selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || "", context.querySelector("#selectSubtitlePlaybackMode").value = user.Configuration.SubtitleMode || "", context.querySelector("#selectSubtitlePlaybackMode").dispatchEvent(new CustomEvent("change", {})), context.querySelector("#selectTextSize").value = appearanceSettings.textSize || "", context.querySelector("#selectDropShadow").value = appearanceSettings.dropShadow || "", context.querySelector("#inputTextBackground").value = appearanceSettings.textBackground || "transparent", context.querySelector("#inputTextColor").value = appearanceSettings.textColor || "#ffffff", context.querySelector("#selectFont").value = appearanceSettings.font || "", context.querySelector("#selectSubtitleBurnIn").value = appSettings.get("subtitleburnin") || "", onAppearanceFieldChange({
|
||||
target: context.querySelector("#selectTextSize")
|
||||
}), loading.hide()
|
||||
})
|
||||
}
|
||||
|
||||
function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
|
||||
var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
|
||||
return appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)), userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey), user.Configuration.SubtitleLanguagePreference = context.querySelector("#selectSubtitleLanguage").value, user.Configuration.SubtitleMode = context.querySelector("#selectSubtitlePlaybackMode").value, apiClient.updateUserConfiguration(user.Id, user.Configuration)
|
||||
}
|
||||
|
||||
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
|
||||
loading.show(), appSettings.set("subtitleburnin", context.querySelector("#selectSubtitleBurnIn").value), apiClient.getUser(userId).then(function(user) {
|
||||
saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function() {
|
||||
loading.hide(), enableSaveConfirmation && require(["toast"], function(toast) {
|
||||
toast(globalize.translate("sharedcomponents#SettingsSaved"))
|
||||
}), events.trigger(instance, "saved")
|
||||
}, function() {
|
||||
loading.hide()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
var self = this,
|
||||
apiClient = connectionManager.getApiClient(self.options.serverId),
|
||||
userId = self.options.userId,
|
||||
userSettings = self.options.userSettings;
|
||||
return userSettings.setUserInfo(userId, apiClient).then(function() {
|
||||
var enableSaveConfirmation = self.options.enableSaveConfirmation;
|
||||
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation)
|
||||
}), e && e.preventDefault(), !1
|
||||
}
|
||||
|
||||
function onSubtitleModeChange(e) {
|
||||
for (var view = dom.parentWithClass(e.target, "subtitlesettings"), subtitlesHelp = view.querySelectorAll(".subtitlesHelp"), i = 0, length = subtitlesHelp.length; i < length; i++) subtitlesHelp[i].classList.add("hide");
|
||||
view.querySelector(".subtitles" + this.value + "Help").classList.remove("hide")
|
||||
}
|
||||
|
||||
function onAppearanceFieldChange(e) {
|
||||
var view = dom.parentWithClass(e.target, "subtitlesettings"),
|
||||
appearanceSettings = getSubtitleAppearanceObject(view),
|
||||
elements = {
|
||||
window: view.querySelector(".subtitleappearance-preview-window"),
|
||||
text: view.querySelector(".subtitleappearance-preview-text")
|
||||
};
|
||||
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings)
|
||||
}
|
||||
|
||||
function embed(options, self) {
|
||||
require(["text!./subtitlesettings.template.html"], function(template) {
|
||||
options.element.classList.add("subtitlesettings"), options.element.innerHTML = globalize.translateDocument(template, "sharedcomponents"), options.element.querySelector("form").addEventListener("submit", onSubmit.bind(self)), options.element.querySelector("#selectSubtitlePlaybackMode").addEventListener("change", onSubtitleModeChange), options.element.querySelector("#selectTextSize").addEventListener("change", onAppearanceFieldChange), options.element.querySelector("#selectDropShadow").addEventListener("change", onAppearanceFieldChange), options.element.querySelector("#selectFont").addEventListener("change", onAppearanceFieldChange), options.element.querySelector("#inputTextColor").addEventListener("change", onAppearanceFieldChange), options.element.querySelector("#inputTextBackground").addEventListener("change", onAppearanceFieldChange), options.enableSaveButton && options.element.querySelector(".btnSave").classList.remove("hide"), appHost.supports("subtitleappearancesettings") && options.element.querySelector(".subtitleAppearanceSection").classList.remove("hide"), self.loadData(), options.autoFocus && focusManager.autoFocus(options.element)
|
||||
})
|
||||
}
|
||||
|
||||
function SubtitleSettings(options) {
|
||||
this.options = options, embed(options, this)
|
||||
}
|
||||
return SubtitleSettings.prototype.loadData = function() {
|
||||
var self = this,
|
||||
context = self.options.element;
|
||||
loading.show();
|
||||
var userId = self.options.userId,
|
||||
apiClient = connectionManager.getApiClient(self.options.serverId),
|
||||
userSettings = self.options.userSettings;
|
||||
apiClient.getUser(userId).then(function(user) {
|
||||
userSettings.setUserInfo(userId, apiClient).then(function() {
|
||||
self.dataLoaded = !0;
|
||||
var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
|
||||
loadForm(context, user, userSettings, appearanceSettings, apiClient)
|
||||
})
|
||||
})
|
||||
}, SubtitleSettings.prototype.submit = function() {
|
||||
onSubmit.call(this)
|
||||
}, SubtitleSettings.prototype.destroy = function() {
|
||||
this.options = null
|
||||
}, SubtitleSettings
|
||||
});
|
||||
94
src/bower_components/emby-webcomponents/subtitlesettings/subtitlesettings.template.html
vendored
Normal file
94
src/bower_components/emby-webcomponents/subtitlesettings/subtitlesettings.template.html
vendored
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<form style="margin:0 auto;">
|
||||
|
||||
<div class="verticalSection">
|
||||
|
||||
<h2 class="sectionTitle">
|
||||
${HeaderSubtitleSettings}
|
||||
</h2>
|
||||
|
||||
<div class="selectContainer">
|
||||
<select is="emby-select" id="selectSubtitleLanguage" label="${LabelPreferredSubtitleLanguage}"></select>
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<select is="emby-select" id="selectSubtitlePlaybackMode" label="${LabelSubtitlePlaybackMode}">
|
||||
<option value="Default">${Default}</option>
|
||||
<option value="Smart">${Smart}</option>
|
||||
<option value="OnlyForced">${OnlyForcedSubtitles}</option>
|
||||
<option value="Always">${AlwaysPlaySubtitles}</option>
|
||||
<option value="None">${NoSubtitles}</option>
|
||||
</select>
|
||||
<div class="fieldDescription subtitlesDefaultHelp subtitlesHelp hide">${DefaultSubtitlesHelp}</div>
|
||||
<div class="fieldDescription subtitlesSmartHelp subtitlesHelp hide">${SmartSubtitlesHelp}</div>
|
||||
<div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp hide">${AlwaysPlaySubtitlesHelp}</div>
|
||||
<div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp hide">${OnlyForcedSubtitlesHelp}</div>
|
||||
<div class="fieldDescription subtitlesNoneHelp subtitlesHelp hide">${NoSubtitlesHelp}</div>
|
||||
</div>
|
||||
<div class="selectContainer fldBurnIn hide">
|
||||
<select is="emby-select" id="selectSubtitleBurnIn" label="${LabelBurnSubtitles}">
|
||||
<option value="">${Auto}</option>
|
||||
<option value="onlyimageformats">${OnlyImageFormats}</option>
|
||||
<option value="allcomplexformats">${AllComplexFormats}</option>
|
||||
</select>
|
||||
<div class="fieldDescription">${BurnSubtitlesHelp}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verticalSection subtitleAppearanceSection hide">
|
||||
|
||||
<h2 class="sectionTitle">
|
||||
${HeaderSubtitleAppearance}
|
||||
</h2>
|
||||
|
||||
<div style="margin: 2em 0 2em;">
|
||||
<div class="subtitleappearance-preview flex align-items-center justify-content-center" style="border: 1px solid gray; color: black; background: #6A96BD; padding:1em;">
|
||||
<div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
|
||||
<div class="subtitleappearance-preview-text flex align-items-center justify-content-center">
|
||||
${TheseSettingsAffectSubtitlesOnThisDevice}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fieldDescription">${SubtitleAppearanceSettingsDisclaimer}</div>
|
||||
<div class="fieldDescription">${SubtitleAppearanceSettingsAlsoPassedToCastDevices}</div>
|
||||
</div>
|
||||
|
||||
<div class="selectContainer">
|
||||
<select is="emby-select" id="selectTextSize" label="${LabelTextSize}">
|
||||
<option value="smaller">${Smaller}</option>
|
||||
<option value="small">${Small}</option>
|
||||
<option value="">${Normal}</option>
|
||||
<option value="large">${Large}</option>
|
||||
<option value="larger">${Larger}</option>
|
||||
<option value="extralarge">${ExtraLarge}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<select is="emby-select" id="selectFont" label="${LabelFont}">
|
||||
<option value="">${Default}</option>
|
||||
<option value="typewriter">${Typewriter}</option>
|
||||
<option value="print">${Print}</option>
|
||||
<option value="console">${Console}</option>
|
||||
<option value="casual">${Casual}</option>
|
||||
<option value="smallcaps">${SmallCaps}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="inputContainer hide">
|
||||
<input is="emby-input" id="inputTextBackground" label="${LabelTextBackgroundColor}" type="text" />
|
||||
</div>
|
||||
<div class="inputContainer hide">
|
||||
<input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="text" />
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<select is="emby-select" id="selectDropShadow" label="${LabelDropShadow}">
|
||||
<option value="none">${None}</option>
|
||||
<option value="raised">${Raised}</option>
|
||||
<option value="depressed">${Depressed}</option>
|
||||
<option value="uniform">${Uniform}</option>
|
||||
<option value="">${DropShadow}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
|
||||
<span>${Save}</span>
|
||||
</button>
|
||||
</form>
|
||||
Loading…
Add table
Add a link
Reference in a new issue