issue #2: video playback sorted but audio playback's a headache

Author: Codexgrey

nasa-lookup-cc/src/components/AssetDetail.css

@@ -25,13 +25,27 @@
 
 
 .asset-media {
-  width: 100%;              /* full width */
+  width: 100%; /* full width */
+  max-width: 600px;              
   max-height: 500px;        /* maintain aspect ratio */
   object-fit: cover;
   border-radius: 10px;
   margin-bottom: 20px;
 }
 
+.asset-video {
+  width: 100%;
+  max-width: 600px;
+  border-radius: 10px;
+}
+
+.asset-audio {
+  width: 100%;
+  max-width: 400px;
+  display: block;
+  margin-top: 10px;
+}
+
 
 .back-button {
   display: inline-block;
@@ -48,7 +62,7 @@
 }
 
 .back-button:hover {
-    background-color: white;
-    color: #007bff;
-    border: 1px solid #007bff;
+  background-color: white;
+  color: #007bff;
+  border: 1px solid #007bff;
 }

nasa-lookup-cc/src/components/AssetDetail.js

@@ -5,13 +5,14 @@ import "./AssetDetail.css";
 
 
 // component to display details of a selected NASA asset
-    // fetching asset dynamically, no need for {asset}
+    // fetching asset dynamically via useParams 
 const AssetDetail = () => {   
-    // get asset ID from URL (url parameter)
+    // get asset id from URL (url parameter - nasa_id: /asset/nasa_id)
     const { id } = useParams(); 
     const [asset, setAsset] = useState(null);
     const navigate = useNavigate();
     const location = useLocation();
+    const [mediaUrl, setMediaUrl] = useState("");  // store media url
 
     useEffect(() => {
         const fetchAsset = async () => {
@@ -20,6 +21,20 @@ const AssetDetail = () => {
                 // set the first item found
                 setAsset(response.data.collection.items[0]); 
 
+                // fetch video/audio file URL
+                const mediaResponse = await axios.get(`https://images-api.nasa.gov/asset/${id}`);
+                const mediaItems = mediaResponse.data.collection.items;
+                //console.log("Media Items:", mediaItems);
+                
+                // find the first available MP4 (video) or MP3, m4a (audio) file
+                const playback = mediaItems.find(item =>
+                    item.href.endsWith(".mp4") || item.href.endsWith(".mp3") || item.href.endsWith(".m4a")
+                );
+
+                if (playback) {
+                    setMediaUrl(playback.href); 
+                }
+
             }   catch (error) {
                 console.error("Error fetching asset details", error);
             }
@@ -32,26 +47,55 @@ const AssetDetail = () => {
     const queryParams = new URLSearchParams(location.search);
     const storedPage = queryParams.get("page") || localStorage.getItem("currentPage") || "1";
 
-    // debug storedPage
-    //console.log(`Navigating back to page: ${storedPage}`);
-
     const handleBack = () => {
         navigate(`/?page=${storedPage}`); // ,{replace: true}
     };
+    // debug storedPage
+    //console.log(`Navigating back to page: ${storedPage}`);
 
     if (!asset) return <div className="asset-detail-container">Loading...</div>;
+    const mediaType = asset.data?.[0]?.media_type || "unknown";
+
+    // limit description text
+    const limTxt = (text, maxLength) => {
+        if (!text) return ""; 
+        return text.length > maxLength ? text.slice(0, maxLength) + " ..." : text;
+    };
+
 
     return (
         <div className="asset-detail-container">
             {/* back button */}
             <button className="back-button" onClick={handleBack}> Back </button>
-            <h3 className="asset-title">{asset.data[0].title}</h3>              {/* display asset title */}
-            <p className="asset-description">{asset.data[0].description}</p>    {/* display asset description */}
+            {/* display asset title, description */}
+            <h3 className="asset-title">{asset.data[0].title}</h3>              
+            <p className="asset-description">{limTxt(asset.data[0].description, 1250)}</p> 
 
-            {/* render image if asset contains media links */}
-            {asset.links && ( 
-                // image URL from API response & Alt text for accessibility                  
-                <img src={asset.links[0].href} alt={asset.data[0].title} className="asset-media" />
+            {/* render media based on type */}
+            {asset.links && asset.links[0] && (
+                <>
+                    { mediaType === "image" && ( 
+                        <img src={asset.links[0].href} alt={asset.data[0].title} className="asset-media" />
+                    )}
+
+                    { mediaType === "video" && mediaUrl && ( 
+                        <video controls className="asset-video"> 
+                            <source src={mediaUrl} type="video/mp4" />
+                            It seems your browser does not support video elements
+                        </video>
+                    )}
+
+                    { mediaType === "audio" && mediaUrl && (
+                        <audio controls className="asset-audio">
+                            <source src={mediaUrl} type={mediaUrl.endsWith(".mp3") ? "audio/mpeg" : "audio/mp4"} />
+                            It seems your browser does not support audio elements
+                        </audio>
+                    )}
+
+                    {!mediaUrl && (mediaType === "video" || mediaType === "audio") && (
+                        <p>Media file not available.</p>
+                    )}
+                </>              
             )}
         </div>
     );
@@ -63,6 +107,11 @@ export default AssetDetail;
 
 
 
+// const {id} = useParams; 
+/*
+    extract url params from react router
+    example URL	/asset/56789 → id = "56789"
+*/