mirror of
https://github.com/Findus23/RadioStats.git
synced 2024-09-19 16:03:48 +02:00
generate color server-side
This commit is contained in:
parent
2b5fb1a06e
commit
8b209db20e
4 changed files with 54 additions and 23 deletions
46
color.py
Normal file
46
color.py
Normal file
|
@ -0,0 +1,46 @@
|
|||
import json
|
||||
import sys
|
||||
import tempfile
|
||||
from pathlib import Path
|
||||
from subprocess import run
|
||||
|
||||
import requests
|
||||
import sentry_sdk
|
||||
|
||||
import config
|
||||
from models import *
|
||||
|
||||
|
||||
def to_rgb_string(r: float, g: float, b: float) -> str:
|
||||
r, g, b = map(int, [r, g, b])
|
||||
return "{0:02x}{1:02x}{2:02x}".format(r, g, b)
|
||||
|
||||
|
||||
colorjs = Path("./web/color.js")
|
||||
|
||||
if config.sentryDSN:
|
||||
client = sentry_sdk.init(dsn=config.sentryDSN)
|
||||
|
||||
if len(sys.argv) > 1:
|
||||
limit = int(sys.argv[1])
|
||||
else:
|
||||
limit = 50
|
||||
|
||||
query = Song.select().where((Song.show == 0) & (Song.image_large.is_null(False)) & (Song.background_color.is_null()))
|
||||
for song in query.limit(limit):
|
||||
url = song.image_large
|
||||
|
||||
r = requests.get(url)
|
||||
with tempfile.TemporaryDirectory() as tmpdirname:
|
||||
tmpdir = Path(tmpdirname)
|
||||
image = tmpdir / "image.jpg"
|
||||
with open(image, 'wb') as fd:
|
||||
for chunk in r.iter_content(chunk_size=128):
|
||||
fd.write(chunk)
|
||||
output = run(["node", colorjs, image], capture_output=True)
|
||||
data = json.loads(output.stdout)
|
||||
print(data)
|
||||
song.background_color = to_rgb_string(*data["LightVibrant"]["rgb"]) if "LightVibrant" in data else None
|
||||
song.alternative_color = to_rgb_string(*data["DarkVibrant"]["rgb"]) if "DarkVibrant" in data else None
|
||||
song.text_color = to_rgb_string(*data["DarkMuted"]["rgb"]) if "DarkMuted" in data else None
|
||||
song.save()
|
|
@ -21,6 +21,9 @@ class Song(BaseModel):
|
|||
spotify_url = CharField(null=True)
|
||||
image_small = CharField(null=True)
|
||||
image_large = CharField(null=True)
|
||||
background_color = CharField(null=True, max_length=6)
|
||||
alternative_color = CharField(null=True, max_length=6)
|
||||
text_color = CharField(null=True, max_length=6)
|
||||
|
||||
class Meta:
|
||||
indexes = ((("artist", "title"), True),)
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="detailView customRow" :style="{backgroundColor:palette.background,color:palette.text}">
|
||||
<div class="detailView customRow" :style="{backgroundColor:'#'+song.song.background_color,color:'#'+song.song.text_color}">
|
||||
<div>
|
||||
<img v-if="song.song.image_large" :src="song.song.image_large">
|
||||
<div v-else class="imgPlaceholder">
|
||||
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<audio v-if="song.song.preview_url" controls preload="none" :src="song.song.preview_url"></audio>
|
||||
<a v-if="song.song.spotify_url" :href="song.song.spotify_url" class="spotifyLink" target="_blank"
|
||||
rel="noopener" :style="{color: palette.alternative?palette.alternative:color.backgroundColor}">
|
||||
rel="noopener" :style="{color: '#'+song.song.alternative_color}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168">
|
||||
<path d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"></path>
|
||||
</svg>
|
||||
|
@ -32,7 +32,6 @@
|
|||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import "moment/locale/de-at";
|
||||
import * as Vibrant from 'node-vibrant';
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
axios.defaults.headers.common['X-Requested-With'] = "XMLHttpRequest";
|
||||
|
@ -45,7 +44,6 @@
|
|||
data() {
|
||||
return {
|
||||
plays: [],
|
||||
palette: {text: "", background: "", alternative: ""}
|
||||
};
|
||||
},
|
||||
props: ['songs', 'color', 'momentDate', 'dateType'],
|
||||
|
@ -56,25 +54,6 @@
|
|||
methods: {
|
||||
getPlays: function() {
|
||||
let vm = this;
|
||||
if (this.song.song.image_small) {
|
||||
let v = Vibrant.from(this.song.song.image_small);
|
||||
v.getPalette((err, palette) => {
|
||||
if (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
console.log('%c LightVibrant', 'background: ' + palette.LightVibrant.getHex());
|
||||
console.log('%c Vibrant', 'background: ' + palette.Vibrant.getHex());
|
||||
console.log('%c DarkVibrant', 'background: ' + palette.DarkVibrant.getHex());
|
||||
console.log('%c LightMuted', 'background: ' + palette.LightMuted.getHex());
|
||||
console.log('%c Muted', 'background: ' + palette.Muted.getHex());
|
||||
console.log('%c DarkMuted', 'background: ' + palette.DarkMuted.getHex());
|
||||
vm.palette = {
|
||||
background: palette.LightVibrant? palette.LightVibrant.getHex() : "",
|
||||
alternative: palette.DarkVibrant ? palette.DarkVibrant.getHex() : "",
|
||||
text: palette.DarkMuted ? palette.DarkMuted.getHex() : ""
|
||||
};
|
||||
});
|
||||
}
|
||||
this.plays = [];
|
||||
axios.get(baseURL + this.$route.params.channel + "/plays/" + this.$route.params.songId, {
|
||||
params: {
|
||||
|
|
3
web/color.js
Normal file
3
web/color.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
let Vibrant = require('node-vibrant');
|
||||
|
||||
Vibrant.from(process.argv[2]).getPalette((err, palette) => console.log(JSON.stringify(palette)));
|
Loading…
Reference in a new issue