jabroni-outfit 1.4.9 → 1.6.5

package/src/ui/default-scheme.ts

@@ -1,38 +1,89 @@
-import type { Scheme } from "./types";
-
-export const DefaultScheme: Scheme = {
-  excludeFilter: [
-    { type: "checkbox", model: "state.filterExclude", label: "exclude" },
-    { type: "text", model: "state.filterExcludeWords", placeholder: "word, word1|word2, f:full_word..." }
-  ],
-  includeFilter: [
-    { type: "checkbox", model: "state.filterInclude", label: "include" },
-    { type: "text", model: "state.filterIncludeWords", placeholder: "word, word1|word2, f:full_word..." }
-  ],
-  infiniteScroll: [
-    { type: "checkbox", model: "state.infiniteScrollEnabled", label: "infinite scroll" },
-    {
-      type: "span", innerText:
-        "return `${stateLocale.pagIndexCur}/${stateLocale.pagIndexLast}`", "v-if": "return stateLocale.pagIndexLast > 1"
-    }
-  ],
-  durationFilter: [
-    { type: "checkbox", model: "state.filterDuration", label: "duration" },
-    { type: "number", model: "state.filterDurationFrom", step: "10", min: "0", max: "72000", labelBefore: "from" },
-    { type: "number", model: "state.filterDurationTo", step: "10", min: "0", max: "72000", labelBefore: "to" }
-  ],
-}
-
-export const extendDefaultScheme = (newScheme: Scheme) =>
-  Object.entries(DefaultScheme).reduce((acc, [k, v], i) => {
-    if (i === 2) Object.assign(acc, newScheme);
-    Object.assign(acc, { [k]: v });
-    return acc;
-  }, {});
-
-export const defaultSchemeWithPrivateFilter = extendDefaultScheme({
-  privateFilter: [
-    { type: "checkbox", model: "state.filterPrivate", label: "private" },
-    { type: "checkbox", model: "state.filterPublic", label: "public" }
-  ]
-});
+import type { Scheme } from "./types";
+
+export const DefaultScheme: Scheme = {
+  excludeFilter: [
+    { type: "checkbox", model: "state.filterExclude", label: "exclude" },
+    { type: "text", model: "state.filterExcludeWords", placeholder: "word, word1|word2, f:full_word..." }
+  ],
+  includeFilter: [
+    { type: "checkbox", model: "state.filterInclude", label: "include" },
+    { type: "text", model: "state.filterIncludeWords", placeholder: "word, word1|word2, f:full_word..." }
+  ],
+  infiniteScroll: [
+    { type: "checkbox", model: "state.infiniteScrollEnabled", label: "infinite scroll" },
+    {
+      type: "span", innerText:
+        "return `${localState.pagIndexCur}/${localState.pagIndexLast}`", "v-if": "return localState.pagIndexLast > 1"
+    }
+  ],
+  durationFilter: [
+    { type: "checkbox", model: "state.filterDuration", label: "duration" },
+    { type: "number", model: "state.filterDurationFrom", step: "10", min: "0", max: "72000", labelBefore: "from" },
+    { type: "number", model: "state.filterDurationTo", step: "10", min: "0", max: "72000", labelBefore: "to" }
+  ],
+}
+
+export const customScheme: Scheme = {
+  sortFilter: [
+    {
+      type: "span", innerText: 'sort by:'
+    },
+    {
+      type: 'button',
+      innerText: 'views',
+      callback: () => {
+        //@ts-ignore
+        window.sortByViews?.();
+      },
+    },
+    {
+      type: 'button',
+      innerText: 'duration',
+      callback: () => {
+        //@ts-ignore
+        window.sortByDuration?.();
+      },
+    }],
+
+  privacyFilter: [
+    { type: "checkbox", model: "state.filterPrivate", label: "private" },
+    { type: "checkbox", model: "state.filterPublic", label: "public" }
+  ],
+
+  privacyAccess: [
+    { type: "checkbox", model: "state.autoRequestAccess", label: "auto friend request" },
+    {
+      type: 'button',
+      innerText: 'check access 🔓',
+      callback: () => {
+        //@ts-ignore
+        window.requestAccess?.();
+      }
+    }
+  ],
+
+  hdFilter: [
+    { type: "checkbox", model: "state.filterHD", label: "HD" },
+  ]
+}
+
+export const extendScheme = (scheme: Scheme, newScheme: Scheme) =>
+  Object.entries(scheme).reduce((acc, [k, v], i) => {
+    if (i === 2) Object.assign(acc, newScheme);
+    Object.assign(acc, { [k]: v });
+    return acc;
+  }, {});
+
+export const defaultSchemeWithPrivacyFilter = extendScheme(DefaultScheme, {
+  privacyFilter: customScheme.privacyFilter,
+  privacyAccess: customScheme.privacyAccess
+});
+
+export const defaultSchemeWithPrivacyFilterWithHD = extendScheme(defaultSchemeWithPrivacyFilter, {
+  hdFilter: customScheme.hdFilter
+});
+
+export const defaultSchemeWithPrivacyFilterWithHDwithSort = extendScheme(defaultSchemeWithPrivacyFilterWithHD, {
+  sortFilter: customScheme.sortFilter
+});
+

