Merge pull request #137 from cniajp/add-youtube-and-slide-session-page

PEK2024 のセッションページに youtube の embed とスライドのリンクを追加
cniajp · Aug 16, 2024 · cff627a · cff627a
2 parents c441ced + de1203e
commit cff627a
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/src/pages/pek2024/sessions/[id].astro b/src/pages/pek2024/sessions/[id].astro
@@ -9,6 +9,7 @@ import { fetchTags } from '../../../utils/fetchTags';
 import { getAffiliation, getJobTitle, getSpeakerProfile, getTalkAbstract } from '../../../utils/pek2024/fortee';
 import { type PEK2024ProposalList } from '../../../types';
 import TeamTopologiesSeminarBanner from '~/components/pek2024/TeamTopologiesSeminarBanner.astro';
+import { Icon } from 'astro-icon/components';
 
 export async function getStaticPaths() {
   const { data } = await axios.get<PEK2024ProposalList>(
@@ -79,14 +80,13 @@ const talkAbstract = getTalkAbstract(session.abstract);
               })}
             </div>
 
-            {'videoUrl' in session && session.videoUrl && (
+            {'video_url' in session && session.video_url && (
               <div class="relative flex flex-col min-w-0 break-words w-full mb-2">
-                <div class="px-4 pt-5 flex-auto">
-                  <div class="text-sm">登壇動画</div>
+                <div class="flex-auto">
                   <div>
                     <iframe
                       class="aspect-video min-w-2xl w-full static bottom-0"
-                      src={(session.videoUrl ?? '').toString()}
+                      src={(session.video_url ?? '').toString()}
                       title="YouTube video player"
                       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                       allowfullscreen
@@ -96,18 +96,17 @@ const talkAbstract = getTalkAbstract(session.abstract);
               </div>
             )}
 
-            {'documentUrl' in session && session.documentUrl && (
+            {'slide_url' in session && session.slide_url && (
               <div class="relative flex flex-col min-w-0 break-words w-full mb-2">
-                <div class="px-4 pt-5 flex-auto">
-                  <div class="text-sm">登壇資料</div>
-                  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
-                    <iframe
-                      style="position: absolute; top:0; left: 0; width: 100%; height: 100%; border:0;"
-                      src={(session.documentUrl ?? '').toString()}
-                      title="Document viewer"
-                      allowfullscreen
-                    />
-                  </div>
+                <div class="flex-auto">
+                  <a href={session.slide_url as string} target="_blank" rel="noopener noreferrer">
+                    <button
+                      class="bg-themeColor-orange hover:bg-themeColor-yellow text-white font-bold py-2 px-4 rounded inline-flex items-center"
+                    >
+                      スライドを見る
+                      <Icon name="tabler:external-link" class="w-4 h-4 ml-2" />
+                    </button>
+                  </a>
                 </div>
               </div>
             )}
@@ -179,6 +178,7 @@ const talkAbstract = getTalkAbstract(session.abstract);
               </div>
             </div>
 
+
             <SocialShare
               url={Astro.request.url}
               text={session.title}