Merge pull request #3 from maeda577/develop

v0.1.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "miraview",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "homepage": ".",
   "dependencies": {

src/ConfigView.tsx

@@ -128,15 +128,16 @@ function ConfigView(props: { onSave?: (savedConfig: MiraviewConfig) => void; }):
           </ListItem>
           <ListSubheader>全般</ListSubheader>
           <ListItem>
-            <ListItemText primary='選局ボタンのプロトコル' />
+            <ListItemText primary='リアルタイム視聴のプロトコル' />
             <ListItemIcon>
               <IconButton color='primary' onClick={ (event: React.MouseEvent<HTMLButtonElement>) => {
                 setPopoverMessage({
                   messages: [
-                    '番組ダイアログ下部にある選局ボタンの、リンク先プロトコルを指定します',
+                    'リアルタイム視聴へのリンクに使用するプロトコルを指定します',
+                    'リンクは番組ダイアログ下部にある選局ボタンと、番組表のチャンネル名に張られています',
                     '使用可能な文字は英数字と . + _ - です',
                     'デフォルト値はvlcです',
-                    '空欄にした場合、選局ボタンが無効になります',
+                    '空欄にした場合、リンクが無効になります',
                   ],
                   anchorEl: event.currentTarget
                 });

src/ProgramView.tsx

@@ -5,9 +5,8 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import Stack from '@mui/material/Stack';
 
-import ProgramViewDialog from './ProgramViewDialog';
 import ProgramViewTable from './ProgramViewTable';
-import type { MiraviewConfig, Program, Service, ProgramPair } from './types';
+import type { MiraviewConfig, Program, Service } from './types';
 
 // 番組情報を便利にまとめる 第1キーは日付の0時ちょうどのunixtime、第2キーはnetwork_idで第3キーはservice_id
 // service_id単一では重複する可能性があり、ネットワーク内では一意。ARIB TR-B15のTable 5-9に書いてある
@@ -89,8 +88,6 @@ function groupPrograms(programs?: Program[]): Map<number, Map<number, Map<number
 function ProgramView(props: { config: MiraviewConfig, programs?: Program[], services?: Service[] }): JSX.Element {
   // タブで選ばれている日付の0時ちょうどのunixtime
   const [currentDate, setCurrentDate] = React.useState<number>(new Date(Date.now() - (5 * 60 * 60 * 1000)).setHours(0, 0, 0, 0));
-  // クリックされた番組
-  const [focusProgram, setFocusProgram] = React.useState<ProgramPair | undefined>(undefined);
 
   // 番組情報一覧 第一キーは日付の0時ちょうどのunixtime、第二キーはnetwork_idで第三キーはservice_id
   const programs = React.useMemo(() => groupPrograms(props.programs), [props.programs]);
@@ -110,16 +107,11 @@ function ProgramView(props: { config: MiraviewConfig, programs?: Program[], serv
       </Tabs>
       <Box sx={{ overflow: 'auto' }}>
         <ProgramViewTable
+          config={ props.config }
           services={ props.services }
           programs={ programs.get(currentDate) }
-          onLinkClick={ setFocusProgram }
         />
       </Box>
-      <ProgramViewDialog
-        pgPair={ focusProgram }
-        config={ props.config }
-        onClose={ () => setFocusProgram(undefined) }
-      />
     </Stack>
   );
 }

src/ProgramViewTable.tsx

@@ -13,16 +13,28 @@ import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 
 import './ProgramViewTable.css';
-import type { Program, Service, ProgramPair } from './types';
+import ProgramViewDialog from './ProgramViewDialog';
+import type { MiraviewConfig, Program, Service, ProgramPair } from './types';
+
+function getStreamUrl(config: MiraviewConfig, service: Service) : string | undefined {
+  if (!config.streamProtocol) {
+    return undefined
+  }
+  const streamUrl = new URL(`/api/services/${service.id}/stream`, config.mirakcUri);
+  streamUrl.protocol = config.streamProtocol;
+  return streamUrl.href;
+}
 
 // 1日あたりの番組表のテーブル
 // servicesはその日の放送がなくても入っている
 // programsは実際にある放送だけが入っている前提 第1キーはnetwork_idで第2キーはservice_id
-function ProgramViewTable(props: { services?: Service[]; programs?: Map<number, Map<number, Program[]>>; onLinkClick: (program: ProgramPair) => void; }): JSX.Element {
+function ProgramViewTable(props: { config: MiraviewConfig; services?: Service[]; programs?: Map<number, Map<number, Program[]>>; }): JSX.Element {
   // 現在時刻の横棒のref
   const nowLineRef = React.useRef<HTMLDivElement>(null);
   // 現在時刻の横棒の高さ計算に使う時刻
   const [now, setNow] = React.useState(Date.now());
+  // クリックされた番組
+  const [focusProgram, setFocusProgram] = React.useState<ProgramPair | undefined>(undefined);
 
   React.useEffect(() => {
     // 1回だけ横棒までスクロールする
@@ -77,7 +89,11 @@ function ProgramViewTable(props: { services?: Service[]; programs?: Map<number,
             <TableCell className='_left_sticky hour_header _bordered'/>
             { filteredServices.map(srv => (
               <TableCell key={srv.id} className='channel_header _bordered'>
-                {srv.name}
+                {
+                  props.config.streamProtocol ?
+                    <Link color='inherit' underline='hover' href={ getStreamUrl(props.config, srv) }>{srv.name}</Link> :
+                    <React.Fragment>{srv.name}</React.Fragment>
+                }
               </TableCell>
             ))}
           </TableRow>
@@ -103,7 +119,7 @@ function ProgramViewTable(props: { services?: Service[]; programs?: Map<number,
                         prg.name &&
                         <Link component='button' color='inherit' underline='hover'
                           align='left' fontSize='0.85rem' lineHeight='1.5'
-                          onClick={() => props.onLinkClick({ program: prg, service: srv })}>
+                          onClick={() => setFocusProgram({ program: prg, service: srv })}>
                           { programTimeFormat.format(prg.startAt) + ' ' + prg.name }
                         </Link>
                       }
@@ -115,6 +131,11 @@ function ProgramViewTable(props: { services?: Service[]; programs?: Map<number,
           </TableRow>
         </TableBody>
       </Table>
+      <ProgramViewDialog
+        pgPair={ focusProgram }
+        config={ props.config }
+        onClose={ () => setFocusProgram(undefined) }
+      />
     </TableContainer>
   );
 }