package/src/ui/index.ts

@@ -1,29 +1,31 @@
-import { createApp } from "vue";
-import { DefaultScheme } from "./default-scheme";
-import type { Scheme, UIPosition } from "./types";
-import type { JabroniOutfitStore } from "../store/store";
-import App from "./vue-templates/App.vue"
-import { parseDom } from "billy-herrington-utils";
-
-export class JabroniOutfitUI {
-  private getRoot(rootSelector: string | undefined) {
-    let root: string | undefined = rootSelector;
-    if (!root) {
-      const rootEl = parseDom('<div id="tapermonkey-app" style="position: relative; z-index: 999999;"></div>');
-      document.body.appendChild(rootEl);
-      root = "#tapermonkey-app";
-    }
-    document.querySelector(root)?.classList.add('taper-class');
-    return root;
-  }
-
-  constructor(
-    { state, stateLocale }: JabroniOutfitStore,
-    scheme: Scheme = DefaultScheme,
-    rootSelector?: string,
-    position: UIPosition = { fixed: true, right: true, bottom: true }
-  ) {
-    const app = createApp(App, { state, stateLocale, scheme, position });
-    app.mount(this.getRoot(rootSelector));
-  }
-}
+import { createApp } from "vue";
+import { DefaultScheme } from "./default-scheme";
+import type { Scheme, UIPosition } from "./types";
+import type { JabroniOutfitStore } from "../store/store";
+import App from "./vue-templates/App.vue"
+import { parseDom } from "billy-herrington-utils";
+
+const DEFAULT_ROOT = 'jabroni-outfit-root';
+
+export class JabroniOutfitUI {
+  public app: ReturnType<typeof createApp>;
+
+  private getRoot(rootSelector: string) {
+    if (rootSelector === DEFAULT_ROOT) {
+      const rootEl = parseDom(`<div id="${rootSelector}" style="position: relative; z-index: 999999;"></div>`);
+      document.body.appendChild(rootEl);
+    }
+    document.getElementById(rootSelector)?.classList.add('taper-class');
+    return `#${rootSelector}`;
+  }
+
+  constructor(
+    { state, localState }: JabroniOutfitStore,
+    scheme: Scheme = DefaultScheme,
+    rootSelector = DEFAULT_ROOT,
+    position: UIPosition = { fixed: true, right: true, bottom: true }
+  ) {
+    this.app = createApp(App, { state, localState, scheme, position });
+    this.app.mount(this.getRoot(rootSelector));
+  }
+}

package/src/ui/types.ts

@@ -1,27 +1,27 @@
-export interface SchemeRowEl {
-  type: 'checkbox' | 'text' | 'number' | 'span' | 'button';
-  model?: string,
-  label?: string,
-  labelBefore?: string,
-  innerText?: string,
-  max?: string,
-  min?: string,
-  step?: string,
-  "v-if"?: string,
-  placeholder?: string
-  callback?: () => void
-}
-
-export type SchemeRow = SchemeRowEl[];
-
-export interface Scheme {
-  [key: string]: SchemeRow
-}
-
-export interface UIPosition {
-  fixed: boolean,
-  left?: boolean,
-  right?: boolean,
-  top?: boolean,
-  bottom?: boolean
-}
+export interface SchemeRowEl {
+  type: 'checkbox' | 'text' | 'number' | 'span' | 'button';
+  model?: string,
+  label?: string,
+  labelBefore?: string,
+  innerText?: string,
+  max?: string,
+  min?: string,
+  step?: string,
+  "v-if"?: string,
+  placeholder?: string
+  callback?: () => void
+}
+
+export type SchemeRow = SchemeRowEl[];
+
+export interface Scheme {
+  [key: string]: SchemeRow
+}
+
+export interface UIPosition {
+  fixed: boolean,
+  left?: boolean,
+  right?: boolean,
+  top?: boolean,
+  bottom?: boolean
+}

