option to use gradient backgrounds

This commit is contained in:
j 2025-02-15 00:24:00 +01:00
commit c7ce34b0da
8 changed files with 214 additions and 1 deletions

View file

@ -6,6 +6,12 @@
--title: rgb(240, 240, 240);
}
html, body {
overscroll-behavior: none;
background-color: var(--bg);
}
@font-face {
font-family: "wrong font";
src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff");

View file

@ -190,6 +190,15 @@ async function loadEdit(id, args) {
previous = annotation
})
}
if (window.useHue && data.edit.clips && data.edit.clips.length) {
const color1 = data.edit.clips[0].hue
const color2 = data.edit.clips[parseInt(data.edit.clips.length/2)].hue
const color3 = data.edit.clips[data.edit.clips.length-1].hue
document.documentElement.style.setProperty('--color1', `hsl(${color1}, 100%, 15%, 0.8)`);
document.documentElement.style.setProperty('--color2', `hsl(${color2}, 60%, 15%, 0.8)`);
document.documentElement.style.setProperty('--color3', `hsl(${color3}, 60%, 15%, 0.8)`);
}
var value = []
pandora.layerKeys.forEach(layer => {
if (!data.layers[layer]) {

View file

@ -14,6 +14,7 @@ async function loadData(id, args) {
"date",
"source",
"summary",
"hue",
"streams",
"duration",
"durations",
@ -30,6 +31,8 @@ async function loadData(id, args) {
}
}
data.item = response['data']
if (data.item.rightslevel > pandora.site.capabilities.canPlayClips['guest']) {
return {
site: data.site,
@ -79,6 +82,35 @@ async function loadData(id, args) {
data['in'] = data.annotation['in']
data.out = data.annotation['out']
}
if (window.useHue) {
var clips = await pandoraAPI('findClips', {
"query": {
"conditions": [
{"key": "out", "value": data["in"], "operator": ">"},
{"key": "in", "value": data["out"], "operator": "<"},
]
},
"itemsQuery": {
"conditions": [{"key": "id", "value": data.id.split('/')[0], "operator": "=="}]
},
"keys":["id", "in", "out", "hue"],
"range": [0, 5000],
"sort": [
{"key": "in", "operator": "+"},
{"key": "out", "operator": "+"},
]
})
clips = clips.data?.items
if (clips && clips.length) {
const color1 = clips[0].hue
const color2 = clips[parseInt(clips.length/2)].hue
const color3 = clips[clips.length-1].hue
document.documentElement.style.setProperty('--color1', `hsl(${color1}, 100%, 15%, 0.8)`);
document.documentElement.style.setProperty('--color2', `hsl(${color2}, 60%, 15%, 0.8)`);
document.documentElement.style.setProperty('--color3', `hsl(${color3}, 60%, 15%, 0.8)`);
}
}
data.layers = {}