├── .gitignore
├── static
    ├── favicon.ico
    ├── icons
    │   ├── android-chrome-192x192.png
    │   └── android-chrome-512x512.png
    └── manifest.json
├── src
    ├── polyfills.js
    ├── pwa.js
    ├── index.js
    ├── utils
    │   ├── event.js
    │   └── handle-url.js
    ├── router
    │   └── index.js
    ├── components
    │   ├── App.vue
    │   ├── SiteHeader.vue
    │   ├── Player.vue
    │   └── PromptVideo.vue
    └── views
    │   └── Home.vue
├── .editorconfig
├── poi.config.js
├── index.ejs
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | 
5 | # poi dist
6 | dist
7 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egoist/anii/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/static/icons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egoist/anii/HEAD/static/icons/android-chrome-192x192.png


--------------------------------------------------------------------------------
/static/icons/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egoist/anii/HEAD/static/icons/android-chrome-512x512.png


--------------------------------------------------------------------------------
/src/polyfills.js:
--------------------------------------------------------------------------------
1 | if (!window.Promise) {
2 |   window.Promise = require('promise-polyfill')
3 | }
4 | 
5 | Object.assign = require('object-assign')
6 | 


--------------------------------------------------------------------------------
/src/pwa.js:
--------------------------------------------------------------------------------
1 | import runtime from 'offline-plugin/runtime'
2 | 
3 | runtime.install({
4 |   onUpdateReady() {
5 |     runtime.applyUpdate()
6 |   }
7 | })
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './components/App.vue'
 3 | 
 4 | import router from './router'
 5 | 
 6 | new Vue({
 7 |   router,
 8 |   el: '#app',
 9 |   render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/src/utils/event.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export default new Vue({
 4 |   data: {
 5 |     loading: false
 6 |   },
 7 |   created() {
 8 |     this.$on('isLoading', state => {
 9 |       this.loading = state
10 |     })
11 |   }
12 | })
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | const Home = resolve => require(['../views/Home.vue'], resolve)
 7 | 
 8 | const router = new Router({
 9 |   routes: [{
10 |     path: '/',
11 |     component: Home
12 |   }]
13 | })
14 | 
15 | export default router
16 | 


--------------------------------------------------------------------------------
/src/utils/handle-url.js:
--------------------------------------------------------------------------------
 1 | export function parseVideoURL(video) {
 2 |   let src = video.src
 3 | 
 4 |   if (video.type === 'bilibili') {
 5 |     const matched = /(?:av)?([\d]+)/.exec(src)
 6 |     if (matched) {
 7 |       const id = matched[1]
 8 |       src = `https://api.prprpr.me/dplayer/video/bilibili?aid=${id}`
 9 |     }
10 |     return { src }
11 |   }
12 | 
13 |   if (!video.type) {
14 |     return { src }
15 |   }
16 | 
17 |   return video
18 | }
19 | 


--------------------------------------------------------------------------------
/static/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "anii",
 3 |   "short_name": "ANII",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/icons/android-chrome-192x192.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "/icons/android-chrome-512x512.png",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "start_url": "/",
17 |   "display": "standalone",
18 |   "background_color": "#000000",
19 |   "theme_color": "#4DBA87"
20 | }
21 | 


--------------------------------------------------------------------------------
/poi.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const pkg = require('./package')
 3 | 
 4 | module.exports = {
 5 |   entry: [
 6 |     'src/polyfills.js',
 7 |     'src/index.js'
 8 |   ],
 9 |   html: {
10 |     title: pkg.productName,
11 |     description: pkg.descrption,
12 |     template: path.join(__dirname, 'index.ejs')
13 |   },
14 |   postcss: {
15 |     plugins: [
16 |       // Your postcss plugins
17 |     ]
18 |   },
19 |   presets: [
20 |     require('poi-preset-bundle-report')(),
21 |     require('poi-preset-offline')({
22 |       pwa: './src/pwa.js', // Path to pwa runtime entry
23 |       pluginOptions: {
24 |         AppCache: false
25 |       } // Additional options for offline-plugin
26 |     })
27 |   ],
28 |   define: {
29 |     __VERSION__: pkg.version
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 7 |     <title><%= htmlWebpackPlugin.options.title %></title>
 8 | 
 9 |     
10 |     <link rel="manifest" href="/manifest.json">
11 |     <meta name="theme-color" content="#4DBA87">
12 |     
13 | 
14 |     <% if (htmlWebpackPlugin.options.description) { %>
15 |     <meta name="description" content="<%= htmlWebpackPlugin.options.description %>"/>
16 |     <% } %>
17 | 
18 |     <% for (var chunk of webpack.chunks) {
19 |         for (var file of chunk.files) {
20 |           if (file.match(/\.(js|css)$/)) { %>
21 |     <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
22 |   </head>
23 |   <body>
24 |     <noscript>
25 |       You need to enable JavaScript to run this app.
26 |     </noscript>
27 |     <div id="app"></div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/src/components/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <!-- CSS libraries -->
 8 | <style src="normalize.css/normalize.css"></style>
 9 | 
10 | <style lang="stylus">
11 |   body
12 |     font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
13 | 
14 |   .container
15 |     max-width: 1100px
16 |     margin: 0 auto
17 |     padding: 0 20px
18 | 
19 |   .button
20 |     border: 2px solid #222
21 |     padding: 6px 12px
22 |     border-radius: 5px
23 |     cursor: pointer
24 |     background-color: transparent
25 |     font-weight: 600
26 | 
27 |   .button:hover
28 |     background-color: #f9f9f9
29 | 
30 |   .button-shadow
31 |     background-color: #83ffcd
32 |     box-shadow: 2px 2px 0 #222
33 |     &:hover
34 |       box-shadow: 4px 4px 0 #222
35 |       background-color: @background-color
36 | 
37 |   .button-reverse
38 |     color: #ccc
39 |     border-color: @color
40 |     &:hover
41 |       background-color: #404040
42 | 
43 |   .button-large
44 |     padding: 10px 20px
45 | </style>
46 | 
47 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page">
 3 |     <site-header />
 4 |     <prompt-video />
 5 |     <player />
 6 |     <footer class="footer container">
 7 |       <strong>Under Development: <a href="https://github.com/egoist/anii">ANII</a> v{{ version }}</strong>
 8 |     </footer>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   import SiteHeader from '../components/SiteHeader.vue'
14 |   import Player from '../components/Player.vue'
15 |   import PromptVideo from '../components/PromptVideo.vue'
16 | 
17 |   import event from '../utils/event'
18 | 
19 |   export default {
20 |     name: 'app',
21 |     data() {
22 |       return {
23 |         version: __VERSION__
24 |       }
25 |     },
26 |     components: {
27 |       SiteHeader,
28 |       Player,
29 |       PromptVideo
30 |     },
31 |     mounted() {
32 |       const { src, type } = this.$route.query
33 |       if (src) {
34 |         event.$emit('switchVideo', { src, type })
35 |       }
36 |     }
37 |   }
38 | </script>
39 | 
40 | <style src="text-spinners/spinners.css"></style>
41 | 
42 | <style lang="stylus" scoped>
43 |   .footer
44 |     padding: 30px 0
45 |     a
46 |       color: #222
47 | </style>
48 | 
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "anii",
 4 |   "productName": "ANII",
 5 |   "description": "A modern web video player.",
 6 |   "version": "0.0.1",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "dev": "poi",
10 |     "build": "poi build",
11 |     "report": "poi build --bundle-report",
12 |     "serve": "serve dist --single",
13 |     "surge": "npm run build && surge -d anii.surge.sh -p dist",
14 |     "now": "now .",
15 |     "start": "serve dist"
16 |   },
17 |   "now": {
18 |     "alias": "anii"
19 |   },
20 |   "babel": {
21 |     "presets": [
22 |       "vue-app"
23 |     ]
24 |   },
25 |   "author": {
26 |     "name": "EGOIST",
27 |     "email": "0x142857@gmail.com"
28 |   },
29 |   "dependencies": {
30 |     "normalize.css": "^7.0.0",
31 |     "object-assign": "^4.1.1",
32 |     "offline-plugin": "^4.8.0",
33 |     "plyr": "^2.0.13",
34 |     "promise-polyfill": "^6.0.2",
35 |     "text-spinners": "^1.0.5",
36 |     "vue-router": "^2.5.3"
37 |   },
38 |   "devDependencies": {
39 |     "poi": "^8.0.0",
40 |     "poi-preset-bundle-report": "^1.0.1",
41 |     "poi-preset-offline": "^8.0.0",
42 |     "serve": "^3.1.0",
43 |     "stylus": "^0.54.5",
44 |     "stylus-loader": "^3.0.1",
45 |     "surge": "^0.19.0"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/SiteHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="header container">
 3 |     <h1 class="site-name">
 4 |       <router-link to="/">ANII</router-link>
 5 |       <span
 6 |         v-show="loading"
 7 |         class="loading beam">
 8 |       </span>
 9 |     </h1>
10 |     <input
11 |       type="file"
12 |       hidden="true"
13 |       ref="file"
14 |       accept="video/webm,video/ogg,video/mp4"
15 |       @change="handleSelectedFile">
16 |     <div class="actions">
17 |       <button @click="openFile" class="button">Open File</button>
18 |       <button @click="openURL" class="button button-shadow">Open URL</button>
19 |     </div>
20 |   </header>
21 | </template>
22 | 
23 | <script>
24 |   import event from '../utils/event'
25 | 
26 |   const URL = window.URL || window.webkitURL
27 | 
28 |   export default {
29 |     computed: {
30 |       loading() {
31 |         return event.loading
32 |       }
33 |     },
34 |     mounted() {
35 |       event.$on('openFile', this.openFile)
36 |     },
37 |     methods: {
38 |       openFile() {
39 |         this.$refs.file.click()
40 |       },
41 |       openURL() {
42 |         event.$emit('togglePromptVideo')
43 |       },
44 |       handleSelectedFile(e) {
45 |         const { value } = e.target
46 |         const file = this.$refs.file.files[0]
47 |         if (file && value) {
48 |           // Reset input[type=file]
49 |           // So that it will always trigger even if the file doesn't change
50 |           e.target.value = ''
51 |           const src = URL.createObjectURL(file)
52 |           this.$router.push({ query: { src } })
53 |         }
54 |       }
55 |     }
56 |   }
57 | </script>
58 | 
59 | <style lang="stylus" scoped>
60 |   .header
61 |     height: 60px
62 |     display: flex
63 |     align-items: center
64 |     justify-content: space-between
65 | 
66 |   .site-name
67 |     margin: 0
68 |     font-weight: 600
69 |     a
70 |       color: #222
71 |       text-decoration: none
72 | </style>
73 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ANII
 2 | 
 3 | An alternative web app to the awesome video player [IINA](https://lhc70000.github.io/iina/) (Obviously IINA is much more powerful)
 4 | 
 5 | As it's using HTML5 video tag, it only supports these formats: MP4, Ogg, WebM.
 6 | 
 7 | <a href="http://anii.surge.sh">
 8 |   <img 
 9 |   width="500"
10 |   src="https://ooo.0o0.ooo/2017/06/02/5931658e1e2fe.png" />
11 | </a>
12 | 
13 | You can visit https://anii.surge.sh for an offline version.
14 | 
15 | ## Commands
16 | 
17 | You can replace `yarn` with `npm run` here.
18 | 
19 | ```bash
20 | # build for production
21 | yarn build
22 | 
23 | # development mode
24 | yarn dev
25 | 
26 | # serve the bundled dist folder in production mode
27 | yarn serve
28 | ```
29 | 
30 | ## Polyfills
31 | 
32 | By default we only polyfill `window.Promise` and `Object.assign`. You can add more polyfills in `./src/polyfills.js`.
33 | 
34 | ## Code splitting
35 | 
36 | As webpack supports both [dynamic import](https://webpack.js.org/guides/code-splitting-async/#dynamic-import-import-) and [`require.ensure`](https://webpack.js.org/guides/code-splitting-async/#require-ensure-) syntax, we would recommend you to stick to `require.ensure` for now because of [performance issue](https://github.com/webpack/webpack/issues/4636).
37 | 
38 | ## Analyze bundle size
39 | 
40 | Run `yarn report` to get a report of bundle size which helps you:
41 | 
42 | - Realize what's really inside your bundle
43 | - Find out what modules make up the most of it's size
44 | - Find modules that got there by mistake
45 | - Optimize it!
46 | 
47 | 
48 | ## Progress Web App
49 | 
50 | Your app is now offline-ready (only in production bundle), which means you can visit it without network.
51 | 
52 | Here we use a default [manifest.json](./static/manifest.json) to configurure your pwa, for example, to enable [Add to Home Screen] feature on Android. It will be copied directly to `./dist/manifest.json`.
53 | 
54 | 
55 | For all the available options, please head to [poi-preset-offline](https://github.com/egoist/poi/tree/master/packages/poi-preset-offline#api).
56 | 
57 | ---
58 | 
59 | This project is generated from [template-vue](https://github.com/egoist/template-vue).
60 | 


--------------------------------------------------------------------------------
/src/components/Player.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cinema" :class="{nobody: !init}">
 3 |     <div class="player">
 4 |       <button
 5 |         v-if="!init"
 6 |         class="button button-reverse button-large button-open"
 7 |         @click="triggerOpenFile">
 8 |         Open File
 9 |       </button>
10 |       <video id="js-player" class="video" ref="video"></video>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   import plyr from 'plyr'
17 | 
18 |   import event from '../utils/event'
19 |   import { parseVideoURL } from '../utils/handle-url'
20 | 
21 |   export default {
22 |     name: 'player',
23 |     data() {
24 |       return {
25 |         init: false
26 |       }
27 |     },
28 |     mounted() {
29 |       event.$on('switchVideo', video => this.switchVideo(video))
30 |     },
31 |     watch: {
32 |       '$route.query': {
33 |         deep: true,
34 |         handler({ src, type }) {
35 |           if (src) {
36 |             const video = { src }
37 |             if (type) {
38 |               video.type = type
39 |             }
40 |             this.switchVideo(video)
41 |           } else {
42 |             this.player.destroy()
43 |             this.init = false
44 |           }
45 |         }
46 |       }
47 |     },
48 |     methods: {
49 |       initPlayer() {
50 |         if (this.init) return
51 | 
52 |         this.init = true
53 |         this.player = plyr.setup(document.getElementById('js-player'), {
54 |           // debug: true
55 |           // autoplay: true
56 |         })[0]
57 |         this.player.on('ready', () => {
58 |           event.$emit('isLoading', false)
59 |           this.player.play()
60 |         })
61 |       },
62 |       switchVideo(video) {
63 |         this.initPlayer()
64 |         event.$emit('isLoading', true)
65 |         this.player.source({
66 |           type: 'video',
67 |           sources: [parseVideoURL(video)]
68 |         })
69 |         this.$router.push({ query: video })
70 |       },
71 |       triggerOpenFile() {
72 |         event.$emit('openFile')
73 |       }
74 |     }
75 |   }
76 | </script>
77 | 
78 | <style src="plyr/dist/plyr.css"></style>
79 | 
80 | <style lang="stylus" scoped>
81 |   .cinema
82 |     background-color: #000
83 | 
84 |   .player
85 |     max-width: 900px
86 |     margin: 0 auto
87 |     height: 100%
88 |     position: relative
89 | 
90 |   @media screen and (min-width: 768px)
91 |     .cinema
92 |       min-height: 400px
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/components/PromptVideo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="prompt-video" v-show="isOpen">
  3 |     <div class="prompt-tabs container">
  4 |       <div
  5 |         class="prompt-tab"
  6 |         :class="{active: isActive('url')}"
  7 |         @click="active = 'url'">
  8 |         URL
  9 |       </div>
 10 |       <div
 11 |         class="prompt-tab"
 12 |         :class="{active: isActive('youtube')}"
 13 |         @click="active = 'youtube'">
 14 |         YouTube
 15 |       </div>
 16 |       <div
 17 |         class="prompt-tab"
 18 |         :class="{active: isActive('vimeo')}"
 19 |         @click="active = 'vimeo'">
 20 |         Vimeo
 21 |       </div>
 22 |       <div
 23 |         class="prompt-tab"
 24 |         :class="{active: isActive('bilibili')}"
 25 |         @click="active = 'bilibili'">
 26 |         BiliBili
 27 |       </div>
 28 |     </div>
 29 | 
 30 |     <div class="prompt-content container">
 31 |       <form @submit.prevent="handleSubmit">
 32 |         <input type="text" v-model="src" autofocus="true" />
 33 |         <button type="submit">Go</button>
 34 |       </form>
 35 |       <div class="prompt-tip" v-if="active === 'bilibili'">
 36 |         *You can use full URL like <code @click="applyExampleSrc">http://www.bilibili.com/video/av10983593/</code> or ID: <code @click="applyExampleSrc">10983593</code>, <code @click="applyExampleSrc">av10983593</code>
 37 |       </div>
 38 |       <div class="prompt-tip" v-else-if="active === 'youtube'">
 39 |         *You can use full URL like <code @click="applyExampleSrc">https://www.youtube.com/watch?v=3DsmjLTKLdA</code> or ID: <code @click="applyExampleSrc">3DsmjLTKLdA</code>
 40 |       </div>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 |   import event from '../utils/event'
 48 | 
 49 |   export default {
 50 |     data() {
 51 |       return {
 52 |         isOpen: false,
 53 |         active: 'url',
 54 |         src: ''
 55 |       }
 56 |     },
 57 |     mounted() {
 58 |       event.$on('togglePromptVideo', () => {
 59 |         this.isOpen = !this.isOpen
 60 |       })
 61 |     },
 62 |     methods: {
 63 |       close() {
 64 |         this.isOpen = false
 65 |       },
 66 |       isActive(name) {
 67 |         return name === this.active
 68 |       },
 69 |       applyExampleSrc(e) {
 70 |         this.src = e.target.textContent
 71 |       },
 72 |       handleSubmit() {
 73 |         switch (this.active) {
 74 |           case 'url':
 75 |             this.$router.push({
 76 |               query: { src: this.src }
 77 |             })
 78 |             break
 79 |           case 'youtube':
 80 |           case 'vimeo':
 81 |             this.$router.push({
 82 |               query: {
 83 |                 src: this.src,
 84 |                 type: this.active
 85 |               }
 86 |             })
 87 |             break
 88 |           case 'bilibili':
 89 |             this.$router.push({
 90 |               query: {
 91 |                 src: this.src,
 92 |                 type: this.active
 93 |               }
 94 |             })
 95 |             break
 96 |         }
 97 |         this.close()
 98 |       }
 99 |     }
100 |   }
101 | </script>
102 | 
103 | <style lang="stylus" scoped>
104 |   .prompt-video
105 |     padding: 20px 0
106 |     background-color: #f0f0f0
107 | 
108 |   .prompt-tabs
109 |     display: flex
110 |     .prompt-tab
111 |       color: #999
112 |       border: 2px solid @color
113 |       border-radius: 5px
114 |       margin-right: 5px
115 |       padding: 3px 8px
116 |       font-size: 12px
117 |       cursor: pointer
118 |       &.active
119 |         color: #222
120 |         border-color: @color
121 |         background-color: white
122 | 
123 |   .prompt-content
124 |     margin-top: 20px
125 | 
126 |   .prompt-tip
127 |     margin-top: 10px
128 |     color: #999
129 |     font-size: 14px
130 |     code
131 |       background-color: white
132 |       border: 1px solid #666
133 |       padding: 2px 5px
134 |       font-size: 12px
135 |       border-radius: 5px
136 |       cursor: pointer
137 | </style>
138 | 


--------------------------------------------------------------------------------