package/src/ui/vue-templates/App.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import Config from './icons/Config.vue';
-import Close from './icons/Close.vue';
-import Gen from './Gen.vue';
-import type { Scheme, UIPosition } from '../types';
-import type { Reactive } from 'vue';
-import type { RecordV } from '../../store/types';
-
-const { state, stateLocale, scheme, position } = defineProps<{
-  state: Reactive<RecordV>,
-  stateLocale: Reactive<RecordV>,
-  scheme?: Scheme,
-  position: UIPosition
-}>();
-
-const optClasses = {
-  fixed: 'fixed',
-  right: 'right-0',
-  left: 'left-0',
-  top: 'top-0',
-  bottom: 'bottom-0'
-}
-
-const pos = Object.entries(position).filter(([_, v]) => v)
-  .map(([k, _]) => optClasses[k]).join(' ');
-
-</script>
-<template>
-  <div class="z-9999 rounded bg-zinc-800 max-w-full p-2 m-2"
-    :class="`${state.hidden ? 'hover:bg-gray-600' : ''} ${pos}`" v-if="state.uiEnabled">
-
-    <div class="flex items-center cursor-pointer py-1 px-2 m-1 rounded"
-      :class="!state.hidden ? 'hover:bg-zinc-900' : ''" @click="state.hidden = !state.hidden">
-      <span class="m-auto flex mono">
-        <span v-if="state.hidden && stateLocale.pagIndexLast as number > 1"
-          class="px-3 py-2 mr-2 bg-gray-700 text-zinc-300 font-mono rounded ">
-          {{ stateLocale.pagIndexCur }}/{{ stateLocale.pagIndexLast }}
-        </span>
-        <Config v-if="state.hidden" />
-        <Close v-if="!state.hidden" />
-      </span>
-    </div>
-
-    <Gen :scheme="scheme" :stateLocale="stateLocale" :state="state" v-if="!state.hidden" />
-  </div>
-</template>
-
+<script setup lang="ts">
+import Config from './icons/Config.vue';
+import Close from './icons/Close.vue';
+import Gen from './Gen.vue';
+import type { Scheme, UIPosition } from '../types';
+import type { Reactive } from 'vue';
+import type { RecordV } from '../../store/types';
+
+const { state, localState, scheme, position } = defineProps<{
+  state: Reactive<RecordV>,
+  localState: Reactive<RecordV>,
+  scheme?: Scheme,
+  position: UIPosition
+}>();
+
+const optClasses = {
+  fixed: 'fixed',
+  right: 'right-0',
+  left: 'left-0',
+  top: 'top-0',
+  bottom: 'bottom-0'
+}
+
+const pos = Object.entries(position).filter(([_, v]) => v)
+  .map(([k, _]) => optClasses[k]).join(' ');
+
+</script>
+<template>
+  <div class="z-9999 rounded bg-zinc-800 max-w-full p-2 m-2"
+    :class="`${state.hidden ? 'hover:bg-gray-600' : ''} ${pos}`" v-if="state.uiEnabled">
+
+    <div class="flex items-center cursor-pointer py-1 px-2 m-1 rounded"
+      :class="!state.hidden ? 'hover:bg-zinc-900' : ''" @click="state.hidden = !state.hidden">
+      <span class="m-auto flex mono">
+        <span v-if="state.hidden && localState.pagIndexLast as number > 1"
+          class="px-3 py-2 mr-2 bg-gray-700 text-zinc-300 font-mono rounded">
+          {{ localState.pagIndexCur }}/{{ localState.pagIndexLast }}
+        </span>
+        <Config v-if="state.hidden" />
+        <Close v-if="!state.hidden" />
+      </span>
+    </div>
+
+    <Gen :scheme="scheme" :localState="localState" :state="state" v-if="!state.hidden" />
+  </div>
+</template>
+
 <style scoped></style>

