tags: iThome 鐵人賽 30天

影片卡片是顯示在首頁的預覽卡片頁面，要做的形式呢大概是有一張影片的預覽圖，與筆記的些許內容，至於影片標題的擷取就不在這次30天的專案內了，因為還要寫爬蟲或者運用Google API來抓取，怕會花太多時間~

YouTube影片縮圖

先來介紹YouTube影片的ID，每部影片都會有自己的ID並且不會重複。

如下方網址後面的?v=55UHCYe2q84中55UHCYe2q84就是此影片的ID

https://www.youtube.com/watch?v=55UHCYe2q84

而為甚麼需要這個ID呢？除了可以連結到影片外，要取得影片縮圖也需要此ID。

取得影片縮圖方法：

https://img.youtube.com/vi/${v}/hqdefault.jpg

以Joeman的對決來當範例 (東京版《Joe是要對決》日幣30000元的奢華壽喜燒對決日幣600元的平價壽喜燒！Ep127@徐海莉 Hailey@流川莉蘿 Rilo ch.)。

影片ID為Ga22mpTDS6A，所以縮圖網址是https://img.youtube.com/vi/Ga22mpTDS6A/hqdefault.jpg：

其中${v}只要替換成需要的影片ID就可以了！

卡片製作

了解完影片縮圖之後就可以來開始製作卡片啦！這裡要注意的是，我們的卡片是指單獨一張卡片 (Component)，但這個卡片是可以因倒入的資料不同，而有不同的呈現內容，達到Componet Reuse的效果！

卡片組成

• 圖片 (影片縮圖)
• 標題 (自定義)
• 點一下可以進入觀看影片和編輯標記

卡片的製作方式一樣使用MUI，這次使用的是Card

首先先在/src/components/內新增component，名稱是VideoCard.jsx：

import React from 'react'

export default function VideoCard(props) {
  return (
    <div>
        
    </div>
  )
}

再來把MUI的Card套用進去：

import React from 'react'
import { Card, CardMedia, CardContent, Typography } from '@mui/material'

export default function VideoCard(props) {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component="img"
        height="140"
        image="/static/images/cards/contemplative-reptile.jpg"
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
      </CardContent>
    </Card>
  )
}

之後先在App.js內引入稍微看一下目前的樣貌吧！

/src/App.js：

import './App.css';
import Header from './components/Header'
import React from 'react'
import VideoCard from './components/VideoCard';

function App() {

  return (
    <div className="App">
      <Header title="影片標記系統" />
      <VideoCard />
    </div>
  );
}

export default App;

目前樣貌：

再來處理圖片與標題，目前預設可以傳入的參數

再來來看看如何改成從props傳入內吧！

import React from 'react'
import { Card, CardMedia, CardContent, Typography } from '@mui/material'

export default function VideoCard(props) {
  const {v, title} = props

  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component="img"
        height="140"
        image={`https://img.youtube.com/vi/${v}/hqdefault.jpg`}
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {title}
        </Typography>
      </CardContent>
    </Card>
  )
}

這裡稍微說明一下字串加變數的寫法：

{`https://img.youtube.com/vi/${v}/hqdefault.jpg`}

用`包起來的字串內加入${}可以在裡面打js程式碼，所以加入變數v

之後在App.js內傳入變數：

<VideoCard
    v={"Ga22mpTDS6A"}
    title={"東京版《Joe是要對決》日幣30000元的奢華壽喜燒對決日幣600元的平價壽喜燒！Ep127@徐海莉 Hailey@流川莉蘿 Rilo ch."}
/>

呈現畫面：

大功告成！

後記

雖然完成了，但還有些地方還需要微調，例如圖片大小與文字太多的問題，我們要把文字受限在兩行內，多出來的用...表示，那就明天再繼續努力啦~

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)