@dxos/plugin-youtube 0.8.3

package/src/containers/VideoArticle/VideoArticle.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { Icon, Panel } from '@dxos/react-ui';
+
+import * as Channel from '../../types/Channel';
+import * as Video from '../../types/Video';
+
+export type VideoArticleProps = {
+  role: string | string[];
+  subject: Video.YouTubeVideo;
+  channel: Channel.YouTubeChannel;
+  attendableId?: string;
+};
+
+export const VideoArticle = ({ subject: video, role }: VideoArticleProps) => {
+  const [showPlayer, setShowPlayer] = useState(false);
+  const publishedDate = new Date(video.publishedAt).toLocaleDateString();
+  const hasTranscript = Boolean(video.transcript);
+  const embedUrl = `https://www.youtube.com/embed/${video.videoId}`;
+
+  return (
+    <Panel.Root>
+      <Panel.Content className={role === 'section' ? 'overflow-auto' : ''}>
+        <div className='flex flex-col gap-4 p-4 max-w-4xl'>
+          <div className='flex flex-col gap-2'>
+            <h2 className='text-lg font-semibold'>{video.title}</h2>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <span>{video.channelTitle}</span>
+              <span>•</span>
+              <span>{publishedDate}</span>
+              {video.viewCount !== undefined && (
+                <>
+                  <span>•</span>
+                  <span>{video.viewCount.toLocaleString()} views</span>
+                </>
+              )}
+              {video.likeCount !== undefined && (
+                <>
+                  <span>•</span>
+                  <span>{video.likeCount.toLocaleString()} likes</span>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className='aspect-video w-full max-w-2xl'>
+            {showPlayer ? (
+              <iframe
+                src={embedUrl}
+                title={video.title}
+                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+                allowFullScreen
+                className='h-full w-full rounded-lg'
+              />
+            ) : (
+              <button
+                type='button'
+                onClick={() => setShowPlayer(true)}
+                className='relative h-full w-full group cursor-pointer'
+              >
+                {video.thumbnailUrl ? (
+                  <img src={video.thumbnailUrl} alt={video.title} className='h-full w-full object-cover rounded-lg' />
+                ) : (
+                  <div className='h-full w-full bg-surface-hover rounded-lg flex items-center justify-center'>
+                    <Icon icon='ph--play--fill' size={12} />
+                  </div>
+                )}
+                <div className='absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/50 rounded-lg transition-colors'>
+                  <div className='bg-red-600 text-white rounded-full p-4 group-hover:scale-110 transition-transform'>
+                    <Icon icon='ph--play--fill' size={8} />
+                  </div>
+                </div>
+              </button>
+            )}
+          </div>
+
+          {video.description && (
+            <div className='max-w-2xl'>
+              <h3 className='text-md font-medium mb-2'>Description</h3>
+              <p className='whitespace-pre-wrap text-sm'>{video.description}</p>
+            </div>
+          )}
+
+          {hasTranscript && (
+            <div className='max-w-2xl'>
+              <h3 className='text-md font-medium mb-2'>Transcript</h3>
+              <div className='bg-surface-input p-4 rounded-lg max-h-96 overflow-auto'>
+                <p className='whitespace-pre-wrap text-sm'>{video.transcript}</p>
+              </div>
+            </div>
+          )}
+
+          <a
+            href={video.url}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='inline-flex items-center gap-2 text-sm text-primary hover:underline'
+          >
+            Watch on YouTube →
+          </a>
+        </div>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/VideoArticle/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { VideoArticle } from './VideoArticle';
+
+export default VideoArticle;

package/src/containers/VideoCard/VideoCard.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Card, Icon } from '@dxos/react-ui';
+
+import * as Video from '../../types/Video';
+
+export type VideoCardProps = SurfaceComponentProps<Video.YouTubeVideo>;
+
+/**
+ * YouTube video card with embedded player.
+ */
+export const VideoCard = ({ subject: video }: VideoCardProps) => {
+  const [showPlayer, setShowPlayer] = useState(false);
+  const publishedDate = new Date(video.publishedAt).toLocaleDateString();
+  const hasTranscript = Boolean(video.transcript);
+
+  const embedUrl = `https://www.youtube.com/embed/${video.videoId}?autoplay=1`;
+
+  return (
+    <Card.Content>
+      {showPlayer ? (
+        <div className='aspect-video w-full'>
+          <iframe
+            src={embedUrl}
+            title={video.title}
+            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+            allowFullScreen
+            className='h-full w-full rounded'
+          />
+        </div>
+      ) : (
+        <button
+          type='button'
+          onClick={() => setShowPlayer(true)}
+          className='relative aspect-video w-full group cursor-pointer'
+        >
+          {video.thumbnailUrl ? (
+            <img src={video.thumbnailUrl} alt={video.title} className='h-full w-full object-cover rounded' />
+          ) : (
+            <div className='h-full w-full bg-surface-hover rounded flex items-center justify-center'>
+              <Icon icon='ph--play--fill' size={12} />
+            </div>
+          )}
+          <div className='absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/50 rounded transition-colors'>
+            <div className='bg-red-600 text-white rounded-full p-3 group-hover:scale-110 transition-transform'>
+              <Icon icon='ph--play--fill' size={6} />
+            </div>
+          </div>
+        </button>
+      )}
+      <Card.Toolbar>
+        <Card.IconBlock>
+          <Icon icon='ph--youtube-logo--regular' size={5} />
+        </Card.IconBlock>
+        <div className='flex gap-3 items-center justify-between col-span-2'>
+          <span className='grow truncate font-medium'>{video.title}</span>
+          <span className='text-xs text-description text-right whitespace-nowrap pe-2'>{publishedDate}</span>
+        </div>
+      </Card.Toolbar>
+      <Card.Row>
+        <span className='text-xs text-description'>{video.channelTitle}</span>
+      </Card.Row>
+      {video.description && (
+        <Card.Row>
+          <Card.Text variant='description'>{video.description.slice(0, 150)}...</Card.Text>
+        </Card.Row>
+      )}
+      <Card.Row>
+        <div className='flex gap-2 items-center text-xs text-description'>
+          {video.viewCount !== undefined && <span>{video.viewCount.toLocaleString()} views</span>}
+          {hasTranscript && (
+            <>
+              <span>•</span>
+              <span className='text-green-600'>Transcript available</span>
+            </>
+          )}
+        </div>
+      </Card.Row>
+    </Card.Content>
+  );
+};

package/src/containers/VideoCard/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { VideoCard } from './VideoCard';
+
+export default VideoCard;

package/src/containers/index.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ComponentType, lazy, type LazyExoticComponent } from 'react';
+
+import type { ChannelArticleProps } from './ChannelArticle/ChannelArticle';
+import type { ChannelSettingsProps } from './ChannelSettings/ChannelSettings';
+import type { VideoArticleProps } from './VideoArticle/VideoArticle';
+import type { VideoCardProps } from './VideoCard/VideoCard';
+
+export type { ChannelArticleProps, ChannelSettingsProps, VideoArticleProps, VideoCardProps };
+
+export const ChannelArticle: LazyExoticComponent<ComponentType<ChannelArticleProps>> = lazy(
+  () => import('./ChannelArticle'),
+);
+
+export const ChannelSettings: LazyExoticComponent<ComponentType<ChannelSettingsProps>> = lazy(
+  () => import('./ChannelSettings'),
+);
+
+export const VideoArticle: LazyExoticComponent<ComponentType<VideoArticleProps>> = lazy(() => import('./VideoArticle'));
+
+export const VideoCard: LazyExoticComponent<ComponentType<VideoCardProps>> = lazy(() => import('./VideoCard'));

package/src/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './meta';
+export * from './operations';
+
+export * from './YouTubePlugin';

package/src/meta.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
+
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.youtube',
+  name: 'YouTube',
+  description: trim`
+    YouTube channel subscription and video feed management.
+    Sync videos from channels and access transcripts for analysis.
+  `,
+  icon: 'ph--youtube-logo--regular',
+  iconHue: 'red',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-youtube',
+  tags: ['labs'],
+};

package/src/operations/apis/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * as YouTube from './youtube';

package/src/operations/apis/youtube/api.ts

@@ -0,0 +1,149 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as HttpClient from '@effect/platform/HttpClient';
+import * as HttpClientRequest from '@effect/platform/HttpClientRequest';
+import * as Effect from 'effect/Effect';
+import type * as ParseResult from 'effect/ParseResult';
+import * as Schedule from 'effect/Schedule';
+import * as Schema from 'effect/Schema';
+
+import { withAuthorization } from '@dxos/functions';
+import { log } from '@dxos/log';
+
+import { GoogleCredentials } from '../../services/google-credentials';
+
+import {
+  ChannelsResponse,
+  ErrorResponse,
+  PlaylistItemsResponse,
+  SearchResponse,
+  VideosResponse,
+  YouTubeError,
+} from './types';
+
+const API_URL = 'https://www.googleapis.com/youtube/v3';
+
+/**
+ * Creates a URL from path segments and query parameters.
+ */
+const createUrl = (parts: (string | undefined)[], params?: Record<string, unknown>): URL => {
+  const url = new URL(parts.filter(Boolean).join('/'));
+  if (params) {
+    Object.entries(params)
+      .filter(([_, value]) => value != null)
+      .forEach(([key, value]) => url.searchParams.set(key, String(value)));
+  }
+  return url;
+};
+
+/**
+ * Decode response and handle YouTube API errors.
+ */
+const decodeAndHandleErrors =
+  <S extends Schema.Schema.Any>(schema: S) =>
+  (
+    data: unknown,
+  ): Effect.Effect<Schema.Schema.Type<S>, YouTubeError | ParseResult.ParseError, Schema.Schema.Context<S>> =>
+    Schema.decodeUnknown(Schema.Union(schema, ErrorResponse))(data).pipe(
+      Effect.flatMap((response) => {
+        if ('error' in response) {
+          return Effect.fail(YouTubeError.fromErrorResponse(response));
+        } else {
+          return Effect.succeed(response);
+        }
+      }),
+    );
+
+/**
+ * Makes an authenticated HTTP request to a YouTube API endpoint.
+ */
+const makeYouTubeApiRequest = Effect.fn('makeYouTubeApiRequest')(function* (url: string) {
+  const token = yield* GoogleCredentials.get();
+
+  const httpClient = yield* HttpClient.HttpClient.pipe(Effect.map(withAuthorization(token, 'Bearer')));
+  const httpClientWithTracerDisabled = httpClient.pipe(HttpClient.withTracerDisabledWhen(() => true));
+
+  const request = HttpClientRequest.get(url);
+
+  const response = yield* request.pipe(
+    HttpClientRequest.setHeader('accept', 'application/json'),
+    httpClientWithTracerDisabled.execute,
+    Effect.flatMap((res) => res.json),
+    Effect.timeout('10 seconds'),
+    Effect.retry(Schedule.exponential(1_000).pipe(Schedule.compose(Schedule.recurs(3)))),
+    Effect.scoped,
+    Effect.withSpan('YouTubeApiRequest'),
+  );
+
+  if ((response as Record<string, unknown>).error) {
+    log.catch((response as Record<string, unknown>).error);
+  }
+
+  return response;
+});
+
+/**
+ * Get channel details by channel ID.
+ * https://developers.google.com/youtube/v3/docs/channels/list
+ */
+export const getChannel = Effect.fn(function* (channelId: string) {
+  const url = createUrl([API_URL, 'channels'], {
+    part: 'snippet,contentDetails',
+    id: channelId,
+  }).toString();
+  return yield* makeYouTubeApiRequest(url).pipe(Effect.flatMap(decodeAndHandleErrors(ChannelsResponse)));
+});
+
+/**
+ * Get channel by username/handle.
+ * https://developers.google.com/youtube/v3/docs/channels/list
+ */
+export const getChannelByHandle = Effect.fn(function* (handle: string) {
+  const url = createUrl([API_URL, 'channels'], {
+    part: 'snippet,contentDetails',
+    forHandle: handle.startsWith('@') ? handle.slice(1) : handle,
+  }).toString();
+  return yield* makeYouTubeApiRequest(url).pipe(Effect.flatMap(decodeAndHandleErrors(ChannelsResponse)));
+});
+
+/**
+ * Search for channels by query.
+ * https://developers.google.com/youtube/v3/docs/search/list
+ */
+export const searchChannels = Effect.fn(function* (query: string, maxResults = 10) {
+  const url = createUrl([API_URL, 'search'], {
+    part: 'snippet',
+    type: 'channel',
+    q: query,
+    maxResults,
+  }).toString();
+  return yield* makeYouTubeApiRequest(url).pipe(Effect.flatMap(decodeAndHandleErrors(SearchResponse)));
+});
+
+/**
+ * List videos from a playlist (used to get uploads from a channel's uploads playlist).
+ * https://developers.google.com/youtube/v3/docs/playlistItems/list
+ */
+export const listPlaylistItems = Effect.fn(function* (playlistId: string, maxResults = 50, pageToken?: string) {
+  const url = createUrl([API_URL, 'playlistItems'], {
+    part: 'snippet,contentDetails',
+    playlistId,
+    maxResults,
+    pageToken,
+  }).toString();
+  return yield* makeYouTubeApiRequest(url).pipe(Effect.flatMap(decodeAndHandleErrors(PlaylistItemsResponse)));
+});
+
+/**
+ * Get detailed video information including statistics and duration.
+ * https://developers.google.com/youtube/v3/docs/videos/list
+ */
+export const getVideoDetails = Effect.fn(function* (videoIds: string[]) {
+  const url = createUrl([API_URL, 'videos'], {
+    part: 'snippet,contentDetails,statistics',
+    id: videoIds.join(','),
+  }).toString();
+  return yield* makeYouTubeApiRequest(url).pipe(Effect.flatMap(decodeAndHandleErrors(VideosResponse)));
+});

package/src/operations/apis/youtube/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './api';
+export * from './types';

package/src/operations/apis/youtube/types.ts

@@ -0,0 +1,254 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+/**
+ * YouTube API error response.
+ */
+export class YouTubeError extends Schema.TaggedError<YouTubeError>()('YouTubeError', {
+  code: Schema.Number,
+  message: Schema.String,
+  status: Schema.optional(Schema.String),
+}) {
+  static fromErrorResponse(response: ErrorResponse) {
+    return new YouTubeError({
+      code: response.error.code,
+      message: response.error.message,
+      status: response.error.status,
+    });
+  }
+}
+
+export const ErrorResponse = Schema.Struct({
+  error: Schema.Struct({
+    code: Schema.Number,
+    message: Schema.String,
+    status: Schema.optional(Schema.String),
+  }),
+});
+
+export type ErrorResponse = Schema.Schema.Type<typeof ErrorResponse>;
+
+/**
+ * YouTube channel snippet from search/channel API.
+ */
+export const ChannelSnippet = Schema.Struct({
+  title: Schema.String,
+  description: Schema.optional(Schema.String),
+  customUrl: Schema.optional(Schema.String),
+  publishedAt: Schema.optional(Schema.String),
+  thumbnails: Schema.optional(
+    Schema.Struct({
+      default: Schema.optional(Schema.Struct({ url: Schema.String })),
+      medium: Schema.optional(Schema.Struct({ url: Schema.String })),
+      high: Schema.optional(Schema.Struct({ url: Schema.String })),
+    }),
+  ),
+});
+
+/**
+ * YouTube channel item from channels API.
+ */
+export const ChannelItem = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  id: Schema.String,
+  snippet: Schema.optional(ChannelSnippet),
+  contentDetails: Schema.optional(
+    Schema.Struct({
+      relatedPlaylists: Schema.optional(
+        Schema.Struct({
+          uploads: Schema.optional(Schema.String),
+        }),
+      ),
+    }),
+  ),
+});
+
+/**
+ * YouTube channels list response.
+ */
+export const ChannelsResponse = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  pageInfo: Schema.optional(
+    Schema.Struct({
+      totalResults: Schema.Number,
+      resultsPerPage: Schema.Number,
+    }),
+  ),
+  items: Schema.Array(ChannelItem),
+});
+
+export type ChannelsResponse = Schema.Schema.Type<typeof ChannelsResponse>;
+
+/**
+ * Video snippet from search/playlistItems API.
+ */
+export const VideoSnippet = Schema.Struct({
+  publishedAt: Schema.String,
+  channelId: Schema.optional(Schema.String),
+  title: Schema.String,
+  description: Schema.optional(Schema.String),
+  thumbnails: Schema.optional(
+    Schema.Struct({
+      default: Schema.optional(Schema.Struct({ url: Schema.String })),
+      medium: Schema.optional(Schema.Struct({ url: Schema.String })),
+      high: Schema.optional(Schema.Struct({ url: Schema.String })),
+      standard: Schema.optional(Schema.Struct({ url: Schema.String })),
+      maxres: Schema.optional(Schema.Struct({ url: Schema.String })),
+    }),
+  ),
+  channelTitle: Schema.optional(Schema.String),
+  playlistId: Schema.optional(Schema.String),
+  position: Schema.optional(Schema.Number),
+  resourceId: Schema.optional(
+    Schema.Struct({
+      kind: Schema.String,
+      videoId: Schema.String,
+    }),
+  ),
+});
+
+/**
+ * Content details for a video.
+ */
+export const VideoContentDetails = Schema.Struct({
+  videoId: Schema.optional(Schema.String),
+  videoPublishedAt: Schema.optional(Schema.String),
+  duration: Schema.optional(Schema.String),
+});
+
+/**
+ * Video statistics.
+ */
+export const VideoStatistics = Schema.Struct({
+  viewCount: Schema.optional(Schema.String),
+  likeCount: Schema.optional(Schema.String),
+  commentCount: Schema.optional(Schema.String),
+});
+
+/**
+ * Video item from videos API.
+ */
+export const VideoItem = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  id: Schema.String,
+  snippet: Schema.optional(VideoSnippet),
+  contentDetails: Schema.optional(VideoContentDetails),
+  statistics: Schema.optional(VideoStatistics),
+});
+
+export type VideoItem = Schema.Schema.Type<typeof VideoItem>;
+
+/**
+ * YouTube videos list response.
+ */
+export const VideosResponse = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  nextPageToken: Schema.optional(Schema.String),
+  prevPageToken: Schema.optional(Schema.String),
+  pageInfo: Schema.optional(
+    Schema.Struct({
+      totalResults: Schema.Number,
+      resultsPerPage: Schema.Number,
+    }),
+  ),
+  items: Schema.Array(VideoItem),
+});
+
+export type VideosResponse = Schema.Schema.Type<typeof VideosResponse>;
+
+/**
+ * Playlist item from playlistItems API.
+ */
+export const PlaylistItem = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  id: Schema.String,
+  snippet: Schema.optional(VideoSnippet),
+  contentDetails: Schema.optional(VideoContentDetails),
+});
+
+/**
+ * YouTube playlist items response.
+ */
+export const PlaylistItemsResponse = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  nextPageToken: Schema.optional(Schema.String),
+  prevPageToken: Schema.optional(Schema.String),
+  pageInfo: Schema.optional(
+    Schema.Struct({
+      totalResults: Schema.Number,
+      resultsPerPage: Schema.Number,
+    }),
+  ),
+  items: Schema.Array(PlaylistItem),
+});
+
+export type PlaylistItemsResponse = Schema.Schema.Type<typeof PlaylistItemsResponse>;
+
+/**
+ * Search result item.
+ */
+export const SearchItem = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  id: Schema.Struct({
+    kind: Schema.String,
+    videoId: Schema.optional(Schema.String),
+    channelId: Schema.optional(Schema.String),
+    playlistId: Schema.optional(Schema.String),
+  }),
+  snippet: Schema.optional(VideoSnippet),
+});
+
+/**
+ * YouTube search response.
+ */
+export const SearchResponse = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  nextPageToken: Schema.optional(Schema.String),
+  prevPageToken: Schema.optional(Schema.String),
+  pageInfo: Schema.optional(
+    Schema.Struct({
+      totalResults: Schema.Number,
+      resultsPerPage: Schema.Number,
+    }),
+  ),
+  items: Schema.Array(SearchItem),
+});
+
+export type SearchResponse = Schema.Schema.Type<typeof SearchResponse>;
+
+/**
+ * Caption track from captions.list.
+ */
+export const CaptionResource = Schema.Struct({
+  id: Schema.String,
+  snippet: Schema.optional(
+    Schema.Struct({
+      videoId: Schema.optional(Schema.String),
+      language: Schema.optional(Schema.String),
+      name: Schema.optional(Schema.String),
+      trackKind: Schema.optional(Schema.String),
+    }),
+  ),
+});
+
+/**
+ * YouTube captions.list response.
+ */
+export const CaptionsListResponse = Schema.Struct({
+  kind: Schema.String,
+  etag: Schema.String,
+  items: Schema.optional(Schema.Array(CaptionResource)),
+});
+
+export type CaptionsListResponse = Schema.Schema.Type<typeof CaptionsListResponse>;