package/src/ui/vue-templates/Gen.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-import type { Reactive } from "vue";
-import type { RecordV } from "../../store/types";
-import type { Scheme } from "../types";
-import RowElement from './RowElement.vue'
-
-const { scheme, state, stateLocale } = defineProps<{
-  state: Reactive<RecordV>,
-  stateLocale: Reactive<RecordV>,
-  scheme?: Scheme
-}>()
-
-const rows = Object.values(scheme as Scheme);
-
-</script>
-
-<template>
-  <div v-for="row in rows" class="flex items-center bg-zinc-900 py-2 px-2 m-1 font-mono rounded">
-    <RowElement v-for="r in row" :element="r" :stateLocale="stateLocale" :state="state" />
-  </div>
+<script setup lang="ts">
+import type { Reactive } from "vue";
+import type { RecordV } from "../../store/types";
+import type { Scheme } from "../types";
+import RowElement from './RowElement.vue'
+
+const { scheme, state, localState } = defineProps<{
+  state: Reactive<RecordV>,
+  localState: Reactive<RecordV>,
+  scheme?: Scheme
+}>()
+
+const rows = Object.values(scheme as Scheme);
+
+</script>
+
+<template>
+  <div v-for="row in rows" class="flex items-center bg-zinc-900 py-2 px-2 m-1 font-mono rounded">
+    <RowElement v-for="r in row" :element="r" :localState="localState" :state="state" />
+  </div>
 </template>

package/src/ui/vue-templates/RowElement.vue

