mirror of
https://github.com/svemagie/indiekit-endpoint-youtube.git
synced 2026-04-02 15:54:59 +02:00
Initial commit: YouTube channel endpoint for Indiekit
Features: - Display latest videos from any YouTube channel - Live streaming status with animated badge - Upcoming stream detection - Admin dashboard with video grid - Public JSON API for Eleventy integration - Quota-efficient API usage (playlist method) - Smart caching (5min videos, 1min live status) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
.env
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
191
README.md
Normal file
191
README.md
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
# @rmdes/indiekit-endpoint-youtube
|
||||||
|
|
||||||
|
[](https://www.npmjs.com/package/@rmdes/indiekit-endpoint-youtube)
|
||||||
|
[](https://opensource.org/licenses/MIT)
|
||||||
|
|
||||||
|
YouTube channel endpoint for [Indiekit](https://getindiekit.com/).
|
||||||
|
|
||||||
|
Display latest videos and live streaming status from any YouTube channel on your IndieWeb site.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
Install from npm:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install @rmdes/indiekit-endpoint-youtube
|
||||||
|
```
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Admin Dashboard** - Overview of channel with latest videos in Indiekit's admin UI
|
||||||
|
- **Live Status** - Shows when channel is live streaming (with animated badge)
|
||||||
|
- **Upcoming Streams** - Display scheduled upcoming live streams
|
||||||
|
- **Latest Videos** - Grid of recent uploads with thumbnails, duration, view counts
|
||||||
|
- **Public JSON API** - For integration with static site generators like Eleventy
|
||||||
|
- **Quota Efficient** - Uses YouTube API efficiently (playlist method vs search)
|
||||||
|
- **Smart Caching** - Respects API rate limits while staying current
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Add to your `indiekit.config.js`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import YouTubeEndpoint from "@rmdes/indiekit-endpoint-youtube";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
plugins: [
|
||||||
|
new YouTubeEndpoint({
|
||||||
|
mountPath: "/youtube",
|
||||||
|
apiKey: process.env.YOUTUBE_API_KEY,
|
||||||
|
channelId: process.env.YOUTUBE_CHANNEL_ID,
|
||||||
|
// OR use channel handle instead:
|
||||||
|
// channelHandle: "@YourChannel",
|
||||||
|
cacheTtl: 300_000, // 5 minutes
|
||||||
|
liveCacheTtl: 60_000, // 1 minute for live status
|
||||||
|
limits: {
|
||||||
|
videos: 10,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
| Variable | Required | Description |
|
||||||
|
|----------|----------|-------------|
|
||||||
|
| `YOUTUBE_API_KEY` | Yes | YouTube Data API v3 key |
|
||||||
|
| `YOUTUBE_CHANNEL_ID` | Yes* | Channel ID (starts with `UC...`) |
|
||||||
|
| `YOUTUBE_CHANNEL_HANDLE` | Yes* | Channel handle (e.g., `@YourChannel`) |
|
||||||
|
|
||||||
|
*Either `channelId` or `channelHandle` is required.
|
||||||
|
|
||||||
|
### Getting a YouTube API Key
|
||||||
|
|
||||||
|
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
|
||||||
|
2. Create a new project or select an existing one
|
||||||
|
3. Enable the "YouTube Data API v3"
|
||||||
|
4. Go to Credentials > Create Credentials > API Key
|
||||||
|
5. (Optional) Restrict the key to YouTube Data API only
|
||||||
|
|
||||||
|
### Finding Your Channel ID
|
||||||
|
|
||||||
|
- Go to your YouTube channel
|
||||||
|
- The URL will be `youtube.com/channel/UC...` - the `UC...` part is your channel ID
|
||||||
|
- Or use a tool like [Comment Picker](https://commentpicker.com/youtube-channel-id.php)
|
||||||
|
|
||||||
|
## Routes
|
||||||
|
|
||||||
|
### Admin Routes (require authentication)
|
||||||
|
|
||||||
|
| Route | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| `GET /youtube/` | Dashboard with channel info, live status, latest videos |
|
||||||
|
| `POST /youtube/refresh` | Clear cache and refresh data |
|
||||||
|
|
||||||
|
### Public API Routes (JSON)
|
||||||
|
|
||||||
|
| Route | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| `GET /youtube/api/videos` | Latest videos (supports `?limit=N`) |
|
||||||
|
| `GET /youtube/api/channel` | Channel information |
|
||||||
|
| `GET /youtube/api/live` | Live streaming status |
|
||||||
|
|
||||||
|
### Example: Eleventy Integration
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// _data/youtube.js
|
||||||
|
import EleventyFetch from "@11ty/eleventy-fetch";
|
||||||
|
|
||||||
|
export default async function() {
|
||||||
|
const baseUrl = process.env.SITE_URL || "https://example.com";
|
||||||
|
|
||||||
|
const [channel, videos, live] = await Promise.all([
|
||||||
|
EleventyFetch(`${baseUrl}/youtube/api/channel`, { duration: "15m", type: "json" }),
|
||||||
|
EleventyFetch(`${baseUrl}/youtube/api/videos?limit=6`, { duration: "5m", type: "json" }),
|
||||||
|
EleventyFetch(`${baseUrl}/youtube/api/live`, { duration: "1m", type: "json" }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
channel: channel.channel,
|
||||||
|
videos: videos.videos,
|
||||||
|
isLive: live.isLive,
|
||||||
|
liveStream: live.stream,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Response Examples
|
||||||
|
|
||||||
|
### GET /youtube/api/live
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"isLive": true,
|
||||||
|
"isUpcoming": false,
|
||||||
|
"stream": {
|
||||||
|
"videoId": "abc123",
|
||||||
|
"title": "Live Stream Title",
|
||||||
|
"thumbnail": "https://i.ytimg.com/vi/abc123/mqdefault.jpg",
|
||||||
|
"url": "https://www.youtube.com/watch?v=abc123"
|
||||||
|
},
|
||||||
|
"cached": true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### GET /youtube/api/videos
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"videos": [
|
||||||
|
{
|
||||||
|
"id": "abc123",
|
||||||
|
"title": "Video Title",
|
||||||
|
"thumbnail": "https://i.ytimg.com/vi/abc123/mqdefault.jpg",
|
||||||
|
"duration": 3661,
|
||||||
|
"durationFormatted": "1:01:01",
|
||||||
|
"viewCount": 12345,
|
||||||
|
"publishedAt": "2024-01-15T10:00:00Z",
|
||||||
|
"url": "https://www.youtube.com/watch?v=abc123",
|
||||||
|
"isLive": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"count": 10,
|
||||||
|
"cached": true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Options
|
||||||
|
|
||||||
|
| Option | Default | Description |
|
||||||
|
|--------|---------|-------------|
|
||||||
|
| `mountPath` | `/youtube` | URL path for the endpoint |
|
||||||
|
| `apiKey` | - | YouTube Data API key |
|
||||||
|
| `channelId` | - | Channel ID (UC...) |
|
||||||
|
| `channelHandle` | - | Channel handle (@...) |
|
||||||
|
| `cacheTtl` | `300000` | Cache TTL in ms (5 min) |
|
||||||
|
| `liveCacheTtl` | `60000` | Live status cache TTL in ms (1 min) |
|
||||||
|
| `limits.videos` | `10` | Number of videos to fetch |
|
||||||
|
|
||||||
|
## Quota Efficiency
|
||||||
|
|
||||||
|
YouTube Data API has a daily quota (10,000 units by default). This plugin is optimized:
|
||||||
|
|
||||||
|
| Operation | Quota Cost | Method |
|
||||||
|
|-----------|------------|--------|
|
||||||
|
| Get videos | 2 units | Uses uploads playlist (not search) |
|
||||||
|
| Get channel | 1 unit | Cached for 24 hours |
|
||||||
|
| Check live status | 2 units | Checks recent videos (efficient) |
|
||||||
|
| Full live search | 100 units | Only when explicitly requested |
|
||||||
|
|
||||||
|
With default settings (5-min cache), you'll use ~600 units/day for video checks.
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
- Indiekit >= 1.0.0-beta.25
|
||||||
|
- YouTube Data API v3 enabled
|
||||||
|
- Valid API key with YouTube Data API access
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
135
includes/@indiekit-endpoint-youtube-widget.njk
Normal file
135
includes/@indiekit-endpoint-youtube-widget.njk
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
{#
|
||||||
|
YouTube Widget - Embeddable component showing latest video and live status
|
||||||
|
|
||||||
|
Usage in your templates:
|
||||||
|
{% include "@indiekit-endpoint-youtube-widget.njk" %}
|
||||||
|
|
||||||
|
Requires youtube data to be fetched and passed to the template context
|
||||||
|
#}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.youtube-widget {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--color-offset, #f5f5f5);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
.youtube-widget__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.youtube-widget__title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.youtube-widget__live {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.125rem 0.5rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: 0.625rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.youtube-widget__live--on {
|
||||||
|
background: #ff0000;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.youtube-widget__live--off {
|
||||||
|
background: #e5e5e5;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.youtube-widget__live-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
.youtube-widget__video {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
.youtube-widget__thumb {
|
||||||
|
width: 120px;
|
||||||
|
height: 68px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.youtube-widget__info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.youtube-widget__video-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 0 0.25rem 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.youtube-widget__video-title a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.youtube-widget__video-title a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.youtube-widget__meta {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--color-text-secondary, #666);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="youtube-widget">
|
||||||
|
<div class="youtube-widget__header">
|
||||||
|
<h3 class="youtube-widget__title">YouTube</h3>
|
||||||
|
{% if youtube.isLive %}
|
||||||
|
<span class="youtube-widget__live youtube-widget__live--on">
|
||||||
|
<span class="youtube-widget__live-dot"></span>
|
||||||
|
Live
|
||||||
|
</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="youtube-widget__live youtube-widget__live--off">
|
||||||
|
Offline
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if youtube.liveStream %}
|
||||||
|
<div class="youtube-widget__video">
|
||||||
|
<img src="{{ youtube.liveStream.thumbnail }}" alt="" class="youtube-widget__thumb">
|
||||||
|
<div class="youtube-widget__info">
|
||||||
|
<h4 class="youtube-widget__video-title">
|
||||||
|
<a href="{{ youtube.liveStream.url }}" target="_blank" rel="noopener">
|
||||||
|
{{ youtube.liveStream.title }}
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
<p class="youtube-widget__meta">🔴 Streaming now</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% elif youtube.videos and youtube.videos[0] %}
|
||||||
|
{% set video = youtube.videos[0] %}
|
||||||
|
<div class="youtube-widget__video">
|
||||||
|
<img src="{{ video.thumbnail }}" alt="" class="youtube-widget__thumb">
|
||||||
|
<div class="youtube-widget__info">
|
||||||
|
<h4 class="youtube-widget__video-title">
|
||||||
|
<a href="{{ video.url }}" target="_blank" rel="noopener">
|
||||||
|
{{ video.title }}
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
<p class="youtube-widget__meta">
|
||||||
|
{{ video.viewCount | localeNumber }} views
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="youtube-widget__meta">No videos available</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
88
index.js
Normal file
88
index.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import express from "express";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
import path from "node:path";
|
||||||
|
|
||||||
|
import { dashboardController } from "./lib/controllers/dashboard.js";
|
||||||
|
import { videosController } from "./lib/controllers/videos.js";
|
||||||
|
import { channelController } from "./lib/controllers/channel.js";
|
||||||
|
import { liveController } from "./lib/controllers/live.js";
|
||||||
|
|
||||||
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
|
const protectedRouter = express.Router();
|
||||||
|
const publicRouter = express.Router();
|
||||||
|
|
||||||
|
const defaults = {
|
||||||
|
mountPath: "/youtube",
|
||||||
|
apiKey: process.env.YOUTUBE_API_KEY,
|
||||||
|
channelId: process.env.YOUTUBE_CHANNEL_ID,
|
||||||
|
channelHandle: process.env.YOUTUBE_CHANNEL_HANDLE,
|
||||||
|
cacheTtl: 300_000, // 5 minutes
|
||||||
|
liveCacheTtl: 60_000, // 1 minute for live status
|
||||||
|
limits: {
|
||||||
|
videos: 10,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class YouTubeEndpoint {
|
||||||
|
name = "YouTube channel endpoint";
|
||||||
|
|
||||||
|
constructor(options = {}) {
|
||||||
|
this.options = { ...defaults, ...options };
|
||||||
|
this.mountPath = this.options.mountPath;
|
||||||
|
}
|
||||||
|
|
||||||
|
get environment() {
|
||||||
|
return ["YOUTUBE_API_KEY", "YOUTUBE_CHANNEL_ID", "YOUTUBE_CHANNEL_HANDLE"];
|
||||||
|
}
|
||||||
|
|
||||||
|
get localesDirectory() {
|
||||||
|
return path.join(__dirname, "locales");
|
||||||
|
}
|
||||||
|
|
||||||
|
get navigationItems() {
|
||||||
|
return {
|
||||||
|
href: this.options.mountPath,
|
||||||
|
text: "youtube.title",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
get shortcutItems() {
|
||||||
|
return {
|
||||||
|
url: this.options.mountPath,
|
||||||
|
name: "youtube.videos",
|
||||||
|
iconName: "syndicate",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Protected routes (require authentication)
|
||||||
|
* Admin dashboard
|
||||||
|
*/
|
||||||
|
get routes() {
|
||||||
|
protectedRouter.get("/", dashboardController.get);
|
||||||
|
protectedRouter.post("/refresh", dashboardController.refresh);
|
||||||
|
|
||||||
|
return protectedRouter;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public routes (no authentication required)
|
||||||
|
* JSON API endpoints for Eleventy frontend
|
||||||
|
*/
|
||||||
|
get routesPublic() {
|
||||||
|
publicRouter.get("/api/videos", videosController.api);
|
||||||
|
publicRouter.get("/api/channel", channelController.api);
|
||||||
|
publicRouter.get("/api/live", liveController.api);
|
||||||
|
|
||||||
|
return publicRouter;
|
||||||
|
}
|
||||||
|
|
||||||
|
init(Indiekit) {
|
||||||
|
Indiekit.addEndpoint(this);
|
||||||
|
|
||||||
|
// Store YouTube config in application for controller access
|
||||||
|
Indiekit.config.application.youtubeConfig = this.options;
|
||||||
|
Indiekit.config.application.youtubeEndpoint = this.mountPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
43
lib/controllers/channel.js
Normal file
43
lib/controllers/channel.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { YouTubeClient } from "../youtube-client.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Channel controller
|
||||||
|
*/
|
||||||
|
export const channelController = {
|
||||||
|
/**
|
||||||
|
* Get channel info (JSON API)
|
||||||
|
* @type {import("express").RequestHandler}
|
||||||
|
*/
|
||||||
|
async api(request, response) {
|
||||||
|
try {
|
||||||
|
const { youtubeConfig } = request.app.locals.application;
|
||||||
|
|
||||||
|
if (!youtubeConfig) {
|
||||||
|
return response.status(500).json({ error: "Not configured" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { apiKey, channelId, channelHandle, cacheTtl } = youtubeConfig;
|
||||||
|
|
||||||
|
if (!apiKey || (!channelId && !channelHandle)) {
|
||||||
|
return response.status(500).json({ error: "Invalid configuration" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new YouTubeClient({
|
||||||
|
apiKey,
|
||||||
|
channelId,
|
||||||
|
channelHandle,
|
||||||
|
cacheTtl,
|
||||||
|
});
|
||||||
|
|
||||||
|
const channel = await client.getChannelInfo();
|
||||||
|
|
||||||
|
response.json({
|
||||||
|
channel,
|
||||||
|
cached: true,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[YouTube] Channel API error:", error);
|
||||||
|
response.status(500).json({ error: error.message });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
120
lib/controllers/dashboard.js
Normal file
120
lib/controllers/dashboard.js
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import { YouTubeClient } from "../youtube-client.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dashboard controller
|
||||||
|
*/
|
||||||
|
export const dashboardController = {
|
||||||
|
/**
|
||||||
|
* Render dashboard page
|
||||||
|
* @type {import("express").RequestHandler}
|
||||||
|
*/
|
||||||
|
async get(request, response, next) {
|
||||||
|
try {
|
||||||
|
const { youtubeConfig, youtubeEndpoint } = request.app.locals.application;
|
||||||
|
|
||||||
|
if (!youtubeConfig) {
|
||||||
|
return response.status(500).render("youtube", {
|
||||||
|
title: "YouTube",
|
||||||
|
error: { message: "YouTube endpoint not configured" },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const { apiKey, channelId, channelHandle, cacheTtl, limits } = youtubeConfig;
|
||||||
|
|
||||||
|
if (!apiKey) {
|
||||||
|
return response.render("youtube", {
|
||||||
|
title: response.locals.__("youtube.title"),
|
||||||
|
error: { message: response.locals.__("youtube.error.noApiKey") },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!channelId && !channelHandle) {
|
||||||
|
return response.render("youtube", {
|
||||||
|
title: response.locals.__("youtube.title"),
|
||||||
|
error: { message: response.locals.__("youtube.error.noChannel") },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new YouTubeClient({
|
||||||
|
apiKey,
|
||||||
|
channelId,
|
||||||
|
channelHandle,
|
||||||
|
cacheTtl,
|
||||||
|
});
|
||||||
|
|
||||||
|
let channel = null;
|
||||||
|
let videos = [];
|
||||||
|
let liveStatus = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
[channel, videos, liveStatus] = await Promise.all([
|
||||||
|
client.getChannelInfo(),
|
||||||
|
client.getLatestVideos(limits?.videos || 6),
|
||||||
|
client.getLiveStatusEfficient(),
|
||||||
|
]);
|
||||||
|
} catch (apiError) {
|
||||||
|
console.error("[YouTube] API error:", apiError.message);
|
||||||
|
return response.render("youtube", {
|
||||||
|
title: response.locals.__("youtube.title"),
|
||||||
|
error: { message: response.locals.__("youtube.error.connection") },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Determine public frontend URL
|
||||||
|
const publicUrl = youtubeEndpoint
|
||||||
|
? youtubeEndpoint.replace(/api$/, "")
|
||||||
|
: "/youtube";
|
||||||
|
|
||||||
|
response.render("youtube", {
|
||||||
|
title: response.locals.__("youtube.title"),
|
||||||
|
channel,
|
||||||
|
videos: videos.slice(0, limits?.videos || 6),
|
||||||
|
liveStatus,
|
||||||
|
isLive: liveStatus?.isLive || false,
|
||||||
|
isUpcoming: liveStatus?.isUpcoming || false,
|
||||||
|
publicUrl,
|
||||||
|
mountPath: request.baseUrl,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[YouTube] Dashboard error:", error);
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trigger manual cache refresh
|
||||||
|
* @type {import("express").RequestHandler}
|
||||||
|
*/
|
||||||
|
async refresh(request, response) {
|
||||||
|
try {
|
||||||
|
const { youtubeConfig } = request.app.locals.application;
|
||||||
|
|
||||||
|
if (!youtubeConfig) {
|
||||||
|
return response.status(500).json({ error: "Not configured" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new YouTubeClient({
|
||||||
|
apiKey: youtubeConfig.apiKey,
|
||||||
|
channelId: youtubeConfig.channelId,
|
||||||
|
channelHandle: youtubeConfig.channelHandle,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear cache and refetch
|
||||||
|
client.clearCache();
|
||||||
|
const [channel, videos] = await Promise.all([
|
||||||
|
client.getChannelInfo(),
|
||||||
|
client.getLatestVideos(youtubeConfig.limits?.videos || 10),
|
||||||
|
]);
|
||||||
|
|
||||||
|
response.json({
|
||||||
|
success: true,
|
||||||
|
channel: channel.title,
|
||||||
|
videoCount: videos.length,
|
||||||
|
message: `Refreshed ${videos.length} videos from ${channel.title}`,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[YouTube] Refresh error:", error);
|
||||||
|
response.status(500).json({ error: error.message });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
67
lib/controllers/live.js
Normal file
67
lib/controllers/live.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import { YouTubeClient } from "../youtube-client.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Live status controller
|
||||||
|
*/
|
||||||
|
export const liveController = {
|
||||||
|
/**
|
||||||
|
* Get live status (JSON API)
|
||||||
|
* Uses efficient method (checking recent videos) by default
|
||||||
|
* Use ?full=true for full search (costs 100 quota units)
|
||||||
|
* @type {import("express").RequestHandler}
|
||||||
|
*/
|
||||||
|
async api(request, response) {
|
||||||
|
try {
|
||||||
|
const { youtubeConfig } = request.app.locals.application;
|
||||||
|
|
||||||
|
if (!youtubeConfig) {
|
||||||
|
return response.status(500).json({ error: "Not configured" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { apiKey, channelId, channelHandle, liveCacheTtl } = youtubeConfig;
|
||||||
|
|
||||||
|
if (!apiKey || (!channelId && !channelHandle)) {
|
||||||
|
return response.status(500).json({ error: "Invalid configuration" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new YouTubeClient({
|
||||||
|
apiKey,
|
||||||
|
channelId,
|
||||||
|
channelHandle,
|
||||||
|
liveCacheTtl,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use full search only if explicitly requested
|
||||||
|
const useFullSearch = request.query.full === "true";
|
||||||
|
const liveStatus = useFullSearch
|
||||||
|
? await client.getLiveStatus()
|
||||||
|
: await client.getLiveStatusEfficient();
|
||||||
|
|
||||||
|
if (liveStatus) {
|
||||||
|
response.json({
|
||||||
|
isLive: liveStatus.isLive || false,
|
||||||
|
isUpcoming: liveStatus.isUpcoming || false,
|
||||||
|
stream: {
|
||||||
|
videoId: liveStatus.videoId,
|
||||||
|
title: liveStatus.title,
|
||||||
|
thumbnail: liveStatus.thumbnail,
|
||||||
|
url: `https://www.youtube.com/watch?v=${liveStatus.videoId}`,
|
||||||
|
scheduledStart: liveStatus.scheduledStart,
|
||||||
|
actualStart: liveStatus.actualStart,
|
||||||
|
},
|
||||||
|
cached: true,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
response.json({
|
||||||
|
isLive: false,
|
||||||
|
isUpcoming: false,
|
||||||
|
stream: null,
|
||||||
|
cached: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[YouTube] Live API error:", error);
|
||||||
|
response.status(500).json({ error: error.message });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
49
lib/controllers/videos.js
Normal file
49
lib/controllers/videos.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { YouTubeClient } from "../youtube-client.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Videos controller
|
||||||
|
*/
|
||||||
|
export const videosController = {
|
||||||
|
/**
|
||||||
|
* Get latest videos (JSON API)
|
||||||
|
* @type {import("express").RequestHandler}
|
||||||
|
*/
|
||||||
|
async api(request, response) {
|
||||||
|
try {
|
||||||
|
const { youtubeConfig } = request.app.locals.application;
|
||||||
|
|
||||||
|
if (!youtubeConfig) {
|
||||||
|
return response.status(500).json({ error: "Not configured" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { apiKey, channelId, channelHandle, cacheTtl, limits } = youtubeConfig;
|
||||||
|
|
||||||
|
if (!apiKey || (!channelId && !channelHandle)) {
|
||||||
|
return response.status(500).json({ error: "Invalid configuration" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new YouTubeClient({
|
||||||
|
apiKey,
|
||||||
|
channelId,
|
||||||
|
channelHandle,
|
||||||
|
cacheTtl,
|
||||||
|
});
|
||||||
|
|
||||||
|
const maxResults = Math.min(
|
||||||
|
parseInt(request.query.limit, 10) || limits?.videos || 10,
|
||||||
|
50
|
||||||
|
);
|
||||||
|
|
||||||
|
const videos = await client.getLatestVideos(maxResults);
|
||||||
|
|
||||||
|
response.json({
|
||||||
|
videos,
|
||||||
|
count: videos.length,
|
||||||
|
cached: true,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[YouTube] Videos API error:", error);
|
||||||
|
response.status(500).json({ error: error.message });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
330
lib/youtube-client.js
Normal file
330
lib/youtube-client.js
Normal file
@@ -0,0 +1,330 @@
|
|||||||
|
/**
|
||||||
|
* YouTube Data API v3 client
|
||||||
|
* Optimized for quota efficiency (10,000 units/day default)
|
||||||
|
*
|
||||||
|
* Quota costs:
|
||||||
|
* - channels.list: 1 unit
|
||||||
|
* - playlistItems.list: 1 unit
|
||||||
|
* - videos.list: 1 unit
|
||||||
|
* - search.list: 100 units (avoid!)
|
||||||
|
*/
|
||||||
|
|
||||||
|
const API_BASE = "https://www.googleapis.com/youtube/v3";
|
||||||
|
|
||||||
|
// In-memory cache
|
||||||
|
const cache = new Map();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get cached data or null if expired
|
||||||
|
* @param {string} key - Cache key
|
||||||
|
* @param {number} ttl - TTL in milliseconds
|
||||||
|
* @returns {any|null}
|
||||||
|
*/
|
||||||
|
function getCache(key, ttl) {
|
||||||
|
const cached = cache.get(key);
|
||||||
|
if (!cached) return null;
|
||||||
|
if (Date.now() - cached.time > ttl) {
|
||||||
|
cache.delete(key);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return cached.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set cache data
|
||||||
|
* @param {string} key - Cache key
|
||||||
|
* @param {any} data - Data to cache
|
||||||
|
*/
|
||||||
|
function setCache(key, data) {
|
||||||
|
cache.set(key, { data, time: Date.now() });
|
||||||
|
}
|
||||||
|
|
||||||
|
export class YouTubeClient {
|
||||||
|
/**
|
||||||
|
* @param {object} options
|
||||||
|
* @param {string} options.apiKey - YouTube Data API key
|
||||||
|
* @param {string} options.channelId - Channel ID (UC...)
|
||||||
|
* @param {string} [options.channelHandle] - Channel handle (@...)
|
||||||
|
* @param {number} [options.cacheTtl] - Cache TTL in ms (default: 5 min)
|
||||||
|
* @param {number} [options.liveCacheTtl] - Live status cache TTL in ms (default: 1 min)
|
||||||
|
*/
|
||||||
|
constructor(options) {
|
||||||
|
this.apiKey = options.apiKey;
|
||||||
|
this.channelId = options.channelId;
|
||||||
|
this.channelHandle = options.channelHandle;
|
||||||
|
this.cacheTtl = options.cacheTtl || 300_000; // 5 minutes
|
||||||
|
this.liveCacheTtl = options.liveCacheTtl || 60_000; // 1 minute
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make API request
|
||||||
|
* @param {string} endpoint - API endpoint
|
||||||
|
* @param {object} params - Query parameters
|
||||||
|
* @returns {Promise<object>}
|
||||||
|
*/
|
||||||
|
async request(endpoint, params = {}) {
|
||||||
|
const url = new URL(`${API_BASE}/${endpoint}`);
|
||||||
|
url.searchParams.set("key", this.apiKey);
|
||||||
|
for (const [key, value] of Object.entries(params)) {
|
||||||
|
if (value !== undefined && value !== null) {
|
||||||
|
url.searchParams.set(key, String(value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url.toString());
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json().catch(() => ({}));
|
||||||
|
const message = error.error?.message || response.statusText;
|
||||||
|
throw new Error(`YouTube API error: ${message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get channel info (cached)
|
||||||
|
* @returns {Promise<object>} - Channel info including uploads playlist ID
|
||||||
|
*/
|
||||||
|
async getChannelInfo() {
|
||||||
|
const cacheKey = `channel:${this.channelId || this.channelHandle}`;
|
||||||
|
const cached = getCache(cacheKey, 86_400_000); // 24 hour cache for channel info
|
||||||
|
if (cached) return cached;
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
part: "snippet,contentDetails,statistics,brandingSettings",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use channelId if available, otherwise resolve from handle
|
||||||
|
if (this.channelId) {
|
||||||
|
params.id = this.channelId;
|
||||||
|
} else if (this.channelHandle) {
|
||||||
|
// Remove @ if present
|
||||||
|
const handle = this.channelHandle.replace(/^@/, "");
|
||||||
|
params.forHandle = handle;
|
||||||
|
} else {
|
||||||
|
throw new Error("Either channelId or channelHandle is required");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await this.request("channels", params);
|
||||||
|
|
||||||
|
if (!data.items || data.items.length === 0) {
|
||||||
|
throw new Error("Channel not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
const channel = data.items[0];
|
||||||
|
const result = {
|
||||||
|
id: channel.id,
|
||||||
|
title: channel.snippet.title,
|
||||||
|
description: channel.snippet.description,
|
||||||
|
customUrl: channel.snippet.customUrl,
|
||||||
|
thumbnail: channel.snippet.thumbnails?.medium?.url,
|
||||||
|
subscriberCount: parseInt(channel.statistics.subscriberCount, 10) || 0,
|
||||||
|
videoCount: parseInt(channel.statistics.videoCount, 10) || 0,
|
||||||
|
viewCount: parseInt(channel.statistics.viewCount, 10) || 0,
|
||||||
|
uploadsPlaylistId: channel.contentDetails?.relatedPlaylists?.uploads,
|
||||||
|
bannerUrl: channel.brandingSettings?.image?.bannerExternalUrl,
|
||||||
|
};
|
||||||
|
|
||||||
|
setCache(cacheKey, result);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get latest videos from channel
|
||||||
|
* Uses uploads playlist for quota efficiency (1 unit vs 100 for search)
|
||||||
|
* @param {number} [maxResults=10] - Number of videos to fetch
|
||||||
|
* @returns {Promise<Array>} - List of videos
|
||||||
|
*/
|
||||||
|
async getLatestVideos(maxResults = 10) {
|
||||||
|
const cacheKey = `videos:${this.channelId || this.channelHandle}:${maxResults}`;
|
||||||
|
const cached = getCache(cacheKey, this.cacheTtl);
|
||||||
|
if (cached) return cached;
|
||||||
|
|
||||||
|
// Get channel info to get uploads playlist ID
|
||||||
|
const channel = await this.getChannelInfo();
|
||||||
|
if (!channel.uploadsPlaylistId) {
|
||||||
|
throw new Error("Could not find uploads playlist");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get playlist items (1 quota unit)
|
||||||
|
const playlistData = await this.request("playlistItems", {
|
||||||
|
part: "snippet,contentDetails",
|
||||||
|
playlistId: channel.uploadsPlaylistId,
|
||||||
|
maxResults: Math.min(maxResults, 50),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!playlistData.items || playlistData.items.length === 0) {
|
||||||
|
setCache(cacheKey, []);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get video details for duration, view count, live status (1 quota unit)
|
||||||
|
const videoIds = playlistData.items
|
||||||
|
.map((item) => item.contentDetails.videoId)
|
||||||
|
.join(",");
|
||||||
|
|
||||||
|
const videosData = await this.request("videos", {
|
||||||
|
part: "snippet,contentDetails,statistics,liveStreamingDetails",
|
||||||
|
id: videoIds,
|
||||||
|
});
|
||||||
|
|
||||||
|
const videos = videosData.items.map((video) => this.formatVideo(video));
|
||||||
|
|
||||||
|
setCache(cacheKey, videos);
|
||||||
|
return videos;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if channel is currently live
|
||||||
|
* @returns {Promise<object|null>} - Live stream info or null
|
||||||
|
*/
|
||||||
|
async getLiveStatus() {
|
||||||
|
const cacheKey = `live:${this.channelId || this.channelHandle}`;
|
||||||
|
const cached = getCache(cacheKey, this.liveCacheTtl);
|
||||||
|
if (cached !== undefined) return cached;
|
||||||
|
|
||||||
|
// Get channel info first to ensure we have the channel ID
|
||||||
|
const channel = await this.getChannelInfo();
|
||||||
|
|
||||||
|
// Search for live broadcasts (costs 100 quota units - use sparingly)
|
||||||
|
// Only do this check periodically
|
||||||
|
try {
|
||||||
|
const data = await this.request("search", {
|
||||||
|
part: "snippet",
|
||||||
|
channelId: channel.id,
|
||||||
|
eventType: "live",
|
||||||
|
type: "video",
|
||||||
|
maxResults: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (data.items && data.items.length > 0) {
|
||||||
|
const liveItem = data.items[0];
|
||||||
|
const result = {
|
||||||
|
isLive: true,
|
||||||
|
videoId: liveItem.id.videoId,
|
||||||
|
title: liveItem.snippet.title,
|
||||||
|
thumbnail: liveItem.snippet.thumbnails?.medium?.url,
|
||||||
|
startedAt: liveItem.snippet.publishedAt,
|
||||||
|
};
|
||||||
|
setCache(cacheKey, result);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCache(cacheKey, null);
|
||||||
|
return null;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[YouTube] Live status check error:", error.message);
|
||||||
|
setCache(cacheKey, null);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get live status efficiently by checking recent videos
|
||||||
|
* This uses less quota than search.list
|
||||||
|
* @returns {Promise<object|null>} - Live stream info or null
|
||||||
|
*/
|
||||||
|
async getLiveStatusEfficient() {
|
||||||
|
const cacheKey = `live-eff:${this.channelId || this.channelHandle}`;
|
||||||
|
const cached = getCache(cacheKey, this.liveCacheTtl);
|
||||||
|
if (cached !== undefined) return cached;
|
||||||
|
|
||||||
|
// Get latest videos and check if any are live
|
||||||
|
const videos = await this.getLatestVideos(5);
|
||||||
|
const liveVideo = videos.find((v) => v.isLive || v.isUpcoming);
|
||||||
|
|
||||||
|
if (liveVideo) {
|
||||||
|
const result = {
|
||||||
|
isLive: liveVideo.isLive,
|
||||||
|
isUpcoming: liveVideo.isUpcoming,
|
||||||
|
videoId: liveVideo.id,
|
||||||
|
title: liveVideo.title,
|
||||||
|
thumbnail: liveVideo.thumbnail,
|
||||||
|
scheduledStart: liveVideo.scheduledStart,
|
||||||
|
actualStart: liveVideo.actualStart,
|
||||||
|
};
|
||||||
|
setCache(cacheKey, result);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCache(cacheKey, null);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format video data
|
||||||
|
* @param {object} video - Raw video data from API
|
||||||
|
* @returns {object} - Formatted video
|
||||||
|
*/
|
||||||
|
formatVideo(video) {
|
||||||
|
const liveDetails = video.liveStreamingDetails;
|
||||||
|
const isLive = liveDetails?.actualStartTime && !liveDetails?.actualEndTime;
|
||||||
|
const isUpcoming = liveDetails?.scheduledStartTime && !liveDetails?.actualStartTime;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: video.id,
|
||||||
|
title: video.snippet.title,
|
||||||
|
description: video.snippet.description,
|
||||||
|
thumbnail: video.snippet.thumbnails?.medium?.url,
|
||||||
|
thumbnailHigh: video.snippet.thumbnails?.high?.url,
|
||||||
|
channelId: video.snippet.channelId,
|
||||||
|
channelTitle: video.snippet.channelTitle,
|
||||||
|
publishedAt: video.snippet.publishedAt,
|
||||||
|
duration: this.parseDuration(video.contentDetails?.duration),
|
||||||
|
durationFormatted: this.formatDuration(video.contentDetails?.duration),
|
||||||
|
viewCount: parseInt(video.statistics?.viewCount, 10) || 0,
|
||||||
|
likeCount: parseInt(video.statistics?.likeCount, 10) || 0,
|
||||||
|
commentCount: parseInt(video.statistics?.commentCount, 10) || 0,
|
||||||
|
isLive,
|
||||||
|
isUpcoming,
|
||||||
|
scheduledStart: liveDetails?.scheduledStartTime,
|
||||||
|
actualStart: liveDetails?.actualStartTime,
|
||||||
|
concurrentViewers: liveDetails?.concurrentViewers
|
||||||
|
? parseInt(liveDetails.concurrentViewers, 10)
|
||||||
|
: null,
|
||||||
|
url: `https://www.youtube.com/watch?v=${video.id}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse ISO 8601 duration to seconds
|
||||||
|
* @param {string} duration - ISO 8601 duration (PT1H2M3S)
|
||||||
|
* @returns {number} - Duration in seconds
|
||||||
|
*/
|
||||||
|
parseDuration(duration) {
|
||||||
|
if (!duration) return 0;
|
||||||
|
const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
|
||||||
|
if (!match) return 0;
|
||||||
|
const hours = parseInt(match[1], 10) || 0;
|
||||||
|
const minutes = parseInt(match[2], 10) || 0;
|
||||||
|
const seconds = parseInt(match[3], 10) || 0;
|
||||||
|
return hours * 3600 + minutes * 60 + seconds;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format duration for display
|
||||||
|
* @param {string} duration - ISO 8601 duration
|
||||||
|
* @returns {string} - Formatted duration (1:02:03 or 2:03)
|
||||||
|
*/
|
||||||
|
formatDuration(duration) {
|
||||||
|
const totalSeconds = this.parseDuration(duration);
|
||||||
|
if (totalSeconds === 0) return "0:00";
|
||||||
|
|
||||||
|
const hours = Math.floor(totalSeconds / 3600);
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||||
|
const seconds = totalSeconds % 60;
|
||||||
|
|
||||||
|
if (hours > 0) {
|
||||||
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all caches
|
||||||
|
*/
|
||||||
|
clearCache() {
|
||||||
|
cache.clear();
|
||||||
|
}
|
||||||
|
}
|
||||||
26
locales/en.json
Normal file
26
locales/en.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"youtube": {
|
||||||
|
"title": "YouTube",
|
||||||
|
"videos": "Latest Videos",
|
||||||
|
"channel": "Channel",
|
||||||
|
"live": "Live Now",
|
||||||
|
"upcoming": "Upcoming",
|
||||||
|
"offline": "Offline",
|
||||||
|
"subscribers": "subscribers",
|
||||||
|
"views": "views",
|
||||||
|
"watchNow": "Watch Now",
|
||||||
|
"viewChannel": "View Channel",
|
||||||
|
"viewAll": "View All Videos",
|
||||||
|
"noVideos": "No videos found",
|
||||||
|
"refreshed": "Refreshed",
|
||||||
|
"error": {
|
||||||
|
"noApiKey": "YouTube API key not configured",
|
||||||
|
"noChannel": "YouTube channel not specified",
|
||||||
|
"connection": "Could not connect to YouTube API"
|
||||||
|
},
|
||||||
|
"widget": {
|
||||||
|
"description": "View full channel on YouTube",
|
||||||
|
"view": "Open YouTube Channel"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5593
package-lock.json
generated
Normal file
5593
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
package.json
Normal file
52
package.json
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"name": "@rmdes/indiekit-endpoint-youtube",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "YouTube channel endpoint for Indiekit. Display latest videos and live status from any YouTube channel.",
|
||||||
|
"keywords": [
|
||||||
|
"indiekit",
|
||||||
|
"indiekit-plugin",
|
||||||
|
"indieweb",
|
||||||
|
"youtube",
|
||||||
|
"videos",
|
||||||
|
"live",
|
||||||
|
"streaming"
|
||||||
|
],
|
||||||
|
"homepage": "https://github.com/rmdes/indiekit-endpoint-youtube",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/rmdes/indiekit-endpoint-youtube/issues"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/rmdes/indiekit-endpoint-youtube.git"
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"name": "Ricardo Mendes",
|
||||||
|
"url": "https://rmendes.net"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20"
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"exports": {
|
||||||
|
".": "./index.js"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"includes",
|
||||||
|
"lib",
|
||||||
|
"locales",
|
||||||
|
"views",
|
||||||
|
"index.js"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"@indiekit/error": "^1.0.0-beta.25",
|
||||||
|
"express": "^5.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@indiekit/indiekit": ">=1.0.0-beta.25"
|
||||||
|
},
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
||||||
281
views/youtube.njk
Normal file
281
views/youtube.njk
Normal file
@@ -0,0 +1,281 @@
|
|||||||
|
{% extends "document.njk" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<style>
|
||||||
|
.yt-section { margin-bottom: 2rem; }
|
||||||
|
.yt-section h2 { margin-bottom: 1rem; }
|
||||||
|
|
||||||
|
/* Channel header */
|
||||||
|
.yt-channel {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--color-offset, #f5f5f5);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.yt-channel__avatar {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.yt-channel__info { flex: 1; }
|
||||||
|
.yt-channel__name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
margin: 0 0 0.25rem 0;
|
||||||
|
}
|
||||||
|
.yt-channel__stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary, #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Live status badge */
|
||||||
|
.yt-live-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.yt-live-badge--live {
|
||||||
|
background: #ff0000;
|
||||||
|
color: white;
|
||||||
|
animation: yt-pulse 2s infinite;
|
||||||
|
}
|
||||||
|
.yt-live-badge--upcoming {
|
||||||
|
background: #065fd4;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.yt-live-badge--offline {
|
||||||
|
background: var(--color-offset, #e5e5e5);
|
||||||
|
color: var(--color-text-secondary, #666);
|
||||||
|
}
|
||||||
|
@keyframes yt-pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
.yt-live-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Live stream card */
|
||||||
|
.yt-live-stream {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: linear-gradient(135deg, #ff000010, #ff000005);
|
||||||
|
border: 1px solid #ff000030;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.yt-live-stream__thumb {
|
||||||
|
width: 160px;
|
||||||
|
height: 90px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.yt-live-stream__info { flex: 1; }
|
||||||
|
.yt-live-stream__title {
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
}
|
||||||
|
.yt-live-stream__title a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.yt-live-stream__title a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Video grid */
|
||||||
|
.yt-video-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.yt-video {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: var(--color-offset, #f5f5f5);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.yt-video__thumb-wrapper {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
.yt-video__thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.yt-video__duration {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
color: white;
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.yt-video__info {
|
||||||
|
padding: 0.75rem;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.yt-video__title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.yt-video__title a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.yt-video__title a:hover { text-decoration: underline; }
|
||||||
|
.yt-video__meta {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--color-text-secondary, #666);
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Public link banner */
|
||||||
|
.yt-public-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--color-offset, #f5f5f5);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.yt-public-link p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text-secondary, #666);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{% if error %}
|
||||||
|
{{ prose({ text: error.message }) }}
|
||||||
|
{% else %}
|
||||||
|
{# Channel Header #}
|
||||||
|
{% if channel %}
|
||||||
|
<div class="yt-channel">
|
||||||
|
{% if channel.thumbnail %}
|
||||||
|
<img src="{{ channel.thumbnail }}" alt="" class="yt-channel__avatar">
|
||||||
|
{% endif %}
|
||||||
|
<div class="yt-channel__info">
|
||||||
|
<h2 class="yt-channel__name">{{ channel.title }}</h2>
|
||||||
|
<div class="yt-channel__stats">
|
||||||
|
<span>{{ channel.subscriberCount | localeNumber }} {{ __("youtube.subscribers") }}</span>
|
||||||
|
<span>{{ channel.videoCount | localeNumber }} videos</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if isLive %}
|
||||||
|
<span class="yt-live-badge yt-live-badge--live">
|
||||||
|
<span class="yt-live-dot"></span>
|
||||||
|
{{ __("youtube.live") }}
|
||||||
|
</span>
|
||||||
|
{% elif isUpcoming %}
|
||||||
|
<span class="yt-live-badge yt-live-badge--upcoming">
|
||||||
|
{{ __("youtube.upcoming") }}
|
||||||
|
</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="yt-live-badge yt-live-badge--offline">
|
||||||
|
{{ __("youtube.offline") }}
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Live Stream (if live) #}
|
||||||
|
{% if liveStatus and (liveStatus.isLive or liveStatus.isUpcoming) %}
|
||||||
|
<section class="yt-section">
|
||||||
|
<h2>{% if liveStatus.isLive %}{{ __("youtube.live") }}{% else %}{{ __("youtube.upcoming") }}{% endif %}</h2>
|
||||||
|
<div class="yt-live-stream">
|
||||||
|
{% if liveStatus.thumbnail %}
|
||||||
|
<img src="{{ liveStatus.thumbnail }}" alt="" class="yt-live-stream__thumb">
|
||||||
|
{% endif %}
|
||||||
|
<div class="yt-live-stream__info">
|
||||||
|
<h3 class="yt-live-stream__title">
|
||||||
|
<a href="https://www.youtube.com/watch?v={{ liveStatus.videoId }}" target="_blank" rel="noopener">
|
||||||
|
{{ liveStatus.title }}
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
{{ button({
|
||||||
|
href: "https://www.youtube.com/watch?v=" + liveStatus.videoId,
|
||||||
|
text: __("youtube.watchNow"),
|
||||||
|
target: "_blank"
|
||||||
|
}) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Latest Videos #}
|
||||||
|
<section class="yt-section">
|
||||||
|
<h2>{{ __("youtube.videos") }}</h2>
|
||||||
|
{% if videos and videos.length > 0 %}
|
||||||
|
<ul class="yt-video-grid">
|
||||||
|
{% for video in videos %}
|
||||||
|
<li class="yt-video">
|
||||||
|
<div class="yt-video__thumb-wrapper">
|
||||||
|
<a href="{{ video.url }}" target="_blank" rel="noopener">
|
||||||
|
<img src="{{ video.thumbnail }}" alt="" class="yt-video__thumb" loading="lazy">
|
||||||
|
</a>
|
||||||
|
{% if video.durationFormatted and not video.isLive %}
|
||||||
|
<span class="yt-video__duration">{{ video.durationFormatted }}</span>
|
||||||
|
{% elif video.isLive %}
|
||||||
|
<span class="yt-video__duration" style="background:#ff0000">LIVE</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="yt-video__info">
|
||||||
|
<h3 class="yt-video__title">
|
||||||
|
<a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
|
||||||
|
</h3>
|
||||||
|
<div class="yt-video__meta">
|
||||||
|
{{ video.viewCount | localeNumber }} {{ __("youtube.views") }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
{{ prose({ text: __("youtube.noVideos") }) }}
|
||||||
|
{% endif %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{# Link to YouTube channel #}
|
||||||
|
{% if channel %}
|
||||||
|
<div class="yt-public-link">
|
||||||
|
<p>{{ __("youtube.widget.description") }}</p>
|
||||||
|
{{ button({
|
||||||
|
href: "https://www.youtube.com/channel/" + channel.id,
|
||||||
|
text: __("youtube.widget.view"),
|
||||||
|
target: "_blank"
|
||||||
|
}) }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user