Skip to content

Commit

Permalink
Feat/cleanup (#1083)
Browse files Browse the repository at this point in the history
  • Loading branch information
Excellify authored Oct 1, 2024
1 parent f61fef9 commit acf6dff
Show file tree
Hide file tree
Showing 17 changed files with 248 additions and 251 deletions.
9 changes: 7 additions & 2 deletions CHANGELOG-nightly.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
### 3.1.2.1000

- Implement support for the new Kick site

- **Implement support for the new Kick site:**
- Chat emotes
- Emote menu
- Emote auto-completion
- Cosmetics
- 7TV settings
- Added option to settings to hide Stories from the sidebar
- Fixed settings to hide recommended channels and viewers also watch channels
- Fixed an issue where history navigation is accidentally triggered during IME composition
- Added option to highlight messages of specific usernames
- Added option to highlight messages based on badges
- Added button to user card to toggle highlighting for a users messages
- Added mod icon for warning users to chat mod icons and user card
- Added an option to limit the drop shadows on paints

### 3.1.1.3000

Expand Down
16 changes: 12 additions & 4 deletions src/app/chat/UserTag.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,15 @@
type="twitch"
@click="handleClick($event)"
/>
<Badge v-for="badge of activeBadges" :key="badge.id" :badge="badge" :alt="badge.data.tooltip" type="app" />
<template v-if="shouldRender7tvBadges">
<Badge
v-for="badge of activeBadges"
:key="badge.id"
:badge="badge"
:alt="badge.data.tooltip"
type="app"
/>
</template>
</span>
<!-- Message Author -->
Expand All @@ -31,7 +39,7 @@
class="seventv-chat-user-username"
@click="handleClick($event)"
>
<span v-cosmetic-paint="paint ? paint.id : null">
<span v-cosmetic-paint="shouldRenderPaint && paint ? paint.id : null">
<span v-if="asMention">@</span>
<span>{{ user.displayName }}</span>
<span v-if="user.intl"> ({{ user.username }})</span>
Expand Down Expand Up @@ -146,8 +154,8 @@ const stop = watch(
return;
}
paint.value = shouldRenderPaint.value && paints && paints.size ? paints.values().next().value : null;
activeBadges.value = shouldRender7tvBadges.value && badges && badges.size ? [...badges.values()] : [];
paint.value = paints && paints.size ? paints.values().next().value : null;
activeBadges.value = badges && badges.size ? [...badges.values()] : [];
},
{ immediate: true },
);
Expand Down
10 changes: 10 additions & 0 deletions src/assets/style/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,13 @@ body[theme="light"] {
-webkit-background-clip: text !important;
font-weight: 700;
}

:root.seventv-alternating-chat-lines {
.seventv-chat-observer > div:nth-child(even) {
background-color: var(--seventv-chat-alternate-background-color);
}

.seventv-chat-list .seventv-message:nth-child(even) {
background-color: var(--seventv-chat-alternate-background-color);
}
}
25 changes: 18 additions & 7 deletions src/composable/useCosmetics.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Ref, reactive, ref, toRef } from "vue";
import { Ref, reactive, ref, toRef, watch } from "vue";
import { until, useTimeout } from "@vueuse/core";
import { DecimalToStringRGBA } from "@/common/Color";
import { log } from "@/common/Logger";
Expand All @@ -24,7 +24,13 @@ const data = reactive({

staticallyAssigned: {} as Record<string, Record<string, never> | undefined>,
});
const dropShadowRender = useConfig("vanity.paints_drop_shadows");
const dropShadowRender = useConfig<0 | 1 | 2>("vanity.paints_drop_shadows");

watch(dropShadowRender, () =>
Object.values(data.cosmetics)
.filter((c) => c.kind === "PAINT")
.forEach((c) => updatePaintStyle(c as SevenTV.Cosmetic<"PAINT">)),
);

