feat: view file

BREAKING CHANGE: view

fix #111

src/pages/music/index.jsx

@@ -1,15 +1,22 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import FixTabPanel from '@stateless/FixTabPanel'
 import MusicPlayer from '@container/musicPlayer/index'
 import SongCard from '@container/musicPlayer/SongCard'
 import songData from '@container/musicPlayer/songData/song'
 
-const Music = () => (
-  <FixTabPanel>
-    <h3>Music Player</h3>
-    <SongCard song={songData} />
-    <MusicPlayer />
-  </FixTabPanel>
-)
+const Music = () => {
+  const audioRef = useRef(null)
+  return (
+    <FixTabPanel>
+      <h3>Music Player</h3>
+      {/* <audio ref={audioRef} controls controlsList="nodownload" style={{ width: '100%' }}>
+        <track kind="captions" />
+        <source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mpeg" />
+      </audio> */}
+      <SongCard song={songData} />
+      <MusicPlayer />
+    </FixTabPanel>
+  )
+}
 
 export default Music

src/pages/reactPdf/index.jsx

@@ -24,18 +24,15 @@ function ReactPdf() {
     setScale((prevScale) => Math.min(Math.max(prevScale + delta, 0.5), 2.0))
   }
 
+  const httpsUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
   return (
     <div className="min-h-screen bg-gray-100 flex flex-col">
       <header className="bg-blue-600 text-white p-4">
         <h1 className="text-2xl font-bold">React PDF Viewer</h1>
       </header>
       <main className="flex-grow container mx-auto p-4 flex flex-col items-center">
         <div className="bg-white rounded-lg shadow-md p-4 mb-4 w-full max-w-3xl">
-          <Document
-            file="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-            onLoadSuccess={onDocumentLoadSuccess}
-            className="flex justify-center"
-          >
+          <Document file={httpsUrl} onLoadSuccess={onDocumentLoadSuccess} className="flex justify-center">
             <Page pageNumber={pageNumber} scale={scale} />
           </Document>
         </div>
@@ -65,6 +62,7 @@ function ReactPdf() {
           </button>
         </div>
       </main>
+      {/* <embed type="application/pdf" src={`${httpsUrl}`} key={`${httpsUrl}`} width="100%" height="600px" />; */}
     </div>
   )
 }

src/pages/video/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import FixTabPanel from '@stateless/FixTabPanel'
 
 import VideoJS from '@stateless/Video'
 
 const MyVideo = () => {
-  const playerRef = React.useRef(null)
+  const playerRef = useRef(null)
+  const videoRef = useRef(null)
 
   const videoJsOptions = {
     autoplay: true,
@@ -30,6 +31,10 @@ const MyVideo = () => {
 
   return (
     <FixTabPanel>
+      <video ref={videoRef} controls muted controlsList="nodownload" style={{ width: 900 }}>
+        <track kind="captions" />
+        <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
+      </video>
       <div style={{ width: 900 }}>
         <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
       </div>