mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Simplify channels and add electron
This commit is contained in:
35
.github/workflows/ci.yml
vendored
35
.github/workflows/ci.yml
vendored
@@ -18,6 +18,41 @@ jobs:
|
||||
- name: Build and test
|
||||
run: mvn -B verify
|
||||
|
||||
electron-build:
|
||||
name: Electron packages (${{ matrix.os }})
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
matrix:
|
||||
include:
|
||||
- os: ubuntu-latest
|
||||
build-command: npm run dist:linux
|
||||
artifact-name: electron-linux
|
||||
- os: windows-latest
|
||||
build-command: npm run dist:win
|
||||
artifact-name: electron-windows
|
||||
- os: macos-latest
|
||||
build-command: npm run dist:mac
|
||||
artifact-name: electron-macos
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
cache-dependency-path: src/main/node/package-lock.json
|
||||
- name: Install dependencies
|
||||
working-directory: src/main/node
|
||||
run: npm ci
|
||||
- name: Build Electron bundles
|
||||
working-directory: src/main/node
|
||||
run: ${{ matrix.build-command }}
|
||||
- name: Upload Electron artifacts
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: ${{ matrix.artifact-name }}
|
||||
path: src/main/node/dist/**
|
||||
|
||||
docker:
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -9,3 +9,5 @@ local/
|
||||
*.db-shm
|
||||
*.db-wal
|
||||
previews/
|
||||
node_modules/
|
||||
src/main/node/dist/
|
||||
|
||||
4097
src/main/node/package-lock.json
generated
Normal file
4097
src/main/node/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
src/main/node/package.json
Normal file
40
src/main/node/package.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "imgfloat-electron",
|
||||
"version": "0.0.1",
|
||||
"description": "Electron wrapper for the Imgfloat overlay",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"dist:linux": "electron-builder --linux AppImage",
|
||||
"dist:win": "electron-builder --win nsis",
|
||||
"dist:mac": "electron-builder --mac"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.imgfloat.overlay",
|
||||
"productName": "Imgfloat",
|
||||
"files": [
|
||||
"app.js"
|
||||
],
|
||||
"asar": false,
|
||||
"directories": {
|
||||
"output": "dist"
|
||||
},
|
||||
"linux": {
|
||||
"target": [
|
||||
"AppImage"
|
||||
],
|
||||
"category": "Utility"
|
||||
},
|
||||
"win": {
|
||||
"target": [
|
||||
"nsis"
|
||||
]
|
||||
},
|
||||
"mac": {
|
||||
"category": "public.app-category.productivity"
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^30.0.6",
|
||||
"electron-builder": "^24.13.3"
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,73 @@ body {
|
||||
padding: 40px 20px 64px;
|
||||
}
|
||||
|
||||
.channels-body {
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.16), transparent 30%),
|
||||
radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.18), transparent 28%),
|
||||
#0f172a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: clamp(24px, 4vw, 48px);
|
||||
}
|
||||
|
||||
.channels-shell {
|
||||
width: min(760px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.channels-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cta-row.compact {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.channels-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.channel-card {
|
||||
width: 100%;
|
||||
background: rgba(11, 18, 32, 0.95);
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 16px;
|
||||
padding: clamp(20px, 3vw, 32px);
|
||||
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.channel-card h1 {
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
|
||||
.channel-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.channels-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #1f2937;
|
||||
background: rgba(11, 18, 32, 0.9);
|
||||
}
|
||||
|
||||
.landing-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<title>Browse channels - Imgfloat</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
</head>
|
||||
<body class="landing-body">
|
||||
<div class="landing">
|
||||
<header class="landing-header">
|
||||
<body class="channels-body">
|
||||
<div class="channels-shell">
|
||||
<header class="channels-header">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
@@ -15,50 +15,21 @@
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-row">
|
||||
<a class="button ghost" href="/">Home</a>
|
||||
<a class="button" href="/oauth2/authorization/twitch">Login</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="hero hero-compact">
|
||||
<div class="hero-text">
|
||||
<p class="eyebrow">Broadcast views</p>
|
||||
<h1>Open a public channel overlay.</h1>
|
||||
<p class="lead">Search any broadcaster with published overlays and jump straight to their on-stream view without logging in.</p>
|
||||
<ul class="pill-list minimal">
|
||||
<li>Autocomplete from all published overlays</li>
|
||||
<li>Direct broadcast view links</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hero-panel search-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow subtle">Search</p>
|
||||
<h3>Find a broadcaster</h3>
|
||||
</div>
|
||||
<span class="badge">Live</span>
|
||||
</div>
|
||||
<p class="muted">Type a channel name to get autocomplete suggestions and open the broadcast overlay.</p>
|
||||
<form id="channel-search-form" class="search-form">
|
||||
<label class="sr-only" for="channel-search">Search by broadcaster</label>
|
||||
<div class="search-row">
|
||||
<input id="channel-search" name="channel" class="text-input" type="text" list="channel-suggestions" placeholder="Search broadcaster..." autocomplete="off" />
|
||||
<datalist id="channel-suggestions"></datalist>
|
||||
<button type="submit" class="button secondary">Open</button>
|
||||
</div>
|
||||
<p class="muted tiny">Autocomplete shows all broadcasters with published overlays.</p>
|
||||
<main class="channels-main">
|
||||
<section class="channel-card">
|
||||
<p class="eyebrow subtle">Broadcast overlay</p>
|
||||
<h1>Open a channel</h1>
|
||||
<p class="muted">Type the channel name to jump straight to their overlay.</p>
|
||||
<form id="channel-search-form" class="channel-form">
|
||||
<label class="sr-only" for="channel-search">Channel name</label>
|
||||
<input id="channel-search" name="channel" class="text-input" type="text" list="channel-suggestions" placeholder="Type a channel name" autocomplete="off" />
|
||||
<datalist id="channel-suggestions"></datalist>
|
||||
<button type="submit" class="button block">Open overlay</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="landing-footer compact">
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="muted">Ready when you go live.</div>
|
||||
</div>
|
||||
<a class="button ghost" href="/oauth2/authorization/twitch">Login</a>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="/js/landing.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user