class CosmeticMap<T extends SevenTV.CosmeticKind> extends Map<string, SevenTV.Cosmetic<T>> {
private providers = new Set<SevenTV.Provider>();
Expand Down Expand Up @@ -63,16 +69,18 @@ db.ready().then(async () => {
useLiveQuery(
() => db.cosmetics.toArray(),
(result) => {
data.cosmetics = {};
const temp = {} as typeof data.cosmetics;

for (const cos of result) {
if (data.cosmetics[cos.id]) continue;
data.cosmetics[cos.id] = reactive(cos);
if (temp[cos.id]) continue;
temp[cos.id] = reactive(cos);

if (cos.kind === "PAINT") {
updatePaintStyle(cos as SevenTV.Cosmetic<"PAINT">);
}
}

data.cosmetics = temp;
},
);

Expand Down Expand Up @@ -386,11 +394,14 @@ export function updatePaintStyle(paint: SevenTV.Cosmetic<"PAINT">, remove = fals

const gradients = paint.data.gradients.map((g) => createGradientFromPaint(g));
const filter = (() => {
if (!paint.data.shadows || dropShadowRender.value === false) {
if (!paint.data.shadows || dropShadowRender.value == 0) {
return "";
}

return paint.data.shadows.map((v) => createFilterDropshadow(v)).join(" ");
return paint.data.shadows
.slice(0, dropShadowRender.value == 2 ? 1 : undefined)
.map((v) => createFilterDropshadow(v))
.join(" ");
})();

const selector = `.seventv-paint[data-seventv-paint-id="${paint.id}"]`;
Expand Down
25 changes: 20 additions & 5 deletions src/directive/TextPaintDirective.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,26 @@ export const TextPaintDirective = {
},
} as Directive<HTMLElement, string | null>;

export function updateElementStyles(el: HTMLElement, paintID: string | null): void {
if (!paintID || (el.hasAttribute(ATTR_SEVENTV_PAINT_ID) && el.getAttribute(ATTR_SEVENTV_PAINT_ID) !== paintID)) {
el.style.backgroundImage = "";
el.style.filter = "";
el.style.color = "";
type PaintedElement = HTMLElement & {
__seventv_backup_style?: { backgroundImage: string; filter: string; color: string };
};
export function updateElementStyles(el: PaintedElement, paintID: string | null): void {
const hasPaint = el.hasAttribute(ATTR_SEVENTV_PAINT_ID);
const newPaint = hasPaint && paintID !== el.getAttribute(ATTR_SEVENTV_PAINT_ID);

if (!hasPaint) {
el.__seventv_backup_style = {
backgroundImage: el.style.backgroundImage,
filter: el.style.filter,
color: el.style.color,
};
}

if (hasPaint && newPaint) {
const backup = el.__seventv_backup_style;
el.style.backgroundImage = backup?.backgroundImage ?? "";
el.style.filter = backup?.filter ?? "";
el.style.color = backup?.color ?? "";

el.classList.remove("seventv-painted-content");
el.removeAttribute(ATTR_SEVENTV_TEXT);
Expand Down
2 changes: 1 addition & 1 deletion src/site/global/Changelog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ function updateMediaHref(value: string): string {
display: grid;
row-gap: 0.5rem;
list-style: square;
margin: 0.25rem 0.5rem;
margin: 0.5rem 1rem;
}
:deep(li) {
Expand Down
26 changes: 11 additions & 15 deletions src/site/global/Global.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<Tooltip />
<FloatContext />
<Transition name="settings-menu" appear>
<SettingsMenu v-if="settingsMenuCtx.open" />
</Transition>
</template>

<script setup lang="ts">
Expand All @@ -9,24 +12,17 @@ import { useConfig, useSettings } from "@/composable/useSettings";
import useUpdater from "@/composable/useUpdater";
import { useWorker } from "@/composable/useWorker";
import FloatContext from "./FloatContext.vue";
import { dataSettings, globalSettings } from "./GlobalSettings";
import Tooltip from "./Tooltip.vue";
import { useSettingsMenu } from "@/app/settings/Settings";
import SettingsMenu from "@/app/settings/SettingsMenu.vue";
const settingsMenuCtx = useSettingsMenu();
const { register } = useSettings();
register([
{
key: "app.version",
type: "NONE",
label: "App Version",
defaultValue: void 0 as never,
},
{
key: "app.7tv.token",
type: "NONE",
label: "7TV Bearer Token",
expires: 0,
defaultValue: "",
},
]);
register(dataSettings);
register(globalSettings);
const updater = useUpdater();
const version = useConfig("app.version");
Expand Down
141 changes: 141 additions & 0 deletions src/site/global/GlobalSettings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import { declareConfig, useConfig } from "@/composable/useSettings";

export const dataSettings = [
declareConfig("app.version", "NONE", {
label: "App Version",
defaultValue: void 0 as never,
}),
declareConfig("app.7tv.token", "NONE", {
label: "7TV Bearer Token",
defaultValue: "",
serialize: false,
}),
declareConfig("ui.emote_menu.favorites", "NONE", {
label: "Emote menu favourites",
defaultValue: new Set(),
}),
declareConfig("ui.emote_menu.usage", "NONE", {
label: "Emote menu usage",
defaultValue: new Set(),
serialize: false,
}),
declareConfig("ui.emote_menu.collapsed_sets", "NONE", {
label: "Emote menu collapsed sets",
defaultValue: new Set(),
serialize: false,
}),
];

export const globalSettings = [
declareConfig("ui.transparent_backgrounds", "TOGGLE", {
path: ["Appearance", "Interface"],
label: "Use UI transparency",
hint: "If checked some backgrounds will be transparent and blurred. This may affect performance",
effect(v) {
document.documentElement.classList.toggle("seventv-transparent", v);
document.body.classList.toggle("seventv-transparent", v);
},
defaultValue: true,
}),
declareConfig("chat.alternating_background", "TOGGLE", {
label: "settings.chat_alternating_background.label",
hint: "settings.chat_alternating_background.hint",
path: ["Chat", ""],
defaultValue: false,
effect(v) {
document.documentElement.classList.toggle("seventv-alternating-chat-lines", v);
},
}),
declareConfig<string>("chat.alternating_background_color", "COLOR", {
path: ["Chat", "Style"],
label: "Alternating Background Color",
hint: "Configure the color of alternating background (~6% opacity)",
disabledIf: () => !useConfig("chat.alternating_background").value,
effect(v) {
document.documentElement.style.setProperty("--seventv-chat-alternate-background-color", `${v}0f`);
},
defaultValue: "#808080",
}),
declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
path: ["General", ""],
label: "Hide Unlisted Emotes",
hint: "If checked, emotes which have not yet been approved for listing on 7tv.app will be blurred",
defaultValue: false,
}),
declareConfig<number>("chat.emote_margin", "SLIDER", {
path: ["Chat", "Style"],
label: "Emote Spacing",
hint: "Choose the margin around emotes in chat. Negative values lets them overlap and keep the chatlines inline. 0 Makes the emotes not overlap at all",
options: {
min: -1,
max: 1,
step: 0.1,
unit: "rem",
},
defaultValue: -0.5,
effect(v) {
document.documentElement.style.setProperty("--seventv-emote-margin", `${v}rem`);
},
}),
declareConfig<number>("chat.emote_scale", "SLIDER", {
path: ["Chat", "Style"],
label: "Emote Scale",
ffz_key: "chat.emotes.2x",
ffz_transform(v: unknown) {
return typeof v === "number" && v > 0 ? 2 : 1;
},
hint: "Change how large emotes should be in chat, as a multiple of their original size.",
options: {
min: 0.25,
max: 3,
step: 0.25,
unit: "x",
},
defaultValue: 1,
}),
declareConfig("ui.emote_menu.default_tab", "DROPDOWN", {
path: ["Appearance", "Interface"],
label: "Emote Menu: Default Emote Tab",
hint: "Select default tab when opening emote menu",
options: [
["Favorite", "FAVORITE"],
["7TV", "7TV"],
["FFZ", "FFZ"],
["BTTV", "BTTV"],
["Platform", "PLATFORM"],
["Emoji", "EMOJI"],
],
defaultValue: "7TV",
}),
declareConfig<boolean>("ui.emote_menu.most_used", "TOGGLE", {
path: ["Appearance", "Interface"],
label: "Emote Menu: Most Used Emotes",
hint: "Whether or not to display the emotes you type the most in the emote menu (Temporarily disabled due to performance issues)",
disabledIf: () => true,
defaultValue: true,
}),
declareConfig<boolean>("vanity.nametag_paints", "TOGGLE", {
path: ["Appearance", "Vanity"],
label: "Nametag Paints",
hint: "Whether or not to display nametag paints",
defaultValue: true,
}),
declareConfig<boolean>("vanity.7tv_Badges", "TOGGLE", {
path: ["Appearance", "Vanity"],
label: "7TV Badges",
hint: "Whether or not to display 7TV Badges",
defaultValue: true,
}),
declareConfig<number>("vanity.paints_drop_shadows", "DROPDOWN", {
path: ["Appearance", "Vanity"],
label: "Drop shadows on paints",
options: [
["None", 0],
["One", 2],
["All", 1],
],
hint: "Wheather or not to display drop shadows on paints (Requires a refresh)",
disabledIf: () => !useConfig("vanity.nametag_paints").value,
defaultValue: 1,
}),
];
Loading

0 comments on commit acf6dff

Please sign in to comment.