@@ -1,65 +1,66 @@
-<script setup lang="ts">
-import { computed, type Reactive } from "vue";
-import type { RecordV } from "../../store/types";
-import type { SchemeRowEl } from "../types";
-
-const props = defineProps<{
-  element?: SchemeRowEl,
-  state: Reactive<RecordV>,
-  stateLocale: Reactive<RecordV>,
-}>();
-
-const { element, state, stateLocale } = props;
-
-const { type, model, innerText, label, labelBefore, callback, ...rest } = element as SchemeRowEl;
-
-const isInput = /checkbox|text|number/.test(type);
-const tag = isInput ? 'input' : type;
-const ctype = isInput ? type : "";
-const id = isInput ? model : (Math.random() * 10000000 | 0).toString(16);
-
-const componentStyles = {
-  text: "w-full h-8 text-zinc-300 px-3 py-2 mx-2 rounded-sm bg-zinc-700 outline-none focus:outline-gray-600 hover:bg-zinc-600",
-  checkbox: "mx-2 size-auto invert checked:invert-0 accent-gray-700",
-  number: "w-24 h-8 text-zinc-300 rounded px-3 py-2 bg-gray-700 hover:bg-gray-600 outline-none focus:outline-gray-600",
-  button: "mx-2 size-auto text-zinc-300 rounded px-3 py-2 bg-gray-700 hover:bg-gray-600 ml-auto",
-  span: "text-zinc-300 ml-auto mr-4",
-}
-
-const innerTextValue = computed(() => {
-  if (!innerText?.includes('return')) return innerText || "";
-  const f = new Function('state', 'stateLocale', `${innerText}`);
-  return f(state, stateLocale);
-});
-
-const value = new Function('state', 'stateLocale', `return ${model || ""}`)(state, stateLocale);
-const updateValue = ({ target: { checked, value } }) => {
-  if (!model?.startsWith("state")) return;
-  const [stateName, stateProp] = model.split('.');
-  const val = type === 'checkbox' ? checked : value;
-  props[stateName][stateProp] = val;
-};
-
-const vif = computed(() => {
-  if (!element?.['v-if']) return true;
-  const f = new Function('state', 'stateLocale', `${element['v-if']}`);
-  return f(state, stateLocale);
-});
-
-// button state
-// let callbackWrap: () => Promise<void> | undefined;
-// if (callback) {
-//   callbackWrap = async () => {
-//     callback();
-//   }
-// }
-
-</script>
-<template>
-  <label v-if="labelBefore" :for="id" class="text-zinc-300 mx-2 font-mono">{{ labelBefore }}</label>
-  <component v-if="vif" :id="id" :is="tag" :type="ctype" :class="componentStyles[type]" :checked="!!value"
-    :value="value" v-on:change="updateValue" v-on:input="updateValue" @click="callback" v-bind="rest">
-    {{ innerTextValue }}
-  </component>
-  <label v-if="label" :for="id" class="text-zinc-300 flex font-mono">{{ label }}</label>
+<script setup lang="ts">
+import { computed, type Reactive } from "vue";
+import type { RecordV } from "../../store/types";
+import type { SchemeRowEl } from "../types";
+
+const props = defineProps<{
+  element?: SchemeRowEl,
+  state: Reactive<RecordV>,
+  localState: Reactive<RecordV>,
+}>();
+
+const { element, state, localState } = props;
+
+const { type, model, innerText, label, labelBefore, callback, ...rest } = element as SchemeRowEl;
+
+const isInput = /checkbox|text|number/.test(type);
+const tag = isInput ? 'input' : type;
+const ctype = isInput ? type : "";
+const id = isInput ? model : (Math.random() * 10000000 | 0).toString(16);
+
+const componentStyles = {
+  text: "w-full h-8 text-zinc-300 px-3 py-2 mx-2 rounded-sm bg-zinc-700 outline-none focus:outline-gray-600 hover:bg-zinc-600",
+  checkbox: "mx-2 size-auto invert checked:invert-0 accent-gray-700",
+  number: "w-24 h-8 text-zinc-300 rounded px-3 py-2 bg-gray-700 hover:bg-gray-600 outline-none focus:outline-gray-600",
+  button: "mx-2 size-auto text-zinc-300 rounded px-3 py-2 bg-gray-700 hover:bg-gray-600 ml-auto",
+  span: "text-zinc-300 ml-auto mr-4",
+}
+
+const innerTextValue = computed(() => {
+  if (!innerText?.includes('return')) return innerText || "";
+  const f = new Function('state', 'localState', `${innerText}`);
+  return f(state, localState);
+});
+
+const value = new Function('state', 'localState', `return ${model || ""}`)(state, localState);
+
+const updateValue = ({ target: { checked, value } }) => {
+  if (!(typeof model === 'string') || !/^state|localState/.test(model)) return;
+  const [stateName, stateProp] = (model).split('.');
+  const val = type === 'checkbox' ? checked : value;
+  props[stateName][stateProp] = val;
+};
+
+const vif = computed(() => {
+  if (!element?.['v-if']) return true;
+  const f = new Function('state', 'localState', `${element['v-if']}`);
+  return f(state, localState);
+});
+
+// button state
+// let callbackWrap: () => Promise<void> | undefined;
+// if (callback) {
+//   callbackWrap = async () => {
+//     callback();
+//   }
+// }
+
+</script>
+<template>
+  <label v-if="labelBefore" :for="id" class="text-zinc-300 mx-2 font-mono">{{ labelBefore }}</label>
+  <component v-if="vif" :id="id" :is="tag" :type="ctype" :class="componentStyles[type]" :checked="!!value"
+    :value="value" v-on:change="updateValue" v-on:input="updateValue" @click="callback" v-bind="rest">
+    {{ innerTextValue }}
+  </component>
+  <label v-if="label" :for="id" class="text-zinc-300 flex font-mono">{{ label }}</label>
 </template>

package/src/ui/vue-templates/icons/Close.vue

@@ -1,7 +1,7 @@
-<template>
-  <svg class="h-7 w-7 fill-gray-600 stroke-gray-400" xmlns="http://www.w3.org/2000/svg"
-          fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round"
-            d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-        </svg>
+<template>
+  <svg class="h-7 w-7 fill-gray-600 stroke-gray-400" xmlns="http://www.w3.org/2000/svg"
+          fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round"
+            d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+        </svg>
 </template>

package/src/ui/vue-templates/icons/Config.vue

@@ -1,7 +1,7 @@
-<template>
-  <svg class="h-7 w-7 fill-gray-600 stroke-gray-400" xmlns="http://www.w3.org/2000/svg"
-          fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round"
-            d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
-        </svg>
+<template>
+  <svg class="h-7 w-7 fill-gray-600 stroke-gray-400" xmlns="http://www.w3.org/2000/svg"
+          fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round"
+            d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
+        </svg>
 </template>