soop-avatar 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -0
- package/dist/client/.vite/manifest.json +12 -0
- package/dist/client/favicon.ico +0 -0
- package/dist/client/index.html +1 -0
- package/dist/client/soop-avatar.css +2 -0
- package/dist/client/soop-avatar.es.js +1982 -0
- package/dist/client/soop-avatar.iife.js +1 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# soop-avatar
|
|
2
|
+
|
|
3
|
+
SOOP 사용자 ID 목록을 기반으로 프로필 이미지와 방송 상태를 표시하는 SolidJS 브라우저 라이브러리입니다.
|
|
4
|
+
|
|
5
|
+
Tampermonkey userscript 또는 일반 웹 애플리케이션에서 사용할 수 있습니다.
|
|
6
|
+
|
|
7
|
+
## 주요 기능
|
|
8
|
+
|
|
9
|
+
- SOOP 사용자 프로필 이미지 표시
|
|
10
|
+
- 방송 중인 사용자의 상태 표시
|
|
11
|
+
- 방송 미리보기 표시
|
|
12
|
+
- 표시할 아바타 수 제한
|
|
13
|
+
- 나머지 사용자 목록 펼치기
|
|
14
|
+
- 실행 중인 아바타 목록 동적 갱신
|
|
15
|
+
- 라이브러리 인스턴스 제거 및 리소스 정리
|
|
16
|
+
|
|
17
|
+
## 요구 사항
|
|
18
|
+
|
|
19
|
+
- 브라우저 환경
|
|
20
|
+
- `fetch` 지원
|
|
21
|
+
- SOOP API 및 이미지 서버에 대한 네트워크 접근
|
|
22
|
+
- Tampermonkey 사용 시 대상 페이지와 SOOP 서버 간 CORS 정책 확인 필요
|
|
23
|
+
|
|
24
|
+
## Tampermonkey 사용
|
|
25
|
+
|
|
26
|
+
npm 패키지를 CDN으로 제공한 뒤 userscript의 `@require`로 불러옵니다.
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
// ==UserScript==
|
|
30
|
+
// @name SOOP Avatar
|
|
31
|
+
// @match https://example.com/*
|
|
32
|
+
// @require https://cdn.jsdelivr.net/npm/soop-avatar@0.0.1/dist/client/soop-avatar.iife.js
|
|
33
|
+
// @grant none
|
|
34
|
+
// ==/UserScript==
|
|
35
|
+
|
|
36
|
+
(() => {
|
|
37
|
+
const target = document.createElement("div");
|
|
38
|
+
document.body.appendChild(target);
|
|
39
|
+
|
|
40
|
+
const avatars = SoopAvatar.mount({
|
|
41
|
+
target,
|
|
42
|
+
userIds: ["mawang0216", "lilpa0309", "b13246"],
|
|
43
|
+
visibleCount: 4,
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// 사용자 목록 갱신
|
|
47
|
+
// avatars.update({
|
|
48
|
+
// userIds: ["tjrdbs999", "b13246"],
|
|
49
|
+
// });
|
|
50
|
+
|
|
51
|
+
// 표시 개수 갱신
|
|
52
|
+
// avatars.update({
|
|
53
|
+
// visibleCount: 2,
|
|
54
|
+
// });
|
|
55
|
+
|
|
56
|
+
// 사용이 끝난 경우 제거
|
|
57
|
+
// avatars.destroy();
|
|
58
|
+
})();
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"style.css": {
|
|
3
|
+
"file": "soop-avatar.css",
|
|
4
|
+
"src": "style.css"
|
|
5
|
+
},
|
|
6
|
+
"virtual:solid-ssr-entry-client.tsx": {
|
|
7
|
+
"file": "soop-avatar.es.js",
|
|
8
|
+
"name": "virtual_solid-ssr-entry-client",
|
|
9
|
+
"src": "virtual:solid-ssr-entry-client.tsx",
|
|
10
|
+
"isEntry": true
|
|
11
|
+
}
|
|
12
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Solid App</title><script type="module" src="/soop-avatar.es.js"></script></head><body></body></html>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
body{margin:0;font-family:system-ui,-apple-system,sans-serif}.avatar-preview-anchor{border-radius:50%;place-items:center;width:40px;height:40px;display:grid;position:relative}.avatar-preview-anchor.avatar-live{box-sizing:border-box;background:linear-gradient(113.84deg,#0082ff 5.63%,#0a96ff 44.46%,#05bcff 57.4%,#00f0ff 75.9%,#04f0fc 78.67%,#10f1f5 81.44%,#24f4e8 84.22%,#40f7d7 87.92%,#64fbc1 90.69%,#82ffb0 92.54%);padding:2px}.avatar{object-fit:cover;border-radius:50%;width:36px;height:36px;display:block}.avatar-offline .avatar{filter:grayscale()}.avatar-preview{z-index:30;box-sizing:border-box;opacity:1;pointer-events:none;width:100%;max-width:none;height:auto;transition:opacity .15s,transform .15s;position:absolute;inset:auto 0 calc(100% + .75rem);transform:translateY(0)}.avatar-list .avatar-preview{aspect-ratio:16/9;object-fit:cover;height:auto}.avatar-preview-anchor:hover,.avatar-preview-anchor:focus-within{transition:transform .15s;transform:scale(1.08)}.avatar-list{position:relative}.avatar-stack{align-items:center;width:100%;min-height:40px;display:flex}.avatar-stack-item{flex:0 0 40px;height:40px;margin-right:-12px;transition:transform .15s;position:static}.avatar-stack-item:hover,.avatar-stack-item:focus-within{z-index:10}.avatar-more{z-index:11;color:#fff;cursor:pointer;width:40px;height:40px;font:inherit;background:#282c34;border:1px solid #fff9;border-radius:50%;flex:0 0 40px;margin-left:8px;font-size:.85rem;transition:background-color .15s,transform .15s;position:relative}.avatar-more:hover,.avatar-more:focus-visible{background:#3c4350;transform:translateY(-2px)}.avatar-more:focus-visible{outline-offset:3px;outline:2px solid #82ffb0}.avatar-overflow{z-index:20;box-sizing:border-box;background:#20242b;border:1px solid #fff3;border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:12px;width:100%;max-height:200px;padding:12px;display:grid;position:absolute;top:52px;left:0;overflow:hidden auto}.avatar-overflow-item{place-items:center;width:100%;height:40px;display:grid;position:static}.avatar-overflow-item:hover,.avatar-overflow-item:focus-within{z-index:2}.header{color:#fff;text-align:center;background-color:#282c34;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-size:calc(10px + 2vmin);display:flex}.logo{pointer-events:none;height:40vmin;animation:20s linear infinite logo-spin}.increment{cursor:pointer;padding:.5rem 1.5rem;font-size:1rem}.link{color:#93c5fd;text-underline-offset:.2em;margin-top:1rem;font-weight:600;text-decoration-color:#38bdf8;text-decoration-thickness:.1em;transition:color .15s}.link:hover{color:#dbeafe}.link:focus-visible{outline-offset:4px;border-radius:.2rem;outline:3px solid #38bdf8}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
|
2
|
+
/*$vite$:1*/
|