Merge pull request #37 from FrostCord/FROS-Media-Channels

Add Media Channel Support

Author: multimokia

components/home/Server.tsx

@@ -9,6 +9,7 @@ import styles from '@/styles/Servers.module.css';
 import Marquee from 'react-fast-marquee';
 import { getServerMemberCount, getUsersInServer } from '@/services/server.service';
 import { Channel, Server as ServerType } from '@/types/dbtypes';
+import { ChannelMediaIcon } from '../icons/ChannelMediaIcon';
 
 export default function Server({ server, expanded }: { server: ServerType, expanded: number }) {
   const expand = expanded == server.id;
@@ -52,7 +53,7 @@ export default function Server({ server, expanded }: { server: ServerType, expan
     handleAsync();
   }, [server, supabase, onlinePresenceChannel]);
 
-  function joinChannel(e: SyntheticEvent, channelId: number, name: string) {
+  function joinTextChannel(e: SyntheticEvent, channelId: number, name: string) {
     e.stopPropagation();
     setChatName(name);
     setChannelId(channelId);
@@ -117,11 +118,20 @@ export default function Server({ server, expanded }: { server: ServerType, expan
               className={`channel flex whitespace-nowrap items-center pt-2 pb-1 px-4 hover:bg-grey-600 hover:cursor-pointer rounded-lg max-w-[192px] ${
                 idx === 0 ? 'mt-2' : ''
               }`}
-              onClick={(e) => joinChannel(e, channel.channel_id, channel.name)}
+              onClick={(e) => {
+                if (channel.is_media) {
+                  // Entrypoint for media channel
+                  return;
+                }
+
+                else {
+                  joinTextChannel(e, channel.channel_id, channel.name);
+                }
+              }}
               key={channel.channel_id}
             >
               <div className="w-4">
-                <ChannelMessageIcon size="" />
+                {channel.is_media ? <ChannelMediaIcon/> : <ChannelMessageIcon/>}
               </div>
 
               <div className="ml-2 text-sm font-semibold tracking-wide text-grey-200 max-w-[10ch] overflow-hidden hover:overflow-visible">

components/icons/ChannelMediaIcon.tsx

@@ -0,0 +1,17 @@
+export function ChannelMediaIcon({ size = 4 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 256 256"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={`w-${size} h-${size}`}
+    >
+      <path
+        fill="currentColor"
+        d="M155.51 24.81a8 8 0 0 0-8.42.88L77.25 80H32a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h45.25l69.84 54.31A8 8 0 0 0 160 224V32a8 8 0 0 0-4.49-7.19ZM32 96h40v64H32Zm112 111.64l-56-43.55V91.91l56-43.55Zm54-106.08a40 40 0 0 1 0 52.88a8 8 0 0 1-12-10.58a24 24 0 0 0 0-31.72a8 8 0 0 1 12-10.58ZM248 128a79.9 79.9 0 0 1-20.37 53.34a8 8 0 0 1-11.92-10.67a64 64 0 0 0 0-85.33a8 8 0 1 1 11.92-10.67A79.83 79.83 0 0 1 248 128Z"
+      />
+    </svg>
+  );
+}

components/icons/ChannelMessageIcon.tsx

@@ -1,4 +1,4 @@
-export default function ChannelMessageIcon({ size = '4' }) {
+export default function ChannelMessageIcon({ size = '4' }: { size?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

services/channels.service.ts

@@ -19,6 +19,7 @@ export async function getChannelsInServer(supabase: SupabaseClient<Database>, se
     .from('channels')
     .select('*')
     .eq('server_id', serverId)
+    .order('is_media', { ascending: true })
     .returns<Channel>();
 }