Add Support for embedding HLS videos

.changeset/lovely-cougars-fix.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add Support for embedding HLS videos

src/components/external-embeds/types/video.tsx

@@ -1,9 +1,10 @@
 import styled from "@emotion/styled";
 
-import { isVideoURL } from "../../../helpers/url";
+import { isStreamURL, isVideoURL } from "../../../helpers/url";
 import useAppSettings from "../../../hooks/use-app-settings";
 import useElementTrustBlur from "../../../hooks/use-element-trust-blur";
 import ExpandableEmbed from "../expandable-embed";
+import { LiveVideoPlayer } from "../../live-video-player";
 
 const StyledVideo = styled.video`
   max-width: 30rem;
@@ -37,3 +38,13 @@ export function renderVideoUrl(match: URL) {
     </ExpandableEmbed>
   );
 }
+
+export function renderStreamUrl(match: URL) {
+  if (!isStreamURL(match)) return null;
+
+  return (
+    <ExpandableEmbed label="Video" url={match} hideOnDefaultOpen>
+      <LiveVideoPlayer stream={match.toString()} maxW="md" maxH="md" />
+    </ExpandableEmbed>
+  );
+}

src/components/note/timeline-note/text-note-contents.tsx

@@ -31,6 +31,7 @@ import {
   renderModelUrl,
   renderCodePenURL,
   renderArchiveOrgURL,
+  renderStreamUrl,
 } from "../../external-embeds";
 import { LightboxProvider } from "../../lightbox-provider";
 import MediaOwnerProvider from "../../../providers/local/media-owner-provider";
@@ -57,6 +58,7 @@ function buildContents(event: NostrEvent | EventTemplate, simpleLinks = false) {
     renderSoundCloudUrl,
     renderImageUrl,
     renderVideoUrl,
+    renderStreamUrl,
     renderAudioUrl,
     renderModelUrl,
     renderCodePenURL,

src/helpers/url.ts

@@ -2,6 +2,7 @@ export const convertToUrl = (url: string | URL) => (url instanceof URL ? url : n
 
 export const IMAGE_EXT = [".svg", ".gif", ".png", ".jpg", ".jpeg", ".webp", ".avif"];
 export const VIDEO_EXT = [".mp4", ".mkv", ".webm", ".mov"];
+export const STREAM_EXT = [".m3u8"];
 export const AUDIO_EXT = [".mp3", ".wav", ".ogg", ".aac"];
 
 export function isMediaURL(url: string | URL) {
@@ -19,6 +20,12 @@ export function isVideoURL(url: string | URL) {
 
   return VIDEO_EXT.some((ext) => u.pathname.endsWith(ext) || ipfsFilename?.endsWith(ext));
 }
+export function isStreamURL(url: string | URL) {
+  const u = new URL(url);
+  const ipfsFilename = u.searchParams.get("filename");
+
+  return STREAM_EXT.some((ext) => u.pathname.endsWith(ext) || ipfsFilename?.endsWith(ext));
+}
 export function isAudioURL(url: string | URL) {
   const u = new URL(url);
   const ipfsFilename = u.searchParams.get("filename");

src/views/channels/components/channel-message-content.tsx

@@ -22,6 +22,7 @@ import {
   renderSoundCloudUrl,
   renderSpotifyUrl,
   renderStemstrUrl,
+  renderStreamUrl,
   renderTidalUrl,
   renderTwitterUrl,
   renderVideoUrl,
@@ -53,6 +54,7 @@ const ChannelMessageContent = memo(({ message, children, ...props }: BoxProps &
       renderSoundCloudUrl,
       renderImageUrl,
       renderVideoUrl,
+      renderStreamUrl,
       renderAudioUrl,
       renderGenericUrl,
     ]);

src/views/dms/components/direct-message-content.tsx

@@ -13,6 +13,7 @@ import {
   renderSoundCloudUrl,
   renderSpotifyUrl,
   renderStemstrUrl,
+  renderStreamUrl,
   renderTidalUrl,
   renderTwitterUrl,
   renderVideoUrl,
@@ -46,6 +47,7 @@ export default function DirectMessageContent({
     renderSoundCloudUrl,
     renderImageUrl,
     renderVideoUrl,
+    renderStreamUrl,
     renderAudioUrl,
     renderGenericUrl,
   ]);

src/views/notifications/index.tsx

@@ -25,6 +25,7 @@ import { useTimelineDates } from "../../hooks/timeline/use-timeline-dates";
 import useCacheEntryHeight from "../../hooks/timeline/use-cache-entry-height";
 import useVimNavigation from "./use-vim-navigation";
 import { PersistentSubject } from "../../classes/subject";
+import useRouteStateValue from "../../hooks/use-route-state-value";
 
 function TimeMarker({ date, ids }: { date: Dayjs; ids: string[] }) {
   const readAll = useCallback(() => {