[ { "path": ".babelrc", "content": " {\n \"presets\": [\n \"@babel/env\"\n ]\n }" }, { "path": ".gitignore", "content": "/node_modules\r\nyarn*\r\n.DS_Store\r\n/example\r\n/dist\r\n/lib" }, { "path": ".npmignore", "content": "example/\n\nsrc/example/" }, { "path": "LICENSE", "content": "The MIT License (MIT)\r\n\r\nCopyright (c) 2016 Corps\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy\r\nof this software and associated documentation files (the \"Software\"), to deal\r\nin the Software without restriction, including without limitation the rights\r\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\ncopies of the Software, and to permit persons to whom the Software is\r\nfurnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all\r\ncopies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\r\nSOFTWARE.\r\n" }, { "path": "index.html", "content": "" }, { "path": "package.json", "content": "{\n \"name\": \"cplayer\",\n \"version\": \"3.2.2\",\n \"description\": \"A beautiful and clean WEB Music Player by HTML5.\",\n \"main\": \"./dist/cplayer.js\",\n \"scripts\": {\n \"clean\": \"rimraf ./dist && rimraf ./lib && rimraf ./example\",\n \"dev\": \"webpack-dev-server --inline --progress\",\n \"build\": \"npm run clean && tsc && webpack --config webpack.config.example.js && webpack --config webpack.config.prod.js && npm run build:noview\",\n \"build:noview\": \"cross-env noview=true suffix=\\\"-noview\\\" webpack --config webpack.config.prod.js\"\n },\n \"keywords\": [\n \"cPlayer\",\n \"html5\",\n \"audio\",\n \"music\",\n \"player\",\n \"es6\",\n \"cplayer\"\n ],\n \"browserslist\": [\n \"> 1%\",\n \"Last 2 versions\",\n \"IE 10\"\n ],\n \"maintainers\": [\n {\n \"name\": \"Corps\",\n \"email\": \"zsq01@live.com\",\n \"web\": \"https://corps.set-fire.com\"\n }\n ],\n \"contributors\": [\n {\n \"name\": \"Corps\",\n \"email\": \"zsq01@live.com\",\n \"web\": \"https://corps.set-fire.com\"\n }\n ],\n \"bugs\": \"zsq01@live.com\",\n \"license\": \"MIT\",\n \"repository\": \"https://github.com/MoePlayer/cPlayer\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.8.3\",\n \"@babel/plugin-transform-runtime\": \"^7.8.3\",\n \"@babel/preset-env\": \"7.8.3\",\n \"@types/node\": \"^13.1.6\",\n \"@types/wicg-mediasession\": \"^1.0.3\",\n \"@types/highlight.js\": \"^9.12.3\",\n \"highlight.js\": \"^9.17.1\",\n \"autoprefixer\": \"^9.7.3\",\n \"babel-loader\": \"^8.0.6\",\n \"copy-webpack-plugin\": \"^5.1.1\",\n \"cross-env\": \"^6.0.3\",\n \"css-loader\": \"^3.4.2\",\n \"file-loader\": \"^5.0.2\",\n \"html-loader\": \"^0.5.5\",\n \"html-webpack-plugin\": \"^3.2.0\",\n \"node-sass\": \"^4.13.0\",\n \"postcss\": \"^7.0.26\",\n \"postcss-loader\": \"^3.0.0\",\n \"raw-loader\": \"^4.0.0\",\n \"rimraf\": \"^3.0.0\",\n \"sass-loader\": \"^8.0.2\",\n \"style-loader\": \"^1.1.2\",\n \"ts-loader\": \"^6.2.1\",\n \"typescript\": \"^3.7.4\",\n \"url-loader\": \"^3.0.0\",\n \"webpack\": \"^4.41.5\",\n \"webpack-bundle-analyzer\": \"^3.6.0\",\n \"webpack-cli\": \"^3.3.10\",\n \"webpack-dev-server\": \"^3.10.1\"\n },\n \"typings\": \"./lib/index.d.ts\",\n \"dependencies\": {}\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n plugins: [\n require('autoprefixer')\n ]\n}" }, { "path": "readme-zh-CN.md", "content": "# cPlayer\n\n[![](https://badge.fury.io/js/cplayer.svg)](https://www.npmjs.com/package/cplayer) [![GitHub stars](https://img.shields.io/github/stars/MoePlayer/cPlayer.svg?style=social&label=Star&style=plastic)](https://github.com/MoePlayer/cPlayer) ![](http://img.badgesize.io/https://raw.githubusercontent.com/MoePlayer/cPlayer/master/dist/cplayer.js?compression=gzip)\n\n![](./previews.png)\n\nA beautiful and clean WEB Music Player by HTML5. [demo here](http://cplayer.js.org/).\n\n# Feature\n\n* 歌词显示\n* 多歌曲播放列表\n* 三种播放模式 单曲循环 列表循环 随机播放\n* 专为触控优化的界面\n* 模块化 定制性\n* [Media Session 支持](https://developers.google.com/web/updates/2017/02/media-session)\n\n# Quick Start\n\n``` html\n
\n\n\n\n```\n\n## webpack\n\n```\nnpm install cplayer --save\n```\n\n```\nimport cplayer from 'cplayer';\n\nnew cplayer({\n ...\n})\n```\n\n# 相关项目\n\n[hexo-tag-cplayer](https://github.com/EYHN/hexo-tag-cplayer)\n\n# Option\n\n|OPTION|default content|description|\n|:-----|:-------------:|:----------|\n|element|`document.body`|注入播放器的目标元素。|\n|playlist|`[]`|播放列表。|\n|zoomOutKana|`false`|日语优化，缩小显示歌词中的假名。|\n|playmode|`listloop`|默认播放模式。|\n|volume|`1`|默认音量|\n|point|`0`|开始播放的歌曲索引。|\n|showPlaylist|`false`|显示播放列表，而不是当前歌曲信息。|\n|autoplay|`false`|自动播放（移动端不可用）。|\n|width|`''`|播放器宽度。|\n|size|`12px`|播放器尺寸。|\n|style|`''`|附加的css样式。|\n|shadowDom|`'true'`|启用 [shadow DOM](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM)。|\n|showPlaylistButton|`'true'`|显示播放列表按钮|\n|dropDownMenuMode|`'bottom'`|菜单（播放列表和歌曲信息）的显示模式， ‘bottom’ 底部、 'top' 顶部、 'none' 不显示|\n\n# Apis\n\n- `cplayer.mode` 播放模式 目前支持3种播放模式。\n - `listloop` 列表循环\n - `singlecycle` 单曲循环\n - `listrandom` 列表随机播放\n ```\n cplayer.mode //获取当前播放模式\n\n cplayer.mode = 'listloop' //设置当前播放模式为列表循环\n ```\n- `cplayer.volume` 音量 0.0 ~ 1.0。\n- `cplayer.playlist` 只读 获取当前播放列表。\n- `cplayer.nowplay` 只读 获取当前正在播放的歌曲。\n- `cplayer.nowplaypoint` 只读 获取当前正在播放的歌曲在播放列表中的索引。\n- `cplayer.played` 只读 是否正在播放。\n- `cplayer.paused` 只读 是否已经暂停。\n- `cplayer.toggleMode()` 切换播放模式 按 listloop > singlecycle > listrandom 的顺序\n- `cplayer.setMode(playmode: string)` 设置播放模式与修改 `cplayer.mode` 等效。\n- `cplayer.getMode()` 获取播放模式与获取 `cplayer.mode` 等效。\n- `cplayer.play()` 开始播放\n- `cplayer.pause()` 暂停播放\n- `cplayer.to(id: number)` 跳转到指定曲目 id:歌曲的索引\n- `cplayer.next()` 下一首\n- `cplayer.prev()` 上一首\n- `cplayer.togglePlayState()` 切换播放状态，暂停 > 播放，播放 > 暂停。\n- `cplayer.add(item: IAudioItem)` 添加歌曲。\n- `cplayer.remove(item: IAudioItem)` 删除歌曲。\n- `cplayer.setVolume()` 设置音量与修改 `cplayer.volume` 等效。\n- `cplayer.destroy()` 销毁播放器。\n- `cplayer.view.getRootElement()` 获取 `` 元素。\n- `cplayer.view.showInfo()` 关闭播放列表，显示当前歌曲信息。\n- `cplayer.view.showPlaylist()` 显示播放列表。\n- `cplayer.view.toggleDropDownMenu()` 切换播放列表，关闭 > 打开，打开 > 关闭。\n\n### Event\n\n- `started`: 每首歌开始时触发，此时已经开始播放。\n- `ended`: 歌曲播放到末尾时触发\n- `play`: 开始播放时触发\n- `pause`: 暂停播放时触发\n\n> `play 事件` 和 `pause 事件` 必定交替触发。\n> 需要注意的是上一首歌结束自动\b切换到下一首时不会触发 \u001c`play 事件`, \b但会触发 `started 事件` 和 `openaudio 事件`。\n\n- `playmodechange`: `play 事件` 和 `pause 事件` 的结合体\n- `openaudio`: 打开音频时触发，但此时还不一定有音频数据。\n- `volumechange`: 音量被改变时触发\n- `timeupdate`: 更新播放时间\n\n## 常见问题\n\n
如何播放网易云上的音乐？
\n\n\n### 在 `cplayer.js` 之后执行以下脚本\n\n``` javascript\ncplayer.prototype.add163 = function add163(id) {\n if (!id) throw new Error(\"Unable Property.\");\n return fetch(\"https://music.huaji8.top/?id=\" + id).then(function(res){return res.json()}).then(function(data){\n let obj = {\n name: data.info.songs[0].name,\n artist: data.info.songs[0].ar.map(function(ar){ return ar.name }).join(','),\n poster: data.pic.url,\n lyric: data.lyric.lyric,\n sublyric: data.lyric.tlyric,\n src: data.url.url,\n album: data.info.songs[0].al.name\n }\n this.add(obj);\n return obj;\n }.bind(this))\n}\n```\n\n### 使用:\n\n``` javascript\nplayer.add163(12345678) //加入网易云id为 12345678 的歌曲\n```\n\n
\n\n\n
我只需要一个封装好的 audio api，不想要 UI ？
\n\n`dist` 文件夹中有 `cplayer-noview.js` 是去 UI 版的 cplayer。\n\n
" }, { "path": "readme.md", "content": "# cPlayer\n\n[![](https://badge.fury.io/js/cplayer.svg)](https://www.npmjs.com/package/cplayer) [![GitHub stars](https://img.shields.io/github/stars/MoePlayer/cPlayer.svg?style=social&label=Star&style=plastic)](https://github.com/MoePlayer/cPlayer) ![](http://img.badgesize.io/https://raw.githubusercontent.com/MoePlayer/cPlayer/master/dist/cplayer.js?compression=gzip)\n\n![](./previews.png)\n\nA beautiful and clean WEB Music Player by HTML5. [demo here](http://cplayer.js.org/).\n\n# Feature\n\n* Lyrics display\n* Playlists\n* Three play modes, Single cycle, list loop, random play\n* Designed for touch devices\n* Modular Customizable\n* [Media Session Support](https://developers.google.com/web/updates/2017/02/media-session)\n\n# Quick Start\n\n``` html\n
\n\n\n\n```\n\n## webpack\n\n```\nnpm install cplayer --save\n```\n\n```\nimport cplayer from 'cplayer';\n\nnew cplayer({\n ...\n})\n```\n\n# 相关项目\n\n- [hexo-tag-cplayer](https://github.com/EYHN/hexo-tag-cplayer)\n- [vue-player](https://github.com/adnasa/vue-cplayer)\n- [react-cplayer](https://github.com/Fallenhh/react-cplayer)\n\n# Option\n\n|OPTION|default content|description|\n|:-----|:-------------:|:----------|\n|element|`document.body`|注入播放器的目标元素。|\n|playlist|`[]`|播放列表。|\n|zoomOutKana|`false`|日语优化，缩小显示歌词中的假名。|\n|playmode|`listloop`|默认播放模式。|\n|volume|`1`|默认音量|\n|point|`0`|开始播放的歌曲索引。|\n|showPlaylist|`false`|显示播放列表，而不是当前歌曲信息。|\n|autoplay|`false`|自动播放（移动端不可用）。|\n|width|`''`|播放器宽度。|\n|size|`12px`|播放器尺寸。|\n|style|`''`|附加的css样式。|\n|shadowDom|`'true'`|启用 [shadow DOM](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM)。|\n|showPlaylistButton|`'true'`|显示播放列表按钮|\n|dropDownMenuMode|`'bottom'`|菜单（播放列表和歌曲信息）的显示模式， ‘bottom’ 底部、 'top' 顶部、 'none' 不显示|\n\n# Apis\n\n- `cplayer.mode` 播放模式 目前支持3种播放模式。\n - `listloop` 列表循环\n - `singlecycle` 单曲循环\n - `listrandom` 列表随机播放\n ```\n cplayer.mode //获取当前播放模式\n\n cplayer.mode = 'listloop' //设置当前播放模式为列表循环\n ```\n- `cplayer.volume` 音量 0.0 ~ 1.0。\n- `cplayer.playlist` 只读 获取当前播放列表。\n- `cplayer.nowplay` 只读 获取当前正在播放的歌曲。\n- `cplayer.nowplaypoint` 只读 获取当前正在播放的歌曲在播放列表中的索引。\n- `cplayer.played` 只读 是否正在播放。\n- `cplayer.paused` 只读 是否已经暂停。\n- `cplayer.toggleMode()` 切换播放模式 按 listloop > singlecycle > listrandom 的顺序\n- `cplayer.setMode(playmode: string)` 设置播放模式与修改 `cplayer.mode` 等效。\n- `cplayer.getMode()` 获取播放模式与获取 `cplayer.mode` 等效。\n- `cplayer.play()` 开始播放\n- `cplayer.pause()` 暂停播放\n- `cplayer.to(id: number)` 跳转到指定曲目 id:歌曲的索引\n- `cplayer.next()` 下一首\n- `cplayer.prev()` 上一首\n- `cplayer.togglePlayState()` 切换播放状态，暂停 > 播放，播放 > 暂停。\n- `cplayer.add(item: IAudioItem)` 添加歌曲。\n- `cplayer.remove(item: IAudioItem)` 删除歌曲。\n- `cplayer.setVolume()` 设置音量与修改 `cplayer.volume` 等效。\n- `cplayer.destroy()` 销毁播放器。\n- `cplayer.view.getRootElement()` 获取 `` 元素。\n- `cplayer.view.showInfo()` 关闭播放列表，显示当前歌曲信息。\n- `cplayer.view.showPlaylist()` 显示播放列表。\n- `cplayer.view.toggleDropDownMenu()` 切换播放列表，关闭 > 打开，打开 > 关闭。\n\n### Event\n\n- `started`: 每首歌开始时触发，此时已经开始播放。\n- `ended`: 歌曲播放到末尾时触发\n- `play`: 开始播放时触发\n- `pause`: 暂停播放时触发\n\n> `play 事件` 和 `pause 事件` 必定交替触发。\n> 需要注意的是上一首歌结束自动\b切换到下一首时不会触发 \u001c`play 事件`, \b但会触发 `started 事件` 和 `openaudio 事件`。\n\n- `playmodechange`: `play 事件` 和 `pause 事件` 的结合体\n- `openaudio`: 打开音频时触发，但此时还不一定有音频数据。\n- `volumechange`: 音量被改变时触发\n- `timeupdate`: 更新播放时间\n\n## 常见问题\n\n
如何播放网易云上的音乐？
\n\n\n### 在 `cplayer.js` 之后执行以下脚本\n\n``` javascript\ncplayer.prototype.add163 = function add163(id) {\n if (!id) throw new Error(\"Unable Property.\");\n return fetch(\"https://music.huaji8.top/?id=\" + id).then(function(res){return res.json()}).then(function(data){\n let obj = {\n name: data.info.songs[0].name,\n artist: data.info.songs[0].ar.map(function(ar){ return ar.name }).join(','),\n poster: data.pic.url,\n lyric: data.lyric.lyric,\n sublyric: data.lyric.tlyric,\n src: data.url.url,\n album: data.info.songs[0].al.name\n }\n this.add(obj);\n return obj;\n }.bind(this))\n}\n```\n\n### 使用:\n\n``` javascript\nplayer.add163(12345678) //加入网易云id为 12345678 的歌曲\n```\n\n
\n\n\n
我只需要一个封装好的 audio api，不想要 UI ？
\n\n`dist` 文件夹中有 `cplayer-noview.js` 是去 UI 版的 cplayer。\n\n
\n" }, { "path": "src/cplayer.html", "content": "\n
\n
\n\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n\n
\n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n 07:24\n
\n
\n \n
\n 24:50\n
\n
\n
\n
\n - \n
\n
    \n
\n
\n" }, { "path": "src/example.html", "content": "\n\n\n\n \n CPlayer\n \n \n \n \n\n\n\n
\n
\n

cPlayer

\n
\n
\n

默认样式

\n
\n
\n
\n

暗黑样式

\n
\n
\n
\n
\n
\n

大图样式

\n
\n
\n
\n

大图暗黑样式

\n
\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n

Getting Started

\n 
<div id=\"app\"></div>\n<!-- 加载 cplayer 脚本 -->\n<script src=\"https://cdn.jsdelivr.net/gh/MoePlayer/cPlayer/dist/cplayer.js\"></script>\n<script>\n  let player = new cplayer({\n    element: document.getElementById('app'),\n    playlist: [\n      {\n        src: '歌曲资源链接...',\n        poster: '封面链接...',\n        name: '歌曲名称...',\n        artist: '歌手名称...',\n        lyric: '歌词...',\n        sublyric: '副歌词，一般为翻译...'\n      },\n      {\n        ...\n      },\n      ......\n    ]\n  })\n</script>
\n
\n
\n \n
\n
\n \"Fork\n \n\n\n" }, { "path": "src/example.ts", "content": "import cplayer from \"./lib\";\nimport { IAudioItem } from \"./lib/interfaces\";\nimport cplayerView from \"./lib/view\";\n\nrequire('./neko.css');\nrequire('highlight.js/styles/ocean.css');\n\nconst hljs = require('highlight.js/lib/highlight');\nconst javascript = require('highlight.js/lib/languages/javascript');\nconst xml = require('highlight.js/lib/languages/xml');\nhljs.registerLanguage('javascript', javascript);\nhljs.registerLanguage('xml', xml);\n\nhljs.initHighlightingOnLoad();\n\nwindow.addEventListener(\"load\",\n function () {\n function from163(id: string) {\n if (!id) throw new Error(\"Unable Property.\");\n return fetch(\"https://music.huaji8.top/?id=\" + id).then(function (res: any) { return res.json() }).then((data) => {\n let obj = {\n name: data.info.songs[0].name,\n artist: data.info.songs[0].ar.map(function (ar: any) { return ar.name }).join(','),\n poster: data.pic.url,\n lyric: data.lyric.lyric,\n sublyric: data.lyric.tlyric,\n src: data.url.url,\n album: data.info.songs[0].al.name\n }\n return obj;\n })\n }\n\n let playlist: IAudioItem[] = [\n {\n src: require('./example/music-1.mp3'),\n poster: require('./example/music-1.jpg'),\n name: 'チルドレンレコード',\n artist: '96猫,伊東歌詞太郎',\n lyric: '[00:28.12]白いイヤホンを耳にあて\\n[00:30.51]少しニヤッとして合図する\\n[00:32.74]染み込んだこの温度が\\n[00:35.07]ドアをノックした瞬間に\\n[00:37.47]溢れそうになるよ\\n[00:38.97]「まだ視えない？」\\n[00:39.81]目を凝らして臨む争奪戦\\n[00:41.96]あの日躊躇した脳裏から\\n[00:44.07]「今だ、取り戻せ」と\\n[00:45.66]コードが鳴り出しそう\\n[00:48.61]愛しくて、辛くて\\n[00:51.39]世界を嫌ったヒトの\\n[00:57.71]酷く理不尽な 「構成」\\n[01:00.46]肯定していちゃ未来は生み出せない\\n[01:04.98]少年少女前を向く\\n[01:07.26]暮れる炎天さえ希望論だって\\n[01:09.70]「ツレモドセ」\\n[01:10.69]「ツレモドセ」\\n[01:12.00]三日月が赤く燃え上がる\\n[01:14.04]さぁさぁ、コードを0で刻め\\n[01:16.54]想像力の外側の世界へ\\n[01:18.86]オーバーな空想戦線へ\\n[01:29.87]「お先にどうぞ」って舌を出す\\n[01:32.28]余裕ぶった無邪気な目\\n[01:34.50]「ほら出番だ」パスワードで\\n[01:36.79]目を覚ましたじゃじゃ馬は止まらない\\n[01:39.25]もう夜が深くなる\\n[01:41.21]「オコサマ」なら燃える延長戦\\n[01:43.64]逆境ぐあいがクールだろ\\n[01:45.80]寝れないねまだまだ\\n[01:47.30]ほら早く！早く\\n[01:48.66]イン?テンポで視線を合わせて\\n[01:50.81]ハイタッチでビートが鳴り出せば\\n[01:52.95]考えてちゃ遅いでしょう\\n[01:55.05]ほらノっかってこうぜ\\n[01:56.93]ワンコードで視線を合わせて\\n[01:59.78]ぶっ飛んだグルーヴが渦巻けば\\n[02:02.05]冗談じゃない見えるはず\\n[02:04.02]そのハイエンドの風景の隙間に\\n[02:06.75]さぁどうだい\\n[02:07.76]この暑さも\\n[02:08.73]すれ違いそうだった価値観も\\n[02:10.93]「悪くないかな」\\n[02:12.08]目を開き 手を取り合ったら\\n[02:15.84]案外チープな言葉も\\n[02:17.69]「合い言葉だ」って言い合える\\n[02:19.97]少しだけ前を向ける\\n[02:24.75]少年少女、前を向く\\n[02:26.91]揺れる炎天すら希望論だって\\n[02:29.26]思い出し、口に出す\\n[02:31.52]不可思議な出会いと別れを\\n[02:34.03]「ねぇねぇ、突飛な世界のこと\\n[02:36.13]散々だって笑い飛ばせたんだ」\\n[02:38.49]合図が終わる\\n[02:40.71]少年少女前を向け\\n[02:43.06]眩む炎天すら希望論だって\\n[02:45.44]「ツカミトレ」\\n[02:46.50]「ツカミトレ」と\\n[02:47.71]太陽が赤く燃え上がる\\n[02:49.77]さぁさぁ、コールだ。\\n[02:51.34]最後にしよう\\n[02:52.49]最善策はその目を見開いた\\n[02:54.75]オーバーな妄想戦線\\n[02:56.71]感情性のメビウスの先へ\\n',\n sublyric: '[00:28.12]戴上白色耳机\\n[00:30.51]稍微扬起嘴角做出信号\\n[00:32.74]渗入体内的这个温度\\n[00:35.07]在敲门的那一瞬间\\n[00:37.47]也要满溢出来了\\n[00:38.97] 「还看不见吗？」\\n[00:39.81]凝视面对这场争夺战\\n[00:41.96]那天在犹豫的脑袋中\\n[00:44.07]「就是现在，拿回来吧」\\n[00:45.66]似乎响起了这样的信号\\n[00:48.61]深爱著，煎熬著\\n[00:51.39]讨厌著世界的人的\\n[00:57.71]残酷无道理的「构成」\\n[01:00.46]如果承认了就没有未来可言\\n[01:04.98]少年少女前进吧\\n[01:07.26]连垂暮的炽热烈日都成了希望论\\n[01:09.70]「带回来吧」\\n[01:10.69]「带回来吧」\\n[01:12.00]赤红新月高高燃起\\n[01:14.04]来吧来吧，刻上0的记号\\n[01:16.54]前往超乎想像的世界\\n[01:18.86] 前往超载的空想战线\\n[01:29.87]「你先吧」吐出舌头\\n[01:32.28]表示还有馀裕的天真眼神\\n[01:34.50]「好了登场吧」的密码\\n[01:36.79]醒来的悍马停不下来\\n[01:39.25]夜已深\\n[01:41.21] 「小孩」进行斗志高昂延长赛\\n[01:43.64]身陷逆境听起来很酷吧？\\n[01:45.80]还睡不著呢 \\n[01:47.30]好了快一点！快一点！\\n[01:48.66]抓准节拍(in tempo)对上视线\\n[01:50.81]击掌打出响亮节奏(beat)\\n[01:52.95]思考的话不就太慢了吗？\\n[01:55.05]好了敲响门铃吧\\n[01:56.93]一个信号(one code)对上视线\\n[01:59.78]飞跃的轨迹(groove)也卷起漩涡\\n[02:02.05]别开玩笑了应该看得到吧\\n[02:04.02]从那高级奢侈(high end)的风景缝隙间\\n[02:06.75]觉得怎么样呢？\\n[02:07.76]份燥热也 \\n[02:08.73]貌似碰巧的价值观也\\n[02:10.93]「不算太糟呐」 \\n[02:12.08]睁开眼睛，相互握手之後\\n[02:15.84]廉价的话语也意外能\\n[02:17.69]「是暗语喔」的互相说着\\n[02:19.97]能稍微地向前行\\n[02:24.75]少年少女前进吧\\n[02:26.91]连晃动的炽热夏日都成了希望论\\n[02:29.26]回想起来，缓缓道出\\n[02:31.52]那不可思议的相遇与离别\\n[02:34.03]「呐呐，那飞跃的世界的事情\\n[02:36.13] 虽然悲惨但就笑一笑让它过去吧」\\n[02:38.49]信号终止\\n[02:40.71]少年少女前进吧 \\n[02:43.06]连眩目的炽热夏日都成了希望论\\n[02:45.44] 「紧抓住吧」\\n[02:46.50]「紧抓住吧」\\n[02:47.71]赤红烈日高高燃起\\n[02:49.77]来吧来吧，在呼唤我们了\\n[02:51.34]努力到最後吧\\n[02:52.49]上上策张开了那个眼睛\\n[02:54.75]超载的妄想战线\\n[02:56.71]朝向感性的梅比斯环的前方',\n album: 'アイリス'\n },\n {\n src: require('./example/music-2.mp3'),\n poster: require('./example/music-2.png'),\n name: 'ひねくれネジと雨',\n artist: 'ねこぼーろ',\n lyric: '[by:吃土少女Z]\\n[00:00.00] 作曲 : ねこぼーろ\\n[00:01.00] 作词 : ねこぼーろ\\n[00:35.07]「ねえ 鼓膜 溶ける感覚\\n[00:39.73]指の 先で 光る体温\\n[00:45.13]僕は 未だ わからないよ」\\n[00:50.50]\\n[00:51.00]時が経てば 忘れてしまう\\n[00:55.50]いつかの君も 色褪せてしまう\\n[01:00.96]でも僕は 未だ、「忘れないよ」\\n[01:06.78]\\n[01:07.44]まわる まわる 世界は\\n[01:09.71]僕の事など無視をして\\n[01:12.78]何も知らずに そっと\\n[01:15.10]僕の心 錆び付かせる\\n[01:18.16]もう君を守るなんて言えないな\\n[01:22.94]\\n[01:23.44]こわれ こわれる 僕は\\n[01:25.92]誰も 信じられなくなる\\n[01:28.96]「誰も知らずに そっと\\n[01:31.30]雨に溶けて 無くなる」とか\\n[01:34.33]ああそんなふざけた事 言えないな ああ\\n[01:41.10]\\n[01:45.19]ああ 鼓膜 突き破る赤\\n[01:49.52]頭の裏で 溶けてなくなる\\n[01:54.90]そう僕はまだ 聴こえ「ないよ」\\n[02:00.99]\\n[02:01.35]まわる まわる 世界は\\n[02:03.65]僕の事など無視をして\\n[02:06.73]何も知らずに そっと\\n[02:09.06]僕の鼓動 錆び付かせる\\n[02:12.06]もう君を見る事無く消えたいな ああ\\n[02:18.19]\\n[02:31.74]\\n[02:33.74]相対 曖昧な 返答でごまかし\\n[02:39.09]大体 反対な 顔を作る\\n[02:44.49]後悔 先に立たずだ\\n[02:48.55]\\n[02:49.98]―nonsense―\\n[03:20.32]\\n[03:22.32]まわる まわる 世界は\\n[03:24.57]僕の事など無視をして\\n[03:27.60]何も知らずに そっと\\n[03:29.92]僕の心 錆び付かせる\\n[03:32.93]「もう君を守るなんて言えないな」\\n[03:37.84]\\n[03:38.55]こわれ こわれる 僕は\\n[03:40.78]誰も 信じられなくなる\\n[03:43.77]「誰も知らずに そっと\\n[03:46.11]雨に溶けて 無くなる」とか\\n[03:49.20]ああそんなふざけた事言えないな\\n[03:53.88]\\n[03:54.64]ああ\\n[03:55.81]まわる\\n[03:56.33]まわる\\n[03:56.96]まわるまわる\\n[03:58.26]まわるまわるまわる\\n[04:00.95]これで終わる落ちる目眩だ\\n[04:04.67]ああ ああ ああ ああ ああ\\n[04:12.14]\\n',\n sublyric: '[by:Tsumugi-mio]\\n[00:24.23]\\n[00:35.07]呐呐 鼓膜 快要融化的感觉\\n[00:39.73]指尖 前面 是那光芒的体温\\n[00:45.13]现在 的我 还未曾知晓\\n[00:51.00]我即将要忘记 那遥远的时光\\n[00:55.50]总有一天你也 将会褪去颜色\\n[01:00.96]「但是现在的我还 没有 忘记哟」\\n[01:07.44]回转的 回转的 这个世界将我全然无视\\n[01:09.71]就像什么都不知道一样\\n[01:12.78]悄悄地\\n[01:15.10]我的心生锈\\n[01:18.16]「会守护你的」\\n[01:23.44]这句话已经说不出口\\n[01:25.92]谁也不会相信\\n[01:28.96]悄悄地\\n[01:31.30]像雨一样融化掉\\n[01:34.33]像这样不可能的事情 我是说不出口的\\n[01:45.19]啊啊 扎破 鼓膜的赤红颜色\\n[01:49.52]头脑里面 就像要溶化了一样\\n[01:54.90]这样的我 再一次变得「听不见了」\\n[02:01.35]回转的 回转的 这个世界将我全然无视\\n[02:03.65]就像什么都不知道一样\\n[02:06.73]悄悄地\\n[02:09.06]让我的心最后的跳动生锈\\n[02:12.06]你的事情已经像开始就不存在一般消失掉了啊\\n[02:33.74]暧昧的回答 那才是谎话\\n[02:39.09]你做出的大致都\\n[02:44.49]是反对的神情呢\\n[02:49.98]- - - - - - - -\\n[03:22.32]回转的 回转的 这个世界将我全然无视\\n[03:24.57]就像什么都不知道一样\\n[03:27.60]悄悄地\\n[03:29.92]使我的心生锈\\n[03:32.93]「会守护你的」\\n[03:38.55]这句话已经说不出口\\n[03:40.78]快要坏掉 快要坏掉的\\n[03:43.77]谁也不知道 悄悄地\\n[03:46.11]像雨一样融化掉 消失不见\\n[03:49.20]之类的像这样不可能的事情 说不出口\\n[03:54.64]啊啊\\n[03:55.81]回转着\\n[03:56.33]回转着\\n[03:56.96]回转回转着\\n[03:58.26]回转着回转着回转着\\n[04:00.95]终末时遗留下的头晕\\n[04:04.67]啊啊 啊啊 啊啊 啊啊\\n',\n album: 'TEXT'\n },\n {\n src: require('./example/music-3.mp3'),\n poster: require('./example/music-3.jpg'),\n name: 'In my room',\n artist: 'FELT',\n album: 'Grow Color'\n },\n {\n src: require('./example/video-1.mp4'),\n poster: require('./example/video-1.png'),\n name: 'ボーカロイドたちがただﾃｯﾃｰﾃﾚｯﾃｰするだけ',\n type: 'video'\n }\n ];\n\n const options = {\n zoomOutKana: true,\n volume: 0.75,\n dropDownMenuMode: 'bottom'\n };\n\n let players = [ new cplayer({\n ...options,\n playlist,\n element: document.getElementById('app1'),\n shadowDom: false\n }), new cplayer({\n ...options,\n playlist: playlist.push(playlist.shift()) && playlist,\n element: document.getElementById('app2'),\n dark: true\n }), new cplayer({\n ...options,\n playlist: playlist.push(playlist.shift()) && playlist,\n element: document.getElementById('app3'),\n big: true\n }), new cplayer({\n ...options,\n playlist: playlist.push(playlist.shift()) && playlist,\n element: document.getElementById('app4'),\n big: true,\n dark: true\n })];\n\n (window as any).cplayerView = cplayerView;\n\n document.getElementById('add163').addEventListener(\"click\", () => {\n let id163 = prompt('输入音乐的网易云ID:', '').trim();\n if (id163) {\n from163(id163).then(audio => {\n players.forEach(player => {\n player.view.showPlaylist();\n setTimeout(() => {\n player.add(audio);\n }, 500);\n })\n })\n }\n });\n\n document.getElementById('openplaylist').addEventListener(\"click\", (e) => {\n players.forEach(player => player.view.showPlaylist());\n });\n\n document.getElementById('closeplaylist').addEventListener(\"click\", (e) => {\n players.forEach(player => player.view.showInfo());\n });\n\n document.getElementById('remove').addEventListener(\"click\", (e) => {\n players.forEach(player => player.view.showPlaylist());\n setTimeout(() => {\n players.forEach(player => player.remove(player.playlist[player.playlist.length - 1]));\n }, 600)\n });\n\n players[0].on('ended', () =>{\n console.log('Event: ended');\n }).on('play', () => {\n console.log('Event: play');\n }).on('pause', () => {\n console.log('Event: pause');\n }).on('playmodechange', () => {\n console.log('Event: playmodechange');\n }).on('openaudio', () => {\n console.log('Event: openaudio');\n }).on('playstatechange', () => {\n console.log('Event: playstatechange');\n }).on('started', () => {\n console.log('Event: started');\n });\n\n (window as any).demoPlayer = players[0];\n (window as any).demoPlayers = players;\n (window as any).playlist = playlist;\n }\n)\n" }, { "path": "src/lib/helper/parseHTML.ts", "content": "export default function parseHTML(elem: string) {\n let fragment = document.createDocumentFragment();\n let newelement = document.createElement('div');\n fragment.appendChild(newelement);\n newelement.innerHTML = elem;\n fragment.removeChild(fragment.firstChild);\n fragment.appendChild(newelement.firstChild);\n return fragment;\n}" }, { "path": "src/lib/helper/returntypeof.ts", "content": "export default function returntypeof(expression: (...params: any[]) => RT): RT {\n return {} as RT;\n}" }, { "path": "src/lib/helper/shallowEqual.ts", "content": "const hasOwn = Object.prototype.hasOwnProperty\n\nfunction is(x: any, y: any) {\n if (x == y) {\n return x != 0 || y != 0 || 1 / x == 1 / y\n } else {\n return x != x && y != y\n }\n}\n\nexport default function shallowEqual(objA: any, objB: any) {\n if (is(objA, objB)) return true\n\n if (typeof objA !== 'object' || objA === null ||\n typeof objB !== 'object' || objB === null) {\n return false\n }\n\n const keysA = Object.keys(objA)\n const keysB = Object.keys(objB)\n\n if (keysA.length !== keysB.length) return false\n\n for (let i = 0; i < keysA.length; i++) {\n if (!hasOwn.call(objB, keysA[i]) ||\n !is(objA[keysA[i]], objB[keysA[i]])) {\n return false\n }\n }\n\n return true\n}" }, { "path": "src/lib/index.ts", "content": "require('./polyfill')\nimport { listloopPlaymode } from './playmode/listloop';\nimport { IAudioItem, Iplaymode, IplaymodeConstructor, Iplaylist } from './interfaces';\nimport { EventEmitter } from 'events';\nimport View, { ICplayerViewOption } from './view';\nimport { decodeLyricStr } from \"./lyric\";\nimport { singlecyclePlaymode } from \"./playmode/singlecycle\";\nimport { listrandomPlaymode } from \"./playmode/listrandom\";\nimport shallowEqual from \"./helper/shallowEqual\";\nimport { cplayerMediaSessionPlugin } from \"./mediaSession\";\n\nlet cplayerView:typeof View = undefined;\n\nif (!process.env.cplayer_noview) {\n cplayerView = require('./view').default;\n}\n\nexport interface ICplayerOption {\n playlist?: Iplaylist;\n playmode?: string;\n volume?: number;\n point?: number;\n autoplay?: boolean;\n}\n\nconst defaultOption: ICplayerOption = {\n playlist: [],\n point: 0,\n volume: 1,\n playmode: 'listloop',\n autoplay: false\n}\n\nconst playmodes: { [key: string]: IplaymodeConstructor } = {\n listloop: listloopPlaymode,\n singlecycle: singlecyclePlaymode,\n listrandom: listrandomPlaymode\n}\n\nfunction playlistPreFilter(playlist: Iplaylist) {\n return playlist.map((audio, index) => {\n let res = {\n ...audio\n };\n if (typeof audio.lyric === 'string' && audio.lyric.replace(/\\n+/gi, \"\\n\").trim()) {\n res.lyric = decodeLyricStr(audio.lyric)\n }\n if (typeof audio.sublyric === 'string' && audio.sublyric.replace(/\\n+/gi, \"\\n\").trim()) {\n res.sublyric = decodeLyricStr(audio.sublyric)\n }\n return res;\n })\n}\n\nexport default class cplayer extends EventEmitter {\n private __paused = true;\n public view: View;\n public audioElement: HTMLAudioElement | HTMLVideoElement;\n private playmode: Iplaymode;\n private playmodeName: string = 'listloop';\n private audioElementType: string;\n private _volume: number = 0;\n set mode(playmode: string) {\n this.setMode(playmode);\n }\n set volume(volume: number) {\n this.setVolume(volume);\n }\n get volume() {\n return this._volume\n }\n get mode() {\n return this.playmodeName;\n }\n get playlist() {\n return this.playmode.playlist;\n }\n get nowplay() {\n return this.playmode && this.playmode.now();\n }\n get nowplaypoint() {\n return this.playmode && this.playmode.nowpoint();\n }\n get played() {\n return !this.__paused;\n }\n get paused() {\n return this.__paused;\n }\n get duration() {\n if (this.audioElement) {\n return this.audioElement.duration;\n }\n return 0;\n }\n get currentTime() {\n if (this.audioElement) {\n return this.audioElement.currentTime;\n }\n return 0;\n }\n\n constructor(options: ICplayerOption & ICplayerViewOption) {\n super();\n options = {\n ...defaultOption,\n ...options\n }\n this.playmode = new playmodes[options.playmode](playlistPreFilter(options.playlist), options.point);\n if (!process.env.cplayer_noview)this.view = new cplayerView(this, options);\n cplayerMediaSessionPlugin(this);\n // 同步调用会导致，用户的事件得不到触发\n setImmediate(() => {\n this.openAudio();\n this.setVolume(options.volume);\n if (options.autoplay && this.playlist.length > 0) {\n this.play(true).catch((e) => {\n console.log(e);\n this.pause();\n });\n }\n });\n }\n\n private initializeEventEmitter(element: HTMLElement) {\n const a = element.addEventListener.bind(element);\n const e = this.eventHandlers;\n a('timeupdate', e.handleTimeUpdate);\n a('canplaythrough', e.handleCanPlayThrough);\n a('pause', e.handlePause);\n a('play', e.handlePlay);\n a('playing', e.handlePlaying)\n a('ended', e.handleEnded);\n a('loadeddata', e.handleLoadeddata);\n }\n\n private removeEventEmitter(element: HTMLElement) {\n const r = element.removeEventListener.bind(element);\n const e = this.eventHandlers;\n r('timeupdate', e.handleTimeUpdate);\n r('canplaythrough', e.handleCanPlayThrough);\n r('pause', e.handlePause);\n r('play', e.handlePlay);\n r('playing', e.handlePlaying)\n r('ended', e.handleEnded);\n r('loadeddata', e.handleLoadeddata);\n }\n\n private eventHandlers: { [key: string]: (...args: any[]) => void } = {\n handlePlay: (...args) => {\n if (this.__paused) {\n this.pause();\n }\n },\n handlePlaying: (...args) => {\n if (this.audioElement.currentTime === 0) {\n this.emit('started');\n }\n },\n handleTimeUpdate: (...args) => {\n let time = this.audioElement.duration;\n let playedTime = this.audioElement.currentTime;\n this.emit('timeupdate', playedTime, time);\n },\n handleCanPlayThrough: (...args) => {\n this.emit('canplaythrough', ...args);\n },\n handlePause: (...args) => {\n if (!this.__paused && !this.audioElement.ended) {\n this.play(true).catch((e) => {\n console.log(e);\n this.pause();\n });\n }\n },\n handleEnded: (...args) => {\n this.emit('ended', ...args);\n if (!this.__paused) {\n this.next();\n }\n },\n handlePlayListChange: (...args) => {\n this.emit('playlistchange', ...args);\n },\n handlePlaymodeChange: (mode: string = this.mode) => {\n this.emit('playmodechange', mode);\n },\n handleLoadeddata: (...args) => {\n let time = this.audioElement.duration;\n let playedTime = this.audioElement.currentTime;\n this.emit('timeupdate', playedTime, time);\n }\n }\n\n public setCurrentTime(currentTime: number | string) {\n if (typeof currentTime === 'string') {\n currentTime.trim();\n if (currentTime[currentTime.length - 1] === '%') {\n const percentage = parseFloat(currentTime);\n currentTime = this.duration * (percentage / 100);\n }\n }\n if (this.audioElement) {\n this.audioElement.currentTime = parseFloat(currentTime.toString());\n }\n }\n\n private isPlaying() {\n return !!this.audioElement && this.audioElement.currentTime > 0 && !this.audioElement.paused && !this.audioElement.ended && this.audioElement.readyState > 2;\n }\n\n public openAudio(audio: IAudioItem = this.nowplay) {\n if (audio) {\n if (audio.type === 'video') {\n if (!(this.audioElementType === 'HTMLVideoElement')) {\n if(typeof this.audioElement !== 'undefined') {\n this.removeEventEmitter(this.audioElement);\n this.audioElement.src = '';\n }\n this.audioElement = document.createElement('video');\n if (this.audioElement instanceof HTMLVideoElement) {\n this.audioElementType = 'HTMLVideoElement';\n this.audioElement.loop = false;\n this.audioElement.autoplay = false;\n this.audioElement.poster = audio.poster;\n this.audioElement.setAttribute('playsinline', 'true');\n this.audioElement.setAttribute('webkit-playsinline', 'true');\n }\n this.initializeEventEmitter(this.audioElement);\n this.emit('audioelementchange', this.audioElement);\n }\n } else { \n if (!(this.audioElementType === 'HTMLAudioElement')) {\n if(typeof this.audioElement !== 'undefined') { \n this.removeEventEmitter(this.audioElement);\n this.audioElement.src = '';\n }\n this.audioElement = new Audio();\n this.audioElementType = 'HTMLAudioElement';\n this.audioElement.loop = false;\n this.audioElement.autoplay = false;\n this.initializeEventEmitter(this.audioElement);\n this.emit('audioelementchange', this.audioElement);\n }\n }\n this.setVolume(this.volume);\n this.audioElement.src = this.nowplay.src;\n this.emit('openaudio', audio);\n if (!this.__paused) {\n this.play();\n }\n }\n }\n\n public toggleMode() {\n switch (this.playmodeName) {\n case 'listloop': this.setMode('singlecycle'); break;\n case 'singlecycle': this.setMode('listrandom'); break;\n case 'listrandom': this.setMode('listloop'); break;\n }\n }\n\n public setMode(playmode: string) {\n if (typeof playmode === 'string') {\n if (this.playmodeName !== playmode) {\n if (playmodes[playmode]) {\n this.playmode = new playmodes[playmode](this.playlist, this.nowplaypoint);\n this.playmodeName = playmode;\n this.eventHandlers.handlePlaymodeChange();\n }\n }\n }\n }\n\n public getMode() {\n return this.mode;\n }\n\n public play(Forced: boolean = false) {\n let isPlaying = this.isPlaying();\n let res;\n if (!isPlaying && this.playlist.length > 0 || Forced) {\n res = this.audioElement.play();\n }\n if (this.__paused) {\n this.__paused = false;\n this.emit('playstatechange', this.__paused);\n this.emit('play');\n }\n return res;\n }\n\n public pause(Forced: boolean = false) {\n let isPlaying = this.isPlaying();\n if (isPlaying && this.playlist.length > 0 || Forced) {\n this.audioElement.pause();\n }\n if (!this.__paused) {\n this.__paused = true;\n this.emit('playstatechange', this.__paused);\n this.emit('pause');\n }\n }\n\n public to(id: number) {\n this.playmode.to(id);\n this.openAudio();\n }\n\n public next() {\n this.playmode.next();\n this.openAudio();\n }\n\n public prev() {\n this.playmode.prev();\n this.openAudio();\n }\n\n public togglePlayState() {\n if (this.__paused) {\n this.play();\n } else {\n this.pause();\n }\n }\n\n public add(item: IAudioItem) {\n item = (playlistPreFilter([item] as Iplaylist))[0];\n this.playmode.addMusic(item);\n this.eventHandlers.handlePlayListChange();\n if (this.playlist.length === 1) {\n this.to(0);\n }\n }\n\n public remove(item: IAudioItem) {\n let needUpdate = this.playmode.removeMusic(item);\n this.eventHandlers.handlePlayListChange();\n if (needUpdate) {\n this.openAudio();\n }\n }\n\n public setVolume(volume: number | string) {\n this._volume = parseFloat(volume as string);\n if (this.audioElement)\n this.audioElement.volume = Math.max(0.0, Math.min(1.0, this._volume));\n this.emit('volumechange', this.volume);\n }\n\n public destroy() {\n if (this.audioElement) {\n this.audioElement.src = null;\n this.audioElement.removeEventListener(\"timeupdate\", this.eventHandlers.handleTimeUpdate);\n this.removeAllListeners(); \n }\n if (this.view) this.view.destroy();\n Object.getOwnPropertyNames(this).forEach((name: keyof cplayer) => delete this[name]);\n (this as any).__proto__ = Object;\n }\n}\n\nif (!process.env.cplayer_noview) {\n function parseCPlayerTag() {\n Array.prototype.forEach.call(document.querySelectorAll('template[cplayer]'),(element: Element) => {\n element.attributes.getNamedItem('loaded') ||\n new cplayer({\n generateBeforeElement: true,\n deleteElementAfterGenerate: true,\n element,\n ...JSON.parse(element.innerHTML)\n })\n })\n }\n\n window.addEventListener(\"load\", parseCPlayerTag);\n}\n\n(window as any).cplayer = cplayer;" }, { "path": "src/lib/interfaces.ts", "content": "import { Lyric } from \"./lyric\";\n\nexport interface IAudioItem {\n name: string; //名称\n poster?: string; //海报\n artist?: string; //艺术家\n src: string; //音频\n lyric?: Lyric | string; // 歌词\n sublyric?: Lyric | string; // 小歌词;\n album?: string; // 专辑 & 唱片\n type?: string;\n}\n\nexport type Iplaylist = IAudioItem[];\n\nexport interface Iplaymode {\n next(): IAudioItem;\n prev(): IAudioItem;\n now(): IAudioItem;\n nowpoint(): number;\n to(id: number): void;\n addMusic(item: IAudioItem): void;\n removeMusic(item: IAudioItem): boolean;\n playlist: Iplaylist;\n}\n\nexport interface IplaymodeConstructor {\n new(playlist: Iplaylist, point: number): Iplaymode;\n}" }, { "path": "src/lib/lyric.ts", "content": "export interface ILyricItem {\n time: number;\n word: string;\n}\n\n\nexport class Lyric {\n raw: string;\n items: ILyricItem[] = [];\n public getLyric(time: number) {\n return this.items.reduce((p, c) => {\n if (c.time < time && (!p || p.time < c.time)) {\n return c;\n }\n return p;\n }, undefined)\n }\n public getNextLyric(time: number) {\n return this.items.reduce((p, c) => {\n if (c.time > time && (!p || p.time > c.time)) {\n return c;\n }\n return p;\n }, undefined)\n }\n public toString() {\n return this.raw;\n }\n constructor(items: ILyricItem[] ,raw: string) {\n this.items = items;\n this.raw = raw;\n }\n}\n\nexport function decodeLyricStr(lyricStr: string, options?: {}) {\n if (typeof lyricStr !== 'string') return lyricStr;\n let lyric: ILyricItem[] = [];\n lyricStr.replace(/\\n+/gi, \"\\n\").trim().split(\"\\n\").forEach((lyricStrItem) => {\n lyric.push(...decodeLyricStrItem(lyricStrItem));\n });\n if (lyric.length == 0) return undefined;\n return new Lyric(lyric, lyricStr);\n}\n\nexport function decodeLyricStrItem(lyricItemStr: string): ILyricItem[] {\n let res: ILyricItem[] = [];\n let timestr = lyricItemStr.match(/\\[\\d+\\:[\\.\\d]+\\]/gi);\n let word = /(?:\\[\\d+\\:[\\.\\d]+\\])*(.*)/gi.exec(lyricItemStr)[1].trim()\n if (timestr && word) {\n timestr.forEach((timestr) => {\n let z = /\\[(\\d+)\\:([\\.\\d]+)\\]/gi.exec(timestr.trim());\n let time = parseInt(z[1]) * 60 * 1000 + parseFloat(z[2]) * 1000;\n res.push({\n time,\n word\n });\n })\n }\n return res;\n}" }, { "path": "src/lib/mediaSession.ts", "content": "import cplayer from './';\nimport { IAudioItem } from '../lib/interfaces';\n\nconst defaultPoster = require('../defaultposter.jpg')\n\nexport function cplayerMediaSessionPlugin(player: cplayer)\n{\n if ('mediaSession' in navigator) {\n if (player.nowplay) navigator.mediaSession.metadata = mediaMetadata(player.nowplay);\n navigator.mediaSession.setActionHandler('play', () => player.play());\n navigator.mediaSession.setActionHandler('pause', () => player.pause());\n navigator.mediaSession.setActionHandler('previoustrack', () => player.prev());\n navigator.mediaSession.setActionHandler('nexttrack', () => player.next());\n player.on('openaudio', () => {\n navigator.mediaSession.metadata = mediaMetadata(player.nowplay);\n })\n }\n}\n\nexport function mediaMetadata(audio: IAudioItem) {\n return new MediaMetadata({\n title: audio.name,\n artist: audio.artist,\n album: audio.album,\n artwork: [\n {\n sizes: '720x720',\n src: audio.poster || defaultPoster\n }\n ]\n });\n}\n" }, { "path": "src/lib/playmode/listloop.ts", "content": "import { IAudioItem, Iplaymode, Iplaylist } from '../interfaces';\nimport shallowEqual from \"../helper/shallowEqual\";\n\nexport function baseRemoveMusic(item: IAudioItem, playlist: Iplaylist, nowpoint: number, newpoint: (point: number) => number) {\n let targetPoint: number;\n let needupdate = false;\n playlist.forEach((a, index) => {\n if (shallowEqual(a, item)) {\n targetPoint = index;\n }\n })\n if (typeof targetPoint !== 'undefined') {\n playlist.splice(targetPoint, 1);\n if (nowpoint > targetPoint) {\n nowpoint--;\n needupdate = false;\n } else if (nowpoint === targetPoint) {\n nowpoint = newpoint(nowpoint);\n needupdate = true;\n }\n }\n return { playlist, nowpoint, needupdate };\n}\n\nexport class listloopPlaymode implements Iplaymode {\n private __playlist: Iplaylist = [];\n private point = 0;\n get playlist() {\n return this.__playlist;\n }\n\n constructor(playlist: Iplaylist = [], point: number = 0) {\n this.__playlist = playlist;\n this.to(point);\n }\n\n public next() {\n this.point = this.nextPoint();\n return this.playlist[this.point];\n }\n\n public prev() {\n this.point = this.prevPoint();\n return this.playlist[this.point];\n }\n\n public now() {\n return this.playlist[this.point];\n }\n\n public nowpoint() {\n return this.point\n }\n\n public to(point: number) {\n this.point = Math.max(0, Math.min(point, this.__playlist.length - 1));\n }\n\n public addMusic(item: IAudioItem) {\n this.__playlist.push(item);\n }\n\n private nextPoint() {\n let res = this.point + 1;\n if (res >= this.__playlist.length) {\n res = 0;\n }\n return res;\n }\n\n private prevPoint() {\n let res = this.point - 1;\n if (res < 0) {\n res = this.__playlist.length - 1\n }\n return res;\n }\n\n public removeMusic(item: IAudioItem) {\n let { playlist, nowpoint, needupdate } = baseRemoveMusic(item, this.__playlist, this.point, (point) => Math.max(0, Math.min(point, this.__playlist.length - 1)))\n this.__playlist = playlist;\n this.point = nowpoint;\n return needupdate;\n }\n}" }, { "path": "src/lib/playmode/listrandom.ts", "content": "import { IAudioItem, Iplaymode, Iplaylist } from '../interfaces';\nimport shallowEqual from \"../helper/shallowEqual\";\nimport { baseRemoveMusic } from \"./listloop\";\n\nexport class listrandomPlaymode implements Iplaymode {\n private __playlist: Iplaylist = [];\n private point = 0;\n get playlist() {\n return this.__playlist;\n }\n\n constructor(playlist: Iplaylist = [], point: number = 0) {\n this.__playlist = playlist;\n this.to(point);\n }\n\n public next() {\n this.point = this.randomPoint();\n return this.__playlist[this.point];\n }\n\n public prev() {\n this.point = this.randomPoint();\n return this.__playlist[this.point];\n }\n\n public now() {\n return this.__playlist[this.point];\n }\n\n public nowpoint() {\n return this.point;\n }\n\n public to(point: number) {\n this.point = Math.max(0, Math.min(point, this.__playlist.length - 1));\n }\n\n public addMusic(item:IAudioItem){\n this.__playlist.push(item);\n }\n\n private randomPoint(): number {\n if (this.__playlist.length > 1) {\n let random = Math.floor(this.__playlist.length * Math.random());\n if (random === this.point) {\n return this.randomPoint();\n } else {\n return random;\n }\n } else return 0;\n }\n\n public removeMusic(item: IAudioItem) {\n let {playlist,nowpoint,needupdate} = baseRemoveMusic(item, this.__playlist, this.point, (point) => this.randomPoint())\n this.__playlist = playlist;\n this.point = nowpoint;\n return needupdate;\n }\n}" }, { "path": "src/lib/playmode/singlecycle.ts", "content": "import { IAudioItem, Iplaymode, Iplaylist } from '../interfaces';\nimport shallowEqual from \"../helper/shallowEqual\";\nimport { baseRemoveMusic } from \"./listloop\";\n\nexport class singlecyclePlaymode implements Iplaymode {\n private __playlist: Iplaylist = [];\n private audio: IAudioItem;\n private point: number;\n get playlist() {\n return this.__playlist;\n }\n\n constructor(playlist: Iplaylist = [], point: number = 0) {\n this.__playlist = playlist;\n this.to(point);\n }\n\n public next() {\n return this.__playlist[this.point];\n }\n\n public prev() {\n return this.__playlist[this.point];\n }\n\n public now() {\n return this.__playlist[this.point];\n }\n\n public nowpoint() {\n return this.point;\n }\n\n public to(point: number) {\n this.point = Math.max(0, Math.min(point, this.__playlist.length - 1));\n }\n\n public addMusic(item: IAudioItem) {\n this.__playlist.push(item);\n }\n\n public removeMusic(item: IAudioItem) {\n let {playlist,nowpoint,needupdate} = baseRemoveMusic(item, this.__playlist, this.point, (point) => Math.max(0, Math.min(point, this.__playlist.length - 1)))\n this.__playlist = playlist;\n this.point = nowpoint;\n return needupdate;\n }\n}" }, { "path": "src/lib/polyfill.js", "content": "if (typeof Object.assign != 'function') {\n // Must be writable: true, enumerable: false, configurable: true\n Object.defineProperty(Object, \"assign\", {\n value: function assign(target, varArgs) { // .length of function is 2\n 'use strict';\n if (target == null) { // TypeError if undefined or null\n throw new TypeError('Cannot convert undefined or null to object');\n }\n\n var to = Object(target);\n\n for (var index = 1; index < arguments.length; index++) {\n var nextSource = arguments[index];\n\n if (nextSource != null) { // Skip over if undefined or null\n for (var nextKey in nextSource) {\n // Avoid bugs when hasOwnProperty is shadowed\n if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {\n to[nextKey] = nextSource[nextKey];\n }\n }\n }\n }\n return to;\n },\n writable: true,\n configurable: true\n });\n}" }, { "path": "src/lib/view.ts", "content": "import { IAudioItem } from './interfaces';\nimport cplayer from './';\nimport returntypeof from './helper/returntypeof';\nimport { EventEmitter } from 'events';\nimport parseHTML from \"./helper/parseHTML\";\nimport { ILyricItem } from \"./lyric\";\n\nconst defaultPoster = require('../defaultposter.jpg')\nconst htmlTemplate = require('../cplayer.html');\nconst playIcon = require('../playicon.svg');\nconst style = require('!css-loader!postcss-loader!sass-loader!../scss/cplayer.scss');\n\nfunction kanaFilter(str: string) {\n const starttag = '';\n const endtag = '';\n let res = '';\n let startflag = false;\n for(let i = 0; i < str.length; i++) {\n let ch = str.charAt(i);\n let kano = /[ぁ-んァ-ン]/.test(ch);\n if (kano && !startflag) {\n res += starttag;\n startflag = true;\n }\n if (!kano && startflag) {\n res += endtag;\n startflag = false;\n }\n res += ch;\n }\n if (startflag) {\n res += endtag;\n }\n return res;\n}\n\nfunction buildLyric(lyric: string, sublyric?: string, zoomOutKana: boolean = false) {\n return (zoomOutKana ? kanaFilter(lyric) : lyric) + (sublyric ? `${sublyric}` : '')\n}\n\nfunction secondNumber2TimeStr(secondTime: number) {\n const minute: string = parseInt((secondTime / 60).toString()).toString().padStart(2, '0');\n const second: string = parseInt((secondTime % 60).toString()).toString().padStart(2, '0');\n return minute + ':' + second;\n}\n\nexport interface ICplayerViewOption {\n element?: Element;\n generateBeforeElement?: boolean;\n deleteElementAfterGenerate?: boolean;\n zoomOutKana?: boolean;\n showPlaylist?: boolean;\n showPlaylistButton?: boolean;\n width?: string;\n size?: string;\n style?: string;\n dark?: boolean;\n big?: boolean;\n shadowDom?: boolean;\n dropDownMenuMode?: 'bottom' | 'top' | 'none' | string;\n}\n\nconst defaultOption: ICplayerViewOption = {\n element: document.body,\n generateBeforeElement: false,\n deleteElementAfterGenerate: false,\n zoomOutKana: false,\n showPlaylist: false,\n showPlaylistButton: true,\n dropDownMenuMode: 'bottom',\n width: '',\n size: '12px',\n style: '',\n shadowDom: true\n}\n\n\nfunction createStyleElement(style: string) {\n const styleElement = document.createElement('style');\n styleElement.id = 'cplayer-style';\n styleElement.innerHTML = style;\n return styleElement;\n}\n\nfunction createShadowElement(targetElement: Element, htmlTemplate: string, style: string) {\n let shadowRoot = (targetElement as any).createShadowRoot() as ShadowRoot;\n shadowRoot.innerHTML = htmlTemplate;\n shadowRoot.appendChild(createStyleElement(style));\n return shadowRoot.firstChild as HTMLElement;\n}\n\nfunction createBeforeElement(targetElement: Element, htmlTemplate: string, style: string) {\n let element = document.createElement('div');\n element.innerHTML = htmlTemplate;\n targetElement.parentNode.insertBefore(element, targetElement);\n if (!document.getElementById('cplayer-style')) {\n document.body.appendChild(createStyleElement(style));\n }\n return element.firstChild as HTMLElement;\n}\n\nfunction createBeforeShadowElement(targetElement: Element, htmlTemplate: string, style: string) {\n let element = document.createElement('div');\n let shadowRoot = (element as any).createShadowRoot() as ShadowRoot;\n shadowRoot.innerHTML = htmlTemplate;\n shadowRoot.appendChild(createStyleElement(style));\n targetElement.parentNode.insertBefore(element, targetElement);\n return shadowRoot.firstChild as HTMLElement;\n}\n\nfunction createElement(targetElement: Element, htmlTemplate: string, style: string) {\n targetElement.innerHTML = htmlTemplate;\n if (!document.getElementById('cplayer-style')) {\n document.body.appendChild(createStyleElement(style));\n }\n return targetElement.firstChild as HTMLElement;\n}\n\nexport default class cplayerView extends EventEmitter {\n private elementLinks = returntypeof(this.getElementLinks);\n private rootElement: HTMLElement;\n private player: cplayer;\n private dropDownMenuShowInfo = true;\n private options: ICplayerViewOption;\n\n constructor(player: cplayer, options: ICplayerViewOption) {\n super();\n this.options = {\n ...defaultOption,\n ...options\n };\n this.player = player;\n if (this.options.generateBeforeElement) {\n if ((this.options.element as any).createShadowRoot && options.shadowDom !== false) {\n this.rootElement = createBeforeShadowElement(this.options.element, htmlTemplate, style + this.options.style);\n } else {\n this.rootElement = createBeforeElement(this.options.element, htmlTemplate, style + this.options.style);\n }\n } else {\n if ((this.options.element as any).createShadowRoot && options.shadowDom !== false) {\n this.rootElement = createShadowElement(this.options.element, htmlTemplate, style + this.options.style);\n } else {\n this.rootElement = createElement(this.options.element, htmlTemplate, style + this.options.style);\n }\n }\n if (options.deleteElementAfterGenerate) {\n options.element.parentElement.removeChild(options.element);\n }\n this.rootElement.style.width = this.options.width;\n this.rootElement.style.fontSize = this.options.size;\n this.elementLinks = this.getElementLinks();\n this.injectEventListener();\n this.setPlayIcon(this.player.paused);\n this.dropDownMenuShowInfo = !this.options.showPlaylist;\n if (this.dropDownMenuShowInfo) {\n this.showInfo();\n } else this.showPlaylist();\n if (!this.options.showPlaylistButton)\n this.elementLinks.button.list.style.display = 'none';\n else\n this.elementLinks.button.list.style.display = '';\n this.elementLinks.dropDownMenu.classList.add('cp-drop-down-menu-' + this.options.dropDownMenuMode)\n if (this.options.dark) {\n this.dark();\n }\n if (this.options.big) {\n this.big();\n }\n\n // this.setPoster(this.player.nowplay.poster || defaultPoster);\n this.setProgress(this.player.currentTime / this.player.duration,\n this.player.currentTime,\n this.player.duration);\n // this.elementLinks.title.innerText = this.player.nowplay.name;\n // this.elementLinks.artist.innerText = this.player.nowplay.artist || '';\n this.updateLyric();\n this.updatePlaylist();\n }\n\n public getRootElement() {\n return this.rootElement;\n }\n\n public dark() {\n this.rootElement.classList.add('cp-dark');\n }\n\n public big() {\n this.rootElement.classList.add('cp-big');\n }\n\n private getPlayListLinks(rootElement: Element = this.rootElement) {\n return rootElement.querySelectorAll('.cp-playlist li');\n }\n\n private getElementLinks(rootElement: Element = this.rootElement) {\n let gebc: (className: string) => Element = className => rootElement.getElementsByClassName(className)[0];\n return {\n icon: {\n play: gebc('cp-play-icon') as HTMLElement,\n mode: gebc('cp-mode-icon') as HTMLElement,\n },\n button: {\n prev: gebc('cp-prev-button') as HTMLElement,\n play: gebc('cp-play-button') as HTMLElement,\n next: gebc('cp-next-button') as HTMLElement,\n volume: gebc('cp-volume-icon') as HTMLElement,\n list: gebc('cp-list-button') as HTMLElement,\n mode: gebc('cp-mode-button') as HTMLElement\n },\n progress: gebc('cp-progress') as HTMLElement,\n progressFill: gebc('cp-progress-fill') as HTMLElement,\n progressButton: gebc('cp-progress-button') as HTMLElement,\n progressDuration: gebc('cp-progress-duration') as HTMLElement,\n progressCurrentTime: gebc('cp-progress-current-time') as HTMLElement,\n poster: gebc('cp-poster') as HTMLElement,\n title: gebc('cp-audio-title') as HTMLElement,\n artist: gebc('cp-audio-artist') as HTMLElement,\n lyric: gebc('cp-lyric-text') as HTMLElement,\n lyricContainer: gebc('cp-lyric') as HTMLElement,\n volumeController: gebc('cp-volume-controller') as HTMLElement,\n volumeFill: gebc('cp-volume-fill') as HTMLElement,\n volumeControllerButton: gebc('cp-volume-controller-button') as HTMLElement,\n volumeControllerContainer: gebc('cp-volume-container') as HTMLElement,\n dropDownMenu: gebc('cp-drop-down-menu') as HTMLElement,\n playlist: gebc('cp-playlist') as HTMLElement,\n playlistItems: this.getPlayListLinks(rootElement)\n }\n }\n\n private setPlayIcon(paused: boolean) {\n if (paused) {\n this.elementLinks.icon.play.classList.add('cp-play-icon-paused');\n } else {\n this.elementLinks.icon.play.classList.remove('cp-play-icon-paused');\n }\n }\n\n private setProgress(point: number, currentTime: number, duration: number) {\n this.elementLinks.progressFill.style.width = `${point * 100}%`;\n this.elementLinks.progressButton.style.right = (1 - point) * 100 + '%';\n this.elementLinks.progressCurrentTime.innerText = secondNumber2TimeStr(currentTime);\n this.elementLinks.progressDuration.innerText = secondNumber2TimeStr(duration);\n }\n\n private setPoster(src: string) {\n this.elementLinks.poster.style.backgroundImage = `url(\"${src}\")`;\n }\n\n private __OldVolume = 1;\n private setVolume(volume: number) {\n if (this.__OldVolume !== volume) {\n this.elementLinks.volumeFill.style.width = `${volume * 100}%`;\n this.elementLinks.volumeControllerButton.style.right = (1 - volume) * 100 + '%';\n this.__OldVolume = volume\n }\n }\n\n private setMode(mode: string) {\n var modeattr = document.createAttribute('data-mode');\n modeattr.value = mode;\n this.elementLinks.button.mode.attributes.setNamedItem(modeattr);\n }\n\n public showInfo() {\n let dropDownMenu = this.elementLinks.dropDownMenu;\n dropDownMenu.style.height = '';\n dropDownMenu.classList.remove('cp-drop-down-menu-playlist');\n dropDownMenu.classList.add('cp-drop-down-menu-info');\n this.dropDownMenuShowInfo = true;\n }\n\n public showPlaylist() {\n let dropDownMenu = this.elementLinks.dropDownMenu;\n dropDownMenu.style.height = this.player.playlist.length * 2.08333 + 'em';\n dropDownMenu.classList.remove('cp-drop-down-menu-info');\n dropDownMenu.classList.add('cp-drop-down-menu-playlist');\n this.dropDownMenuShowInfo = false;\n }\n\n public toggleDropDownMenu() {\n if (this.dropDownMenuShowInfo) {\n this.showPlaylist();\n } else {\n this.showInfo();\n }\n }\n\n private setVolumeControllerKeepShow() {\n this.elementLinks.volumeControllerContainer.classList.add('cp-volume-container-show');\n }\n\n private toggleVolumeControllerKeepShow() {\n this.elementLinks.volumeControllerContainer.classList.toggle('cp-volume-container-show');\n }\n\n private removeVolumeControllerKeepShow() {\n this.elementLinks.volumeControllerContainer.classList.remove('cp-volume-container-show');\n }\n\n private __OldLyric = '';\n private __OldTotalTime = 0;\n\n private setLyric(lyric: string, time: number = 0, totalTime: number = 0) {\n if (this.__OldLyric !== lyric || this.__OldTotalTime !== totalTime) {\n this.elementLinks.lyric.innerHTML = lyric;\n this.elementLinks.lyric.style.transition = '';\n this.elementLinks.lyric.style.transform = '';\n if (totalTime !== 0) {\n let lyricWidth = this.elementLinks.lyric.clientWidth;\n let lyricContainerWidth = this.elementLinks.lyricContainer.clientWidth;\n if (lyricWidth > lyricContainerWidth) {\n let duration = totalTime - time;\n let targetOffset = (lyricWidth - lyricContainerWidth);\n let timepage = lyricContainerWidth / lyricWidth * duration;\n let startTime = Math.min(timepage * 0.6, duration);\n let moveTime = duration - timepage;\n\n this.elementLinks.lyric.style.transition = `transform ${moveTime}ms linear ${startTime}ms`\n this.elementLinks.lyric.style.transform = `translateX(-${targetOffset}px)`;\n }\n }\n this.__OldLyric = lyric;\n this.__OldTotalTime = totalTime;\n }\n }\n\n private updatePlaylist() {\n var lis = this.player.playlist.map((audio, index) => {\n var element = document.createElement('li');\n element.innerHTML = `\n ${index === this.player.nowplaypoint ? playIcon : ''}\n ${audio.name}${audio.artist ? ' - ' + audio.artist : ''}\n `\n return element;\n })\n this.elementLinks.playlist.innerHTML = '';\n lis.forEach((li) => {\n this.elementLinks.playlist.appendChild(li);\n })\n this.elementLinks.playlistItems = this.getPlayListLinks();\n this.injectPlayListEventListener();\n if (!this.dropDownMenuShowInfo) {\n this.elementLinks.dropDownMenu.style.height = this.player.playlist.length * 2.08333 + 'em';\n }\n }\n\n private injectPlayListEventListener() {\n Array.prototype.forEach.call(this.elementLinks.playlistItems,((i: Element, index: number) => {\n i.addEventListener('click', (event) => {\n this.handleClickPlayList(index, event);\n })\n }))\n }\n\n private injectEventListener() {\n this.elementLinks.button.play.addEventListener('click', this.handleClickPlayButton);\n this.elementLinks.button.prev.addEventListener('click', this.handleClickPrevButton);\n this.elementLinks.button.next.addEventListener('click', this.handleClickNextButton);\n this.elementLinks.button.volume.addEventListener('click', this.handleClickVolumeButton);\n this.elementLinks.button.list.addEventListener('click', this.handleClickListButton);\n this.elementLinks.button.mode.addEventListener('click', this.handleClickModeButton);\n this.elementLinks.volumeController.addEventListener('mousemove', this.handleMouseVolumeController)\n this.elementLinks.volumeController.addEventListener('mousedown', this.handleMouseVolumeController)\n this.elementLinks.volumeController.addEventListener('touchmove', this.handleTouchVolumeController, {passive: true} as any)\n\n this.elementLinks.progress.addEventListener('mousemove', this.handleMouseProgress)\n this.elementLinks.progress.addEventListener('mousedown', this.handleMouseProgress)\n this.elementLinks.progress.addEventListener('touchmove', this.handleTouchProgress, {passive: true} as any)\n\n this.player.addListener('playstatechange', this.handlePlayStateChange);\n this.player.addListener('timeupdate', this.handleTimeUpdate);\n this.player.addListener('openaudio', this.handleOpenAudio);\n this.player.addListener('volumechange', this.handleVolumeChange);\n this.player.addListener('playmodechange', this.handleModeChange);\n this.player.addListener('playlistchange', this.handlePlaylistchange);\n this.player.addListener('audioelementchange', this.handleAudioElementChange);\n this.injectPlayListEventListener();\n }\n\n private handlePlaylistchange = () => {\n this.updatePlaylist()\n }\n\n private updateLyric(playedTime: number = 0) {\n if (!this.player.nowplay) {\n this.setLyric(null);\n return;\n }\n\n if (this.player.nowplay.lyric && typeof this.player.nowplay.lyric !== 'string' && this.player.played) {\n let lyric = this.player.nowplay.lyric.getLyric(playedTime * 1000);\n let nextLyric = this.player.nowplay.lyric.getNextLyric(playedTime * 1000);\n if (lyric) {\n let sublyric: ILyricItem;\n if (this.player.nowplay.sublyric && typeof this.player.nowplay.sublyric !== 'string') {\n sublyric = this.player.nowplay.sublyric.getLyric(playedTime * 1000);\n }\n if (nextLyric) {\n let duration = nextLyric.time - lyric.time;\n let currentTime = playedTime * 1000 - lyric.time;\n this.setLyric(buildLyric(lyric.word, sublyric ? sublyric.word : undefined, this.options.zoomOutKana), currentTime, duration);\n } else {\n let duration = this.player.duration - lyric.time;\n let currentTime = playedTime * 1000 - lyric.time;\n this.setLyric(buildLyric(lyric.word, sublyric ? sublyric.word : undefined, this.options.zoomOutKana), currentTime, duration);\n }\n } else {\n this.setLyric(buildLyric(this.player.nowplay.name, this.player.nowplay.artist, false), playedTime * 1000, nextLyric.time);\n }\n } else {\n this.setLyric(buildLyric(this.player.nowplay.name, this.player.nowplay.artist, false));\n }\n }\n\n private handleClickListButton = () => {\n this.toggleDropDownMenu();\n }\n\n private handleClickModeButton = () => {\n this.player.toggleMode();\n }\n\n private handleClickPlayList = (point: number, event: Event) => {\n if (this.player.nowplaypoint !== point){\n this.player.to(point);\n this.player.play();\n }\n }\n\n private handleClickPlayButton = () => {\n this.player.togglePlayState();\n }\n\n private handleClickVolumeButton = () => {\n this.toggleVolumeControllerKeepShow();\n }\n\n private handleOpenAudio = (audio: IAudioItem) => {\n if (audio.type !== 'video') {\n this.setPoster(audio.poster || defaultPoster);\n } else {\n this.setPoster('none');\n }\n this.setProgress(0,0,0);\n this.elementLinks.title.innerText = audio.name;\n this.elementLinks.artist.innerText = audio.artist || '';\n this.updateLyric();\n this.updatePlaylist();\n }\n\n private handleModeChange = (mode: string) => {\n this.setMode(mode);\n }\n\n private handleVolumeChange = (volume: number) => {\n this.setVolume(volume);\n };\n\n private handleTimeUpdate = (playedTime: number, time: number) => {\n this.setProgress(playedTime / time, playedTime, time);\n this.updateLyric(playedTime);\n }\n\n private handleClickPrevButton = () => {\n this.player.prev();\n this.player.play();\n }\n\n private handleClickNextButton = () => {\n this.player.next();\n this.player.play();\n }\n\n private handlePlayStateChange = (paused: boolean) => {\n this.setPlayIcon(paused);\n }\n\n private handleMouseVolumeController = (event: MouseEvent) => {\n this.removeVolumeControllerKeepShow()\n if (event.buttons === 1 || typeof event.buttons === 'undefined' && event.which === 1) {\n let volume = Math.max(0, Math.min(1.0,\n (event.clientX - this.elementLinks.volumeController.getBoundingClientRect().left) / this.elementLinks.volumeController.clientWidth\n ));\n this.player.setVolume(volume);\n this.setVolume(volume);\n }\n };\n\n private handleTouchVolumeController = (event: TouchEvent) => {\n this.removeVolumeControllerKeepShow()\n let volume = Math.max(0, Math.min(1.0,\n (event.targetTouches[0].clientX - this.elementLinks.volumeController.getBoundingClientRect().left) / this.elementLinks.volumeController.clientWidth\n ));\n this.player.setVolume(volume);\n this.setVolume(volume);\n };\n\n private handleAudioElementChange = (element: HTMLAudioElement | HTMLVideoElement) => {\n if (element instanceof HTMLVideoElement) {\n this.elementLinks.poster.appendChild(element);\n }\n else {\n this.elementLinks.poster.innerHTML = '';\n }\n }\n\n private handleMouseProgress = (event: MouseEvent) => {\n if (event.buttons === 1 || typeof event.buttons === 'undefined' && event.which === 1) {\n let progress = Math.max(0, Math.min(1.0,\n (event.clientX - this.elementLinks.progress.getBoundingClientRect().left) / this.elementLinks.progress.clientWidth\n ));\n this.player.setCurrentTime(progress * 100 + '%');\n }\n };\n\n private handleTouchProgress = (event: TouchEvent) => {\n let progress = Math.max(0, Math.min(1.0,\n (event.targetTouches[0].clientX - this.elementLinks.progress.getBoundingClientRect().left) / this.elementLinks.progress.clientWidth\n ));\n this.player.setCurrentTime(progress * 100 + '%');\n }\n\n public destroy() {\n this.rootElement.parentElement.removeChild(this.rootElement);\n }\n}\n" }, { "path": "src/manifest.json", "content": "{\n \"short_name\": \"cPlayer\",\n \"name\": \"A beautiful and clean WEB Music Player by HTML5.\",\n \"start_url\": \"index.html\"\n }" }, { "path": "src/neko.css", "content": "body {\n margin: 0px;\n font-family: \"Roboto\", sans-serif;\n -webkit-font-smoothing: antialiased; }\n\n*,\n*::before,\n*::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n\n.neko-container {\n padding-right: 8px;\n padding-left: 8px;\n margin-right: auto;\n margin-left: auto;\n max-width: 980px;\n position: relative; }\n @media (min-width: 576px) {\n .neko-container {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 768px) {\n .neko-container {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 992px) {\n .neko-container {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 1200px) {\n .neko-container {\n padding-right: 8px;\n padding-left: 8px; } }\n\n.neko-container-fluid {\n padding-right: 8px;\n padding-left: 8px;\n position: relative; }\n @media (min-width: 576px) {\n .neko-container-fluid {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 768px) {\n .neko-container-fluid {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 992px) {\n .neko-container-fluid {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 1200px) {\n .neko-container-fluid {\n padding-right: 8px;\n padding-left: 8px; } }\n\n.neko-row {\n margin-right: -8px;\n margin-left: -8px;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n position: relative; }\n @media (min-width: 576px) {\n .neko-row {\n margin-right: -8px;\n margin-left: -8px; } }\n @media (min-width: 768px) {\n .neko-row {\n margin-right: -8px;\n margin-left: -8px; } }\n @media (min-width: 992px) {\n .neko-row {\n margin-right: -8px;\n margin-left: -8px; } }\n @media (min-width: 1200px) {\n .neko-row {\n margin-right: -8px;\n margin-left: -8px; } }\n\n.neko-no-gutters {\n margin-right: 0;\n margin-left: 0; }\n .neko-no-gutters > .col,\n .neko-no-gutters > [class*=\"col-\"] {\n padding-right: 0;\n padding-left: 0; }\n\n.neko-no-gutters {\n margin-right: 0;\n margin-left: 0; }\n .neko-no-gutters > .col,\n .neko-no-gutters > [class*=\"col-\"] {\n padding-right: 0;\n padding-left: 0; }\n\n.neko-col-1, .neko-col-2, .neko-col-3, .neko-col-4, .neko-col-5, .neko-col-6, .neko-col-7, .neko-col-8, .neko-col-9, .neko-col-10, .neko-col-11, .neko-col-12, .neko-col,\n.neko-col-auto, .neko-col-sm-1, .neko-col-sm-2, .neko-col-sm-3, .neko-col-sm-4, .neko-col-sm-5, .neko-col-sm-6, .neko-col-sm-7, .neko-col-sm-8, .neko-col-sm-9, .neko-col-sm-10, .neko-col-sm-11, .neko-col-sm-12, .neko-col-sm,\n.neko-col-sm-auto, .neko-col-md-1, .neko-col-md-2, .neko-col-md-3, .neko-col-md-4, .neko-col-md-5, .neko-col-md-6, .neko-col-md-7, .neko-col-md-8, .neko-col-md-9, .neko-col-md-10, .neko-col-md-11, .neko-col-md-12, .neko-col-md,\n.neko-col-md-auto, .neko-col-lg-1, .neko-col-lg-2, .neko-col-lg-3, .neko-col-lg-4, .neko-col-lg-5, .neko-col-lg-6, .neko-col-lg-7, .neko-col-lg-8, .neko-col-lg-9, .neko-col-lg-10, .neko-col-lg-11, .neko-col-lg-12, .neko-col-lg,\n.neko-col-lg-auto, .neko-col-xl-1, .neko-col-xl-2, .neko-col-xl-3, .neko-col-xl-4, .neko-col-xl-5, .neko-col-xl-6, .neko-col-xl-7, .neko-col-xl-8, .neko-col-xl-9, .neko-col-xl-10, .neko-col-xl-11, .neko-col-xl-12, .neko-col-xl,\n.neko-col-xl-auto {\n position: relative;\n width: 100%;\n min-height: 1px;\n padding-right: 8px;\n padding-left: 8px; }\n @media (min-width: 576px) {\n .neko-col-1, .neko-col-2, .neko-col-3, .neko-col-4, .neko-col-5, .neko-col-6, .neko-col-7, .neko-col-8, .neko-col-9, .neko-col-10, .neko-col-11, .neko-col-12, .neko-col,\n .neko-col-auto, .neko-col-sm-1, .neko-col-sm-2, .neko-col-sm-3, .neko-col-sm-4, .neko-col-sm-5, .neko-col-sm-6, .neko-col-sm-7, .neko-col-sm-8, .neko-col-sm-9, .neko-col-sm-10, .neko-col-sm-11, .neko-col-sm-12, .neko-col-sm,\n .neko-col-sm-auto, .neko-col-md-1, .neko-col-md-2, .neko-col-md-3, .neko-col-md-4, .neko-col-md-5, .neko-col-md-6, .neko-col-md-7, .neko-col-md-8, .neko-col-md-9, .neko-col-md-10, .neko-col-md-11, .neko-col-md-12, .neko-col-md,\n .neko-col-md-auto, .neko-col-lg-1, .neko-col-lg-2, .neko-col-lg-3, .neko-col-lg-4, .neko-col-lg-5, .neko-col-lg-6, .neko-col-lg-7, .neko-col-lg-8, .neko-col-lg-9, .neko-col-lg-10, .neko-col-lg-11, .neko-col-lg-12, .neko-col-lg,\n .neko-col-lg-auto, .neko-col-xl-1, .neko-col-xl-2, .neko-col-xl-3, .neko-col-xl-4, .neko-col-xl-5, .neko-col-xl-6, .neko-col-xl-7, .neko-col-xl-8, .neko-col-xl-9, .neko-col-xl-10, .neko-col-xl-11, .neko-col-xl-12, .neko-col-xl,\n .neko-col-xl-auto {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 768px) {\n .neko-col-1, .neko-col-2, .neko-col-3, .neko-col-4, .neko-col-5, .neko-col-6, .neko-col-7, .neko-col-8, .neko-col-9, .neko-col-10, .neko-col-11, .neko-col-12, .neko-col,\n .neko-col-auto, .neko-col-sm-1, .neko-col-sm-2, .neko-col-sm-3, .neko-col-sm-4, .neko-col-sm-5, .neko-col-sm-6, .neko-col-sm-7, .neko-col-sm-8, .neko-col-sm-9, .neko-col-sm-10, .neko-col-sm-11, .neko-col-sm-12, .neko-col-sm,\n .neko-col-sm-auto, .neko-col-md-1, .neko-col-md-2, .neko-col-md-3, .neko-col-md-4, .neko-col-md-5, .neko-col-md-6, .neko-col-md-7, .neko-col-md-8, .neko-col-md-9, .neko-col-md-10, .neko-col-md-11, .neko-col-md-12, .neko-col-md,\n .neko-col-md-auto, .neko-col-lg-1, .neko-col-lg-2, .neko-col-lg-3, .neko-col-lg-4, .neko-col-lg-5, .neko-col-lg-6, .neko-col-lg-7, .neko-col-lg-8, .neko-col-lg-9, .neko-col-lg-10, .neko-col-lg-11, .neko-col-lg-12, .neko-col-lg,\n .neko-col-lg-auto, .neko-col-xl-1, .neko-col-xl-2, .neko-col-xl-3, .neko-col-xl-4, .neko-col-xl-5, .neko-col-xl-6, .neko-col-xl-7, .neko-col-xl-8, .neko-col-xl-9, .neko-col-xl-10, .neko-col-xl-11, .neko-col-xl-12, .neko-col-xl,\n .neko-col-xl-auto {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 992px) {\n .neko-col-1, .neko-col-2, .neko-col-3, .neko-col-4, .neko-col-5, .neko-col-6, .neko-col-7, .neko-col-8, .neko-col-9, .neko-col-10, .neko-col-11, .neko-col-12, .neko-col,\n .neko-col-auto, .neko-col-sm-1, .neko-col-sm-2, .neko-col-sm-3, .neko-col-sm-4, .neko-col-sm-5, .neko-col-sm-6, .neko-col-sm-7, .neko-col-sm-8, .neko-col-sm-9, .neko-col-sm-10, .neko-col-sm-11, .neko-col-sm-12, .neko-col-sm,\n .neko-col-sm-auto, .neko-col-md-1, .neko-col-md-2, .neko-col-md-3, .neko-col-md-4, .neko-col-md-5, .neko-col-md-6, .neko-col-md-7, .neko-col-md-8, .neko-col-md-9, .neko-col-md-10, .neko-col-md-11, .neko-col-md-12, .neko-col-md,\n .neko-col-md-auto, .neko-col-lg-1, .neko-col-lg-2, .neko-col-lg-3, .neko-col-lg-4, .neko-col-lg-5, .neko-col-lg-6, .neko-col-lg-7, .neko-col-lg-8, .neko-col-lg-9, .neko-col-lg-10, .neko-col-lg-11, .neko-col-lg-12, .neko-col-lg,\n .neko-col-lg-auto, .neko-col-xl-1, .neko-col-xl-2, .neko-col-xl-3, .neko-col-xl-4, .neko-col-xl-5, .neko-col-xl-6, .neko-col-xl-7, .neko-col-xl-8, .neko-col-xl-9, .neko-col-xl-10, .neko-col-xl-11, .neko-col-xl-12, .neko-col-xl,\n .neko-col-xl-auto {\n padding-right: 8px;\n padding-left: 8px; } }\n @media (min-width: 1200px) {\n .neko-col-1, .neko-col-2, .neko-col-3, .neko-col-4, .neko-col-5, .neko-col-6, .neko-col-7, .neko-col-8, .neko-col-9, .neko-col-10, .neko-col-11, .neko-col-12, .neko-col,\n .neko-col-auto, .neko-col-sm-1, .neko-col-sm-2, .neko-col-sm-3, .neko-col-sm-4, .neko-col-sm-5, .neko-col-sm-6, .neko-col-sm-7, .neko-col-sm-8, .neko-col-sm-9, .neko-col-sm-10, .neko-col-sm-11, .neko-col-sm-12, .neko-col-sm,\n .neko-col-sm-auto, .neko-col-md-1, .neko-col-md-2, .neko-col-md-3, .neko-col-md-4, .neko-col-md-5, .neko-col-md-6, .neko-col-md-7, .neko-col-md-8, .neko-col-md-9, .neko-col-md-10, .neko-col-md-11, .neko-col-md-12, .neko-col-md,\n .neko-col-md-auto, .neko-col-lg-1, .neko-col-lg-2, .neko-col-lg-3, .neko-col-lg-4, .neko-col-lg-5, .neko-col-lg-6, .neko-col-lg-7, .neko-col-lg-8, .neko-col-lg-9, .neko-col-lg-10, .neko-col-lg-11, .neko-col-lg-12, .neko-col-lg,\n .neko-col-lg-auto, .neko-col-xl-1, .neko-col-xl-2, .neko-col-xl-3, .neko-col-xl-4, .neko-col-xl-5, .neko-col-xl-6, .neko-col-xl-7, .neko-col-xl-8, .neko-col-xl-9, .neko-col-xl-10, .neko-col-xl-11, .neko-col-xl-12, .neko-col-xl,\n .neko-col-xl-auto {\n padding-right: 8px;\n padding-left: 8px; } }\n\n@media (max-width: 575px) {\n .neko-hidden-down {\n display: none; } }\n\n.neko-col {\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n max-width: 100%; }\n\n.neko-col-auto {\n -webkit-box-flex: 0;\n -webkit-flex: 0 0 auto;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: auto; }\n\n.neko-hidden-up {\n display: none; }\n\n.neko-col-1 {\n width: 8.33333%; }\n\n.neko-col-2 {\n width: 16.66667%; }\n\n.neko-col-3 {\n width: 25%; }\n\n.neko-col-4 {\n width: 33.33333%; }\n\n.neko-col-5 {\n width: 41.66667%; }\n\n.neko-col-6 {\n width: 50%; }\n\n.neko-col-7 {\n width: 58.33333%; }\n\n.neko-col-8 {\n width: 66.66667%; }\n\n.neko-col-9 {\n width: 75%; }\n\n.neko-col-10 {\n width: 83.33333%; }\n\n.neko-col-11 {\n width: 91.66667%; }\n\n.neko-col-12 {\n width: 100%; }\n\n.neko-offset-1 {\n margin-left: 8.33333%; }\n\n.neko-offset-2 {\n margin-left: 16.66667%; }\n\n.neko-offset-3 {\n margin-left: 25%; }\n\n.neko-offset-4 {\n margin-left: 33.33333%; }\n\n.neko-offset-5 {\n margin-left: 41.66667%; }\n\n.neko-offset-6 {\n margin-left: 50%; }\n\n.neko-offset-7 {\n margin-left: 58.33333%; }\n\n.neko-offset-8 {\n margin-left: 66.66667%; }\n\n.neko-offset-9 {\n margin-left: 75%; }\n\n.neko-offset-10 {\n margin-left: 83.33333%; }\n\n.neko-offset-11 {\n margin-left: 91.66667%; }\n\n@media (max-width: 767px) {\n .neko-hidden-sm-down {\n display: none; } }\n\n@media (min-width: 576px) {\n .neko-col-sm {\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n max-width: 100%; }\n .neko-col-sm-auto {\n -webkit-box-flex: 0;\n -webkit-flex: 0 0 auto;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: auto; }\n .neko-hidden-sm-up {\n display: none; }\n .neko-col-sm-1 {\n width: 8.33333%; }\n .neko-col-sm-2 {\n width: 16.66667%; }\n .neko-col-sm-3 {\n width: 25%; }\n .neko-col-sm-4 {\n width: 33.33333%; }\n .neko-col-sm-5 {\n width: 41.66667%; }\n .neko-col-sm-6 {\n width: 50%; }\n .neko-col-sm-7 {\n width: 58.33333%; }\n .neko-col-sm-8 {\n width: 66.66667%; }\n .neko-col-sm-9 {\n width: 75%; }\n .neko-col-sm-10 {\n width: 83.33333%; }\n .neko-col-sm-11 {\n width: 91.66667%; }\n .neko-col-sm-12 {\n width: 100%; }\n .neko-offset-sm-1 {\n margin-left: 8.33333%; }\n .neko-offset-sm-2 {\n margin-left: 16.66667%; }\n .neko-offset-sm-3 {\n margin-left: 25%; }\n .neko-offset-sm-4 {\n margin-left: 33.33333%; }\n .neko-offset-sm-5 {\n margin-left: 41.66667%; }\n .neko-offset-sm-6 {\n margin-left: 50%; }\n .neko-offset-sm-7 {\n margin-left: 58.33333%; }\n .neko-offset-sm-8 {\n margin-left: 66.66667%; }\n .neko-offset-sm-9 {\n margin-left: 75%; }\n .neko-offset-sm-10 {\n margin-left: 83.33333%; }\n .neko-offset-sm-11 {\n margin-left: 91.66667%; } }\n\n@media (max-width: 991px) {\n .neko-hidden-md-down {\n display: none; } }\n\n@media (min-width: 768px) {\n .neko-col-md {\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n max-width: 100%; }\n .neko-col-md-auto {\n -webkit-box-flex: 0;\n -webkit-flex: 0 0 auto;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: auto; }\n .neko-hidden-md-up {\n display: none; }\n .neko-col-md-1 {\n width: 8.33333%; }\n .neko-col-md-2 {\n width: 16.66667%; }\n .neko-col-md-3 {\n width: 25%; }\n .neko-col-md-4 {\n width: 33.33333%; }\n .neko-col-md-5 {\n width: 41.66667%; }\n .neko-col-md-6 {\n width: 50%; }\n .neko-col-md-7 {\n width: 58.33333%; }\n .neko-col-md-8 {\n width: 66.66667%; }\n .neko-col-md-9 {\n width: 75%; }\n .neko-col-md-10 {\n width: 83.33333%; }\n .neko-col-md-11 {\n width: 91.66667%; }\n .neko-col-md-12 {\n width: 100%; }\n .neko-offset-md-1 {\n margin-left: 8.33333%; }\n .neko-offset-md-2 {\n margin-left: 16.66667%; }\n .neko-offset-md-3 {\n margin-left: 25%; }\n .neko-offset-md-4 {\n margin-left: 33.33333%; }\n .neko-offset-md-5 {\n margin-left: 41.66667%; }\n .neko-offset-md-6 {\n margin-left: 50%; }\n .neko-offset-md-7 {\n margin-left: 58.33333%; }\n .neko-offset-md-8 {\n margin-left: 66.66667%; }\n .neko-offset-md-9 {\n margin-left: 75%; }\n .neko-offset-md-10 {\n margin-left: 83.33333%; }\n .neko-offset-md-11 {\n margin-left: 91.66667%; } }\n\n@media (max-width: 1199px) {\n .neko-hidden-lg-down {\n display: none; } }\n\n@media (min-width: 992px) {\n .neko-col-lg {\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n max-width: 100%; }\n .neko-col-lg-auto {\n -webkit-box-flex: 0;\n -webkit-flex: 0 0 auto;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: auto; }\n .neko-hidden-lg-up {\n display: none; }\n .neko-col-lg-1 {\n width: 8.33333%; }\n .neko-col-lg-2 {\n width: 16.66667%; }\n .neko-col-lg-3 {\n width: 25%; }\n .neko-col-lg-4 {\n width: 33.33333%; }\n .neko-col-lg-5 {\n width: 41.66667%; }\n .neko-col-lg-6 {\n width: 50%; }\n .neko-col-lg-7 {\n width: 58.33333%; }\n .neko-col-lg-8 {\n width: 66.66667%; }\n .neko-col-lg-9 {\n width: 75%; }\n .neko-col-lg-10 {\n width: 83.33333%; }\n .neko-col-lg-11 {\n width: 91.66667%; }\n .neko-col-lg-12 {\n width: 100%; }\n .neko-offset-lg-1 {\n margin-left: 8.33333%; }\n .neko-offset-lg-2 {\n margin-left: 16.66667%; }\n .neko-offset-lg-3 {\n margin-left: 25%; }\n .neko-offset-lg-4 {\n margin-left: 33.33333%; }\n .neko-offset-lg-5 {\n margin-left: 41.66667%; }\n .neko-offset-lg-6 {\n margin-left: 50%; }\n .neko-offset-lg-7 {\n margin-left: 58.33333%; }\n .neko-offset-lg-8 {\n margin-left: 66.66667%; }\n .neko-offset-lg-9 {\n margin-left: 75%; }\n .neko-offset-lg-10 {\n margin-left: 83.33333%; }\n .neko-offset-lg-11 {\n margin-left: 91.66667%; } }\n\n.neko-hidden-xl-down {\n display: none; }\n\n@media (min-width: 1200px) {\n .neko-col-xl {\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n max-width: 100%; }\n .neko-col-xl-auto {\n -webkit-box-flex: 0;\n -webkit-flex: 0 0 auto;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: auto; }\n .neko-hidden-xl-up {\n display: none; }\n .neko-col-xl-1 {\n width: 8.33333%; }\n .neko-col-xl-2 {\n width: 16.66667%; }\n .neko-col-xl-3 {\n width: 25%; }\n .neko-col-xl-4 {\n width: 33.33333%; }\n .neko-col-xl-5 {\n width: 41.66667%; }\n .neko-col-xl-6 {\n width: 50%; }\n .neko-col-xl-7 {\n width: 58.33333%; }\n .neko-col-xl-8 {\n width: 66.66667%; }\n .neko-col-xl-9 {\n width: 75%; }\n .neko-col-xl-10 {\n width: 83.33333%; }\n .neko-col-xl-11 {\n width: 91.66667%; }\n .neko-col-xl-12 {\n width: 100%; }\n .neko-offset-xl-1 {\n margin-left: 8.33333%; }\n .neko-offset-xl-2 {\n margin-left: 16.66667%; }\n .neko-offset-xl-3 {\n margin-left: 25%; }\n .neko-offset-xl-4 {\n margin-left: 33.33333%; }\n .neko-offset-xl-5 {\n margin-left: 41.66667%; }\n .neko-offset-xl-6 {\n margin-left: 50%; }\n .neko-offset-xl-7 {\n margin-left: 58.33333%; }\n .neko-offset-xl-8 {\n margin-left: 66.66667%; }\n .neko-offset-xl-9 {\n margin-left: 75%; }\n .neko-offset-xl-10 {\n margin-left: 83.33333%; }\n .neko-offset-xl-11 {\n margin-left: 91.66667%; } }\n\n.neko-btn {\n display: inline-block;\n height: 36px;\n line-height: 36px;\n min-width: 88px;\n margin: 0;\n padding: 0 5px;\n font-family: \"Roboto\", sans-serif;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n outline: none;\n position: relative;\n border-radius: 2px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n overflow: hidden;\n text-align: center;\n -webkit-tap-highlight-color: transparent;\n -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, -webkit-transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, -webkit-transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n -o-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, -o-transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, -webkit-transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, -o-transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }\n @media (min-width: 576px) {\n .neko-btn {\n -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } }\n\n.neko-btn {\n color: #ffffff;\n border: 1px solid #5a666f;\n background-color: #5a666f; }\n .neko-btn:hover {\n background-color: #313439; }\n .neko-btn.outline {\n color: #5a666f;\n background-color: transparent; }\n .neko-btn.outline:hover {\n color: #ffffff;\n background-color: #5a666f; }\n .neko-btn.shadow:hover {\n -webkit-box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;\n box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; }\n .neko-btn.merge {\n color: #5a666f;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge:hover {\n color: #ffffff;\n background-color: #5a666f; }\n\n.neko-btn.neko-color-black {\n color: #ffffff;\n border: 1px solid #5a666f;\n background-color: #5a666f; }\n .neko-btn.neko-color-black:hover {\n background-color: #313439; }\n\n.neko-btn.neko-color-white {\n color: #ffffff;\n border: 1px solid #ffffff;\n background-color: #ffffff; }\n\n.neko-btn.neko-color-red {\n color: #ffffff;\n border: 1px solid #d32f2f;\n background-color: #d32f2f; }\n .neko-btn.neko-color-red:hover {\n background-color: #c62828; }\n\n.neko-btn.neko-color-pink {\n color: #ffffff;\n border: 1px solid #c2185b;\n background-color: #c2185b; }\n .neko-btn.neko-color-pink:hover {\n background-color: #880e4f; }\n\n.neko-btn.neko-color-purple {\n color: #ffffff;\n border: 1px solid #7b1fa2;\n background-color: #7b1fa2; }\n .neko-btn.neko-color-purple:hover {\n background-color: #c62828; }\n\n.neko-btn.neko-color-deep-purple {\n color: #ffffff;\n border: 1px solid #512da8;\n background-color: #512da8; }\n .neko-btn.neko-color-deep-purple:hover {\n background-color: #4527a0; }\n\n.neko-btn.neko-color-indigo {\n color: #ffffff;\n border: 1px solid #303f9f;\n background-color: #303f9f; }\n .neko-btn.neko-color-indigo:hover {\n background-color: #283593; }\n\n.neko-btn.neko-color-blue {\n color: #ffffff;\n border: 1px solid #1976d2;\n background-color: #1976d2; }\n .neko-btn.neko-color-blue:hover {\n background-color: #1565c0; }\n\n.neko-btn.neko-color-light-blue {\n color: #ffffff;\n border: 1px solid #0288d1;\n background-color: #0288d1; }\n .neko-btn.neko-color-light-blue:hover {\n background-color: #0277bd; }\n\n.neko-btn.neko-color-cyan {\n color: #ffffff;\n border: 1px solid #0097a7;\n background-color: #0097a7; }\n .neko-btn.neko-color-cyan:hover {\n background-color: #00838f; }\n\n.neko-btn.neko-color-teal {\n color: #ffffff;\n border: 1px solid #00796b;\n background-color: #00796b; }\n .neko-btn.neko-color-teal:hover {\n background-color: #00695c; }\n\n.neko-btn.neko-color-green {\n color: #ffffff;\n border: 1px solid #388e3c;\n background-color: #388e3c; }\n .neko-btn.neko-color-green:hover {\n background-color: #2e7d32; }\n\n.neko-btn.neko-color-light-green {\n color: #ffffff;\n border: 1px solid #689f38;\n background-color: #689f38; }\n .neko-btn.neko-color-light-green:hover {\n background-color: #558b2f; }\n\n.neko-btn.neko-color-lime {\n color: #ffffff;\n border: 1px solid #afb42b;\n background-color: #afb42b; }\n .neko-btn.neko-color-lime:hover {\n background-color: #9e9d24; }\n\n.neko-btn.neko-color-yellow {\n color: #ffffff;\n border: 1px solid #fbc02d;\n background-color: #fbc02d; }\n .neko-btn.neko-color-yellow:hover {\n background-color: #f9a825; }\n\n.neko-btn.neko-color-amber {\n color: #ffffff;\n border: 1px solid #ffa000;\n background-color: #ffa000; }\n .neko-btn.neko-color-amber:hover {\n background-color: #ff8f00; }\n\n.neko-btn.neko-color-orange {\n color: #ffffff;\n border: 1px solid #f57c00;\n background-color: #f57c00; }\n .neko-btn.neko-color-orange:hover {\n background-color: #ef6c00; }\n\n.neko-btn.neko-color-deep-orange {\n color: #ffffff;\n border: 1px solid #e64a19;\n background-color: #e64a19; }\n .neko-btn.neko-color-deep-orange:hover {\n background-color: #d84315; }\n\n.neko-btn.neko-color-brown {\n color: #ffffff;\n border: 1px solid #5d4037;\n background-color: #5d4037; }\n .neko-btn.neko-color-brown:hover {\n background-color: #4e342e; }\n\n.neko-btn.neko-color-grey {\n color: #ffffff;\n border: 1px solid #616161;\n background-color: #616161; }\n .neko-btn.neko-color-grey:hover {\n background-color: #424242; }\n\n.neko-btn.neko-color-blue-grey {\n color: #ffffff;\n border: 1px solid #455a64;\n background-color: #455a64; }\n .neko-btn.neko-color-blue-grey:hover {\n background-color: #37474f; }\n\n.neko-btn.outline.neko-color-black {\n color: #5a666f;\n background-color: transparent; }\n .neko-btn.outline.neko-color-black:hover {\n color: #ffffff;\n background-color: #5a666f; }\n\n.neko-btn.outline.neko-color-white {\n color: #ffffff;\n background-color: transparent; }\n .neko-btn.outline.neko-color-white:hover {\n color: #ffffff;\n background-color: #ffffff; }\n\n.neko-btn.outline.neko-color-red {\n color: #d32f2f;\n background-color: transparent; }\n .neko-btn.outline.neko-color-red:hover {\n color: #ffffff;\n background-color: #d32f2f; }\n\n.neko-btn.outline.neko-color-pink {\n color: #c2185b;\n background-color: transparent; }\n .neko-btn.outline.neko-color-pink:hover {\n color: #ffffff;\n background-color: #c2185b; }\n\n.neko-btn.outline.neko-color-purple {\n color: #7b1fa2;\n background-color: transparent; }\n .neko-btn.outline.neko-color-purple:hover {\n color: #ffffff;\n background-color: #7b1fa2; }\n\n.neko-btn.outline.neko-color-deep-purple {\n color: #512da8;\n background-color: transparent; }\n .neko-btn.outline.neko-color-deep-purple:hover {\n color: #ffffff;\n background-color: #512da8; }\n\n.neko-btn.outline.neko-color-indigo {\n color: #303f9f;\n background-color: transparent; }\n .neko-btn.outline.neko-color-indigo:hover {\n color: #ffffff;\n background-color: #303f9f; }\n\n.neko-btn.outline.neko-color-blue {\n color: #1976d2;\n background-color: transparent; }\n .neko-btn.outline.neko-color-blue:hover {\n color: #ffffff;\n background-color: #1976d2; }\n\n.neko-btn.outline.neko-color-light-blue {\n color: #0288d1;\n background-color: transparent; }\n .neko-btn.outline.neko-color-light-blue:hover {\n color: #ffffff;\n background-color: #0288d1; }\n\n.neko-btn.outline.neko-color-cyan {\n color: #0097a7;\n background-color: transparent; }\n .neko-btn.outline.neko-color-cyan:hover {\n color: #ffffff;\n background-color: #0097a7; }\n\n.neko-btn.outline.neko-color-teal {\n color: #00796b;\n background-color: transparent; }\n .neko-btn.outline.neko-color-teal:hover {\n color: #ffffff;\n background-color: #00796b; }\n\n.neko-btn.outline.neko-color-green {\n color: #388e3c;\n background-color: transparent; }\n .neko-btn.outline.neko-color-green:hover {\n color: #ffffff;\n background-color: #388e3c; }\n\n.neko-btn.outline.neko-color-light-green {\n color: #689f38;\n background-color: transparent; }\n .neko-btn.outline.neko-color-light-green:hover {\n color: #ffffff;\n background-color: #689f38; }\n\n.neko-btn.outline.neko-color-lime {\n color: #afb42b;\n background-color: transparent; }\n .neko-btn.outline.neko-color-lime:hover {\n color: #ffffff;\n background-color: #afb42b; }\n\n.neko-btn.outline.neko-color-yellow {\n color: #fbc02d;\n background-color: transparent; }\n .neko-btn.outline.neko-color-yellow:hover {\n color: #ffffff;\n background-color: #fbc02d; }\n\n.neko-btn.outline.neko-color-amber {\n color: #ffa000;\n background-color: transparent; }\n .neko-btn.outline.neko-color-amber:hover {\n color: #ffffff;\n background-color: #ffa000; }\n\n.neko-btn.outline.neko-color-orange {\n color: #f57c00;\n background-color: transparent; }\n .neko-btn.outline.neko-color-orange:hover {\n color: #ffffff;\n background-color: #f57c00; }\n\n.neko-btn.outline.neko-color-deep-orange {\n color: #e64a19;\n background-color: transparent; }\n .neko-btn.outline.neko-color-deep-orange:hover {\n color: #ffffff;\n background-color: #e64a19; }\n\n.neko-btn.outline.neko-color-brown {\n color: #5d4037;\n background-color: transparent; }\n .neko-btn.outline.neko-color-brown:hover {\n color: #ffffff;\n background-color: #5d4037; }\n\n.neko-btn.outline.neko-color-grey {\n color: #616161;\n background-color: transparent; }\n .neko-btn.outline.neko-color-grey:hover {\n color: #ffffff;\n background-color: #616161; }\n\n.neko-btn.outline.neko-color-blue-grey {\n color: #455a64;\n background-color: transparent; }\n .neko-btn.outline.neko-color-blue-grey:hover {\n color: #ffffff;\n background-color: #455a64; }\n\n.neko-btn.merge.neko-color-black {\n color: #5a666f;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-black:hover {\n color: #ffffff;\n background-color: #5a666f; }\n\n.neko-btn.merge.neko-color-white {\n color: #ffffff;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-white:hover {\n color: #ffffff;\n background-color: #ffffff; }\n\n.neko-btn.merge.neko-color-red {\n color: #d32f2f;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-red:hover {\n color: #ffffff;\n background-color: #d32f2f; }\n\n.neko-btn.merge.neko-color-pink {\n color: #c2185b;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-pink:hover {\n color: #ffffff;\n background-color: #c2185b; }\n\n.neko-btn.merge.neko-color-purple {\n color: #7b1fa2;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-purple:hover {\n color: #ffffff;\n background-color: #7b1fa2; }\n\n.neko-btn.merge.neko-color-deep-purple {\n color: #512da8;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-deep-purple:hover {\n color: #ffffff;\n background-color: #512da8; }\n\n.neko-btn.merge.neko-color-indigo {\n color: #303f9f;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-indigo:hover {\n color: #ffffff;\n background-color: #303f9f; }\n\n.neko-btn.merge.neko-color-blue {\n color: #1976d2;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-blue:hover {\n color: #ffffff;\n background-color: #1976d2; }\n\n.neko-btn.merge.neko-color-light-blue {\n color: #0288d1;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-light-blue:hover {\n color: #ffffff;\n background-color: #0288d1; }\n\n.neko-btn.merge.neko-color-cyan {\n color: #0097a7;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-cyan:hover {\n color: #ffffff;\n background-color: #0097a7; }\n\n.neko-btn.merge.neko-color-teal {\n color: #00796b;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-teal:hover {\n color: #ffffff;\n background-color: #00796b; }\n\n.neko-btn.merge.neko-color-green {\n color: #388e3c;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-green:hover {\n color: #ffffff;\n background-color: #388e3c; }\n\n.neko-btn.merge.neko-color-light-green {\n color: #689f38;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-light-green:hover {\n color: #ffffff;\n background-color: #689f38; }\n\n.neko-btn.merge.neko-color-lime {\n color: #afb42b;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-lime:hover {\n color: #ffffff;\n background-color: #afb42b; }\n\n.neko-btn.merge.neko-color-yellow {\n color: #fbc02d;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-yellow:hover {\n color: #ffffff;\n background-color: #fbc02d; }\n\n.neko-btn.merge.neko-color-amber {\n color: #ffa000;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-amber:hover {\n color: #ffffff;\n background-color: #ffa000; }\n\n.neko-btn.merge.neko-color-orange {\n color: #f57c00;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-orange:hover {\n color: #ffffff;\n background-color: #f57c00; }\n\n.neko-btn.merge.neko-color-deep-orange {\n color: #e64a19;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-deep-orange:hover {\n color: #ffffff;\n background-color: #e64a19; }\n\n.neko-btn.merge.neko-color-brown {\n color: #5d4037;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-brown:hover {\n color: #ffffff;\n background-color: #5d4037; }\n\n.neko-btn.merge.neko-color-grey {\n color: #616161;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-grey:hover {\n color: #ffffff;\n background-color: #616161; }\n\n.neko-btn.merge.neko-color-blue-grey {\n color: #455a64;\n border: 0;\n background-color: transparent; }\n .neko-btn.merge.neko-color-blue-grey:hover {\n color: #ffffff;\n background-color: #455a64; }\n\n.neko-helper-center, .neko-container, .neko-container-fluid {\n display: block;\n margin-left: auto;\n margin-right: auto; }\n\n.neko-hidden {\n display: none; }\n\n.neko-m-l-1 {\n margin-left: 8px; }\n\n.neko-m-r-1 {\n margin-right: 8px; }\n\n.neko-m-t-1 {\n margin-top: 8px; }\n\n.neko-m-b-1 {\n margin-bottom: 8px; }\n\n.neko-m-h-1 {\n margin-left: 8px;\n margin-right: 8px; }\n\n.neko-m-v-1 {\n margin-top: 8px;\n margin-bottom: 8px; }\n\n.neko-m-l-2 {\n margin-left: 16px; }\n\n.neko-m-r-2 {\n margin-right: 16px; }\n\n.neko-m-t-2 {\n margin-top: 16px; }\n\n.neko-m-b-2 {\n margin-bottom: 16px; }\n\n.neko-m-h-2 {\n margin-left: 16px;\n margin-right: 16px; }\n\n.neko-m-v-2 {\n margin-top: 16px;\n margin-bottom: 16px; }\n\n.neko-m-l-3 {\n margin-left: 24px; }\n\n.neko-m-r-3 {\n margin-right: 24px; }\n\n.neko-m-t-3 {\n margin-top: 24px; }\n\n.neko-m-b-3 {\n margin-bottom: 24px; }\n\n.neko-m-h-3 {\n margin-left: 24px;\n margin-right: 24px; }\n\n.neko-m-v-3 {\n margin-top: 24px;\n margin-bottom: 24px; }\n\n.neko-m-l-4 {\n margin-left: 32px; }\n\n.neko-m-r-4 {\n margin-right: 32px; }\n\n.neko-m-t-4 {\n margin-top: 32px; }\n\n.neko-m-b-4 {\n margin-bottom: 32px; }\n\n.neko-m-h-4 {\n margin-left: 32px;\n margin-right: 32px; }\n\n.neko-m-v-4 {\n margin-top: 32px;\n margin-bottom: 32px; }\n\n.neko-m-l-5 {\n margin-left: 40px; }\n\n.neko-m-r-5 {\n margin-right: 40px; }\n\n.neko-m-t-5 {\n margin-top: 40px; }\n\n.neko-m-b-5 {\n margin-bottom: 40px; }\n\n.neko-m-h-5 {\n margin-left: 40px;\n margin-right: 40px; }\n\n.neko-m-v-5 {\n margin-top: 40px;\n margin-bottom: 40px; }\n\n.neko-p-l-1 {\n padding-left: 8px; }\n\n.neko-p-r-1 {\n padding-right: 8px; }\n\n.neko-p-t-1 {\n padding-top: 8px; }\n\n.neko-p-b-1 {\n padding-bottom: 8px; }\n\n.neko-p-h-1 {\n padding-left: 8px;\n padding-right: 8px; }\n\n.neko-p-v-1 {\n padding-top: 8px;\n padding-bottom: 8px; }\n\n.neko-p-l-2 {\n padding-left: 16px; }\n\n.neko-p-r-2 {\n padding-right: 16px; }\n\n.neko-p-t-2 {\n padding-top: 16px; }\n\n.neko-p-b-2 {\n padding-bottom: 16px; }\n\n.neko-p-h-2 {\n padding-left: 16px;\n padding-right: 16px; }\n\n.neko-p-v-2 {\n padding-top: 16px;\n padding-bottom: 16px; }\n\n.neko-p-l-3 {\n padding-left: 24px; }\n\n.neko-p-r-3 {\n padding-right: 24px; }\n\n.neko-p-t-3 {\n padding-top: 24px; }\n\n.neko-p-b-3 {\n padding-bottom: 24px; }\n\n.neko-p-h-3 {\n padding-left: 24px;\n padding-right: 24px; }\n\n.neko-p-v-3 {\n padding-top: 24px;\n padding-bottom: 24px; }\n\n.neko-p-l-4 {\n padding-left: 32px; }\n\n.neko-p-r-4 {\n padding-right: 32px; }\n\n.neko-p-t-4 {\n padding-top: 32px; }\n\n.neko-p-b-4 {\n padding-bottom: 32px; }\n\n.neko-p-h-4 {\n padding-left: 32px;\n padding-right: 32px; }\n\n.neko-p-v-4 {\n padding-top: 32px;\n padding-bottom: 32px; }\n\n.neko-p-l-5 {\n padding-left: 40px; }\n\n.neko-p-r-5 {\n padding-right: 40px; }\n\n.neko-p-t-5 {\n padding-top: 40px; }\n\n.neko-p-b-5 {\n padding-bottom: 40px; }\n\n.neko-p-h-5 {\n padding-left: 40px;\n padding-right: 40px; }\n\n.neko-p-v-5 {\n padding-top: 40px;\n padding-bottom: 40px; }" }, { "path": "src/scss/cplayer.scss", "content": "$name-prefix: \"cp-\";\r\n\r\n$primaryColor: #F44336;\r\n$primaryDarkColor: #B71C1C;\r\n$accentLightColor: #BDBDBD;\r\n$accentColor: #757575;\r\n$accentDarkColor: #616161;\r\n$TextColor: #424242;\r\n$backgroundColor: #fff;\r\n$base-font-size: 12px;\r\n$enable-transitions: true;\r\n\r\n@mixin transition($transition...) {\r\n @if $enable-transitions {\r\n transition: $transition;\r\n }\r\n}\r\n\r\n@function strip-units($number){\r\n @return $number / ($number * 0 + 1);\r\n}\r\n\r\n@function toem($target-size,$context:$base-font-size){\r\n @if not unitless($target-size){\r\n $target-size: strip-units($target-size);\r\n }\r\n @if not unitless($context){\r\n $context: strip-units($context);\r\n }\r\n @return ($target-size / $context) * 1em;\r\n}\r\n\r\n@mixin box_shadow ($level) {\r\n @if $level == 1 {\r\n box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;\r\n } @else if $level == 2 {\r\n box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;\r\n } @else if $level == 3 {\r\n box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;\r\n } @else if $level == 4 {\r\n box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;\r\n } @else if $level == 5 {\r\n box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;\r\n }\r\n}\r\n\r\n@keyframes miss-pointer-event {\r\n 0% {pointer-events: none;}\r\n 50% {pointer-events: none;}\r\n 100% {pointer-events: auto;}\r\n}\r\n\r\n$mainbody-height: toem(50px);\r\n$mainbody-width: toem(300px);\r\n$big-progress-height: toem(35px);\r\n$border-radius: toem(4px);\r\n\r\nc-player {\r\n display: inline-flex;\r\n flex-direction: column;\r\n position: relative;\r\n font-size: $base-font-size;\r\n width: 300px;\r\n text-align: left;\r\n\t.#{$name-prefix}mainbody {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: row;\r\n\t\tmin-height: $mainbody-height;\r\n min-width: $mainbody-width;\r\n flex-wrap: wrap;\r\n background-color: $backgroundColor;\r\n position: relative;\r\n z-index: 1;\r\n border-radius: $border-radius;\r\n @include box_shadow(1);\r\n > * {\r\n margin-right: toem(7px)\r\n }\r\n &:hover{\r\n & + .#{$name-prefix}drop-down-menu.#{$name-prefix}drop-down-menu-info {\r\n height: toem(25px);\r\n }\r\n }\r\n }\r\n .#{$name-prefix}drop-down-menu {\r\n $lineheight: 25px;\r\n $margin: 2px;\r\n margin: toem(0px) toem($margin) 0;\r\n display: block;\r\n text-align: center;\r\n font-size: toem(12px);\r\n line-height: toem($lineheight);\r\n background-color: rgba($backgroundColor, 0.6);\r\n position: relative;\r\n z-index: 0;\r\n height: toem(0px);\r\n overflow: hidden;\r\n border-bottom-right-radius: $border-radius;\r\n border-bottom-left-radius: $border-radius;\r\n @include box_shadow(1);\r\n @include transition(transform 0.25s ease 0.1s, height 0.25s ease 0.1s);\r\n span.#{$name-prefix}audio-title {\r\n max-width: toem(170px);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n span.#{$name-prefix}audio-artist {\r\n opacity: 0.6;\r\n max-width: toem(100px);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n &.#{$name-prefix}drop-down-menu-top {\r\n order: -1;\r\n }\r\n &.#{$name-prefix}drop-down-menu-none {\r\n display: none;\r\n }\r\n &.#{$name-prefix}drop-down-menu-bottom {\r\n order: 1;\r\n }\r\n &.#{$name-prefix}drop-down-menu-info .#{$name-prefix}playlist {\r\n display: none;\r\n }\r\n &.#{$name-prefix}drop-down-menu-info:hover {\r\n height: toem(25px);\r\n }\r\n &.#{$name-prefix}drop-down-menu-playlist .#{$name-prefix}audio-info {\r\n display: none;\r\n }\r\n &.#{$name-prefix}drop-down-menu-playlist {\r\n height: auto;\r\n }\r\n }\r\n .#{$name-prefix}playlist {\r\n margin: toem(0px);\r\n padding: toem(0px);\r\n list-style: none;\r\n text-align: left;\r\n li {\r\n padding: toem(0px) toem(10px);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n .#{$name-prefix}play-icon {\r\n display: inline-block;\r\n width: toem(12px);\r\n height: toem(12px);\r\n vertical-align: text-top;\r\n margin: 0px toem(5px) 0 0;\r\n fill: rgba($primaryDarkColor, 0.8);\r\n }\r\n cursor: pointer;\r\n }\r\n }\r\n .#{$name-prefix}playlist-artist {\r\n opacity: 0.46;\r\n }\r\n .#{$name-prefix}center-container {\r\n flex-grow: 1;\r\n position: relative;\r\n height: $mainbody-height;\r\n pointer-events: auto;\r\n .#{$name-prefix}controls {\r\n opacity: 0;\r\n }\r\n &:hover {\r\n .#{$name-prefix}controls {\r\n opacity: 1;\r\n animation: miss-pointer-event 100ms;\r\n animation-fill-mode: both;\r\n }\r\n .#{$name-prefix}lyric {\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n .#{$name-prefix}controls {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n @include transition(opacity 0.25s ease);\r\n > * {\r\n margin-right: toem(15px);\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n }\r\n .#{$name-prefix}lyric {\r\n $margin-left: toem(10px);\r\n $margin-top: toem(5px);\r\n display: flex;\r\n align-items: center;\r\n position: absolute;\r\n width: calc(100% - #{$margin-left * 2});\r\n height: calc(100% - #{$margin-top * 2});\r\n overflow: hidden;\r\n margin: $margin-top $margin-left;\r\n font-size: toem(14px);\r\n @include transition(opacity 0.25s ease);\r\n }\r\n .#{$name-prefix}lyric-text {\r\n flex-grow: 1;\r\n white-space: nowrap;\r\n text-align: center;\r\n color: $TextColor;\r\n .#{$name-prefix}lyric-text-sub {\r\n display: block;\r\n color: $accentColor;\r\n font-size: toem(12px, 14px);\r\n }\r\n .#{$name-prefix}lyric-text-zoomout {\r\n font-size: toem(12px);\r\n transform: translateY(toem(1px));\r\n display: inline-block;\r\n margin: 0px toem(2px, 14px);\r\n }\r\n }\r\n .#{$name-prefix}progress-container {\r\n flex-basis: 100%;\r\n margin: toem(0px);\r\n opacity: 0.8;\r\n position: absolute;\r\n width: 100%;\r\n bottom: 0px;\r\n border-bottom-left-radius: $border-radius;\r\n border-bottom-right-radius: $border-radius;\r\n overflow: hidden;\r\n pointer-events: none;\r\n > span {\r\n display: none\r\n }\r\n }\r\n &.#{$name-prefix}big .#{$name-prefix}progress-container {\r\n position: relative;\r\n border-bottom-left-radius: 0;\r\n border-bottom-right-radius: 0;\r\n height: $big-progress-height;\r\n padding: 0 toem(5px);\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n justify-content: space-between;\r\n pointer-events: auto;\r\n color: $TextColor;\r\n > span {\r\n display: inline;\r\n margin: 0 toem(15px);\r\n font-size: 0.8em\r\n }\r\n }\r\n .#{$name-prefix}progress {\r\n overflow: hidden;\r\n .#{$name-prefix}progress-fill {\r\n display: block;\r\n height: toem(2px);\r\n background: $primaryColor;\r\n }\r\n .#{$name-prefix}progress-button {\r\n display: none;\r\n }\r\n }\r\n &.#{$name-prefix}big .#{$name-prefix}progress {\r\n @extend %#{$name-prefix}-controller;\r\n overflow: visible;\r\n .#{$name-prefix}progress-fill {\r\n @extend %#{$name-prefix}-controller-fill;\r\n }\r\n .#{$name-prefix}progress-button {\r\n @extend %#{$name-prefix}-controller-button;\r\n }\r\n }\r\n .#{$name-prefix}poster {\r\n width: $mainbody-height;\r\n height: $mainbody-height;\r\n background-repeat: repeat;\r\n background-position: 50% 50%;\r\n background-size: cover;\r\n background-color: #fafafa;\r\n background-origin: padding-box;\r\n background-attachment: scroll;\r\n border-right: toem(1px) solid #eee;\r\n background-image: url(\"../defaultposter.jpg\");\r\n border-top-left-radius: $border-radius;\r\n border-bottom-left-radius: $border-radius;\r\n overflow: hidden;\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n &.#{$name-prefix}big .#{$name-prefix}poster {\r\n flex-basis: 100%;\r\n width: $mainbody-width;\r\n height: $mainbody-width * 0.5625;\r\n border-right: none;\r\n border-bottom: toem(1px) solid #eee;\r\n margin: 0;\r\n border-top-left-radius: $border-radius;\r\n border-bottom-left-radius: 0;\r\n border-top-right-radius: $border-radius;\r\n border-bottom-right-radius: 0;\r\n }\r\n .#{$name-prefix}play-icon {\r\n $size: toem(12.5px);\r\n width:$size;\r\n height:$size;\r\n display: block;\r\n overflow: hidden;\r\n position: relative;\r\n .#{$name-prefix}play-icon-left {\r\n height: 100%;\r\n float: left;\r\n background-color: $primaryColor;\r\n width: 36%;\r\n @include transition(width 0.25s ease);\r\n overflow: hidden;\r\n }\r\n .#{$name-prefix}play-icon-right {\r\n height: 100%;\r\n float: right;\r\n background-color: $primaryColor;\r\n width: 36%;\r\n @include transition(width 0.25s ease);\r\n overflow: hidden;\r\n }\r\n .#{$name-prefix}play-icon-triangle-1 {\r\n transform: translate(0, -100%)\r\n }\r\n .#{$name-prefix}play-icon-triangle-2 {\r\n transform: translate(0, 100%)\r\n }\r\n .#{$name-prefix}play-icon-triangle-1,\r\n .#{$name-prefix}play-icon-triangle-2 {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n background-color: transparent;\r\n width: 0;\r\n height: 0;\r\n border-right: $size solid $backgroundColor;\r\n border-top: $size / 2 solid transparent;\r\n border-bottom: $size / 2 solid transparent;\r\n @include transition(transform 0.25s ease);\r\n }\r\n &.#{$name-prefix}play-icon-paused {\r\n .#{$name-prefix}play-icon-left {\r\n width: 50%;\r\n }\r\n .#{$name-prefix}play-icon-right {\r\n width: 50%;\r\n }\r\n .#{$name-prefix}play-icon-triangle-1 {\r\n transform: translate(0, -50%);\r\n }\r\n .#{$name-prefix}play-icon-triangle-2 {\r\n transform: translate(0, 50%);\r\n }\r\n }\r\n &.#{$name-prefix}play-icon-hover {\r\n .#{$name-prefix}play-icon-left {\r\n background-color: $primaryDarkColor;\r\n }\r\n .#{$name-prefix}play-icon-right {\r\n background-color: $primaryDarkColor;\r\n }\r\n }\r\n }\r\n .#{$name-prefix}play-button,\r\n .#{$name-prefix}volume-button,\r\n .#{$name-prefix}prev-button,\r\n .#{$name-prefix}list-button,\r\n .#{$name-prefix}mode-button,\r\n .#{$name-prefix}next-button {\r\n display: inline-block;\r\n $size: toem(12.5px);\r\n width: $size;\r\n height: $size;\r\n cursor: pointer;\r\n }\r\n .#{$name-prefix}volume-button {\r\n width: toem(20px);\r\n position: relative;\r\n }\r\n .#{$name-prefix}list-button {\r\n $size: toem(17.5px);\r\n width: $size;\r\n height: $size;\r\n }\r\n .#{$name-prefix}mode-button {\r\n $size: toem(19px);\r\n width: $size;\r\n height: $size;\r\n }\r\n .#{$name-prefix}play-button {\r\n $size: toem(30px);\r\n height: $size;\r\n width: $size;\r\n border: $primaryColor solid 1px;\r\n border-radius: 50%;\r\n .#{$name-prefix}play-icon.#{$name-prefix}play-icon-paused {\r\n margin: toem(8.25px);\r\n }\r\n .#{$name-prefix}play-icon {\r\n margin: toem(8.25px);\r\n }\r\n &:hover {\r\n border-color: $primaryDarkColor;\r\n @extend .#{$name-prefix}play-icon.#{$name-prefix}play-icon-hover;\r\n }\r\n }\r\n .#{$name-prefix}icon {\r\n $size: toem(12.5px);\r\n height: $size;\r\n width: $size;\r\n path {\r\n fill: $primaryColor;\r\n }\r\n &:hover {\r\n path {\r\n fill: $primaryDarkColor;\r\n }\r\n }\r\n &.#{$name-prefix}icon-dark {\r\n path {\r\n fill: $accentColor;\r\n }\r\n &:hover {\r\n path {\r\n fill: $accentDarkColor;\r\n }\r\n }\r\n }\r\n }\r\n .#{$name-prefix}prev-icon {\r\n @extend .#{$name-prefix}icon;\r\n }\r\n .#{$name-prefix}next-icon {\r\n @extend .#{$name-prefix}icon;\r\n transform: rotateZ(180deg);\r\n }\r\n .#{$name-prefix}volume-icon {\r\n @extend .#{$name-prefix}icon;\r\n width: toem(20px);\r\n }\r\n .#{$name-prefix}random-icon,\r\n .#{$name-prefix}single-icon,\r\n .#{$name-prefix}loop-icon {\r\n @extend .#{$name-prefix}icon;\r\n $size: toem(19px);\r\n width: $size;\r\n height: $size;\r\n display: none;\r\n }\r\n .#{$name-prefix}mode-button[data-mode=listloop] .#{$name-prefix}loop-icon,\r\n .#{$name-prefix}mode-button[data-mode=singlecycle] .#{$name-prefix}single-icon,\r\n .#{$name-prefix}mode-button[data-mode=listrandom] .#{$name-prefix}random-icon {\r\n display: block;\r\n }\r\n .#{$name-prefix}list-icon {\r\n @extend .#{$name-prefix}icon;\r\n $size: toem(17.5px);\r\n width: $size;\r\n height: $size;\r\n }\r\n .#{$name-prefix}volume-container {\r\n $height: toem(25px);\r\n $width: toem(130px);\r\n position: absolute;\r\n left: 50%;\r\n top: -7px;\r\n height: $height;\r\n width: $width;\r\n transform: translateX(-50%) translateY(-120%);\r\n z-index: 1;\r\n visibility: hidden;\r\n text-align: left;\r\n border-radius: $border-radius;\r\n padding: 0 15px;\r\n background: $backgroundColor;\r\n @include box_shadow(1);\r\n &.#{$name-prefix}volume-container-show {\r\n visibility: visible;\r\n }\r\n &:hover {\r\n visibility: visible;\r\n }\r\n &:before {\r\n $size: toem(10px);\r\n content: '';\r\n width: toem(0px);\r\n height: toem(0px);\r\n display: inline-block;\r\n border-top: $size solid $backgroundColor;\r\n border-left: $size solid transparent;\r\n border-right: $size solid transparent;\r\n position: absolute;\r\n bottom: toem(0px);\r\n left: 50%;\r\n transform: translate(-50%,100%);\r\n }\r\n &:after {\r\n $size: toem(14.142135624px);\r\n content: '';\r\n width: $size;\r\n height: $size;\r\n display: inline-block;\r\n position: absolute;\r\n bottom: toem(0px);\r\n left: 50%;\r\n transform: translate(-50%,50%) rotate(45deg);\r\n @include box_shadow(1);\r\n }\r\n > div {\r\n width: 100%;\r\n height: 100%;\r\n background: $backgroundColor;\r\n border-radius: $border-radius;\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n }\r\n .#{$name-prefix}volume-controller {\r\n @extend %#{$name-prefix}-controller;\r\n .#{$name-prefix}volume-fill {\r\n @extend %#{$name-prefix}-controller-fill;\r\n }\r\n .#{$name-prefix}volume-controller-button {\r\n @extend %#{$name-prefix}-controller-button;\r\n }\r\n }\r\n %#{$name-prefix}-controller {\r\n display: inline-block;\r\n $height: $border-radius;\r\n height: $height;\r\n width: 100%;\r\n border-radius: $height / 2;\r\n background: $accentLightColor;\r\n line-height: 0;\r\n touch-action: none;\r\n position: relative;\r\n %#{$name-prefix}-controller-fill {\r\n display: inline-block;\r\n height: 100%;\r\n width: 100%;\r\n border-radius: $height / 2;\r\n background: $accentDarkColor;\r\n }\r\n %#{$name-prefix}-controller-button {\r\n $size: toem(15px);\r\n height: $size;\r\n width: $size;\r\n position: absolute;\r\n right: toem(0px);\r\n top: toem(-5.5px);\r\n display: inline-block;\r\n border-radius: 50%;\r\n border: toem(2px) solid $backgroundColor;\r\n background: $accentColor;\r\n transform: translateX(50%);\r\n &:hover {\r\n background: $accentDarkColor;\r\n }\r\n }\r\n }\r\n svg {\r\n vertical-align: top;\r\n }\r\n\t*,\r\n\t*::before,\r\n\t*::after {\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n}\r\n\r\n$dark-primaryColor: #a1a1a1;\r\n$dark-primaryDarkColor: #BDBDBD;\r\n$dark-accentLightColor: #BDBDBD;\r\n$dark-accentColor: #757575;\r\n$dark-accentDarkColor: #616161;\r\n$dark-TextColor: #bbb;\r\n$dark-backgroundColor: #222;\r\n$dark-posterBgColor: #333;\r\n\r\nc-player.#{$name-prefix}dark {\r\n color: $dark-TextColor;\r\n\t.#{$name-prefix}mainbody {\r\n background-color: $dark-backgroundColor;\r\n }\r\n .#{$name-prefix}drop-down-menu {\r\n background-color: rgba($dark-backgroundColor, 0.9);\r\n }\r\n .#{$name-prefix}playlist {\r\n li {\r\n .#{$name-prefix}play-icon {\r\n fill: rgba($dark-primaryDarkColor, 0.8);\r\n }\r\n }\r\n }\r\n .#{$name-prefix}lyric-text {\r\n color: $dark-TextColor;\r\n .#{$name-prefix}lyric-text-sub {\r\n color: $dark-accentColor;\r\n }\r\n }\r\n .#{$name-prefix}progress {\r\n .#{$name-prefix}progress-fill {\r\n background: $dark-primaryDarkColor;\r\n }\r\n }\r\n .#{$name-prefix}poster {\r\n background-color: $dark-posterBgColor;\r\n border-right-color: $dark-posterBgColor;\r\n }\r\n &.#{$name-prefix}big .#{$name-prefix}poster {\r\n border-bottom-color: $dark-posterBgColor;\r\n }\r\n &.#{$name-prefix}big .#{$name-prefix}progress-container {\r\n color: $dark-TextColor;\r\n }\r\n &.#{$name-prefix}big .#{$name-prefix}progress {\r\n @extend %#{$name-prefix}-controller;\r\n overflow: visible;\r\n .#{$name-prefix}progress-fill {\r\n @extend %#{$name-prefix}-controller-fill;\r\n }\r\n .#{$name-prefix}progress-button {\r\n @extend %#{$name-prefix}-controller-button;\r\n }\r\n }\r\n .#{$name-prefix}play-icon {\r\n .#{$name-prefix}play-icon-left {\r\n background-color: $dark-primaryColor;\r\n }\r\n .#{$name-prefix}play-icon-right {\r\n background-color: $dark-primaryColor;\r\n }\r\n .#{$name-prefix}play-icon-triangle-1,\r\n .#{$name-prefix}play-icon-triangle-2 {\r\n border-right-color: $dark-backgroundColor;\r\n }\r\n &.#{$name-prefix}play-icon-hover {\r\n .#{$name-prefix}play-icon-left {\r\n background-color: $dark-primaryDarkColor;\r\n }\r\n .#{$name-prefix}play-icon-right {\r\n background-color: $dark-primaryDarkColor;\r\n }\r\n }\r\n }\r\n .#{$name-prefix}play-button {\r\n border-color: $dark-primaryColor;\r\n &:hover {\r\n border-color: $dark-primaryDarkColor;\r\n }\r\n }\r\n .#{$name-prefix}icon {\r\n path {\r\n fill: $dark-primaryColor;\r\n }\r\n &:hover {\r\n path {\r\n fill: $dark-primaryDarkColor;\r\n }\r\n }\r\n &.#{$name-prefix}icon-dark {\r\n path {\r\n fill: $dark-accentColor;\r\n }\r\n &:hover {\r\n path {\r\n fill: $dark-accentDarkColor;\r\n }\r\n }\r\n }\r\n }\r\n .#{$name-prefix}volume-container {\r\n background: $dark-backgroundColor;\r\n &:before {\r\n border-top-color: $dark-backgroundColor;\r\n }\r\n > div {\r\n background: $dark-backgroundColor;\r\n }\r\n }\r\n %#{$name-prefix}-controller {\r\n background: $dark-accentDarkColor;\r\n %#{$name-prefix}-controller-fill {\r\n background: $dark-accentLightColor;\r\n }\r\n %#{$name-prefix}-controller-button {\r\n border-color: $dark-backgroundColor;\r\n background: $dark-accentColor;\r\n &:hover {\r\n background: $dark-accentLightColor;\r\n }\r\n }\r\n }\r\n}" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"declaration\": true,\n \"outDir\": \"./lib/\",\n \"sourceMap\": true,\n \"noImplicitAny\": true,\n \"module\": \"commonjs\",\n \"target\": \"es2017\",\n \"jsx\": \"react\",\n \"experimentalDecorators\": true,\n \"typeRoots\": [\n \"./node_modules/@types\"\n ]\n },\n \"include\": [\n \"src/lib/**/*\"\n ]\n}\n" }, { "path": "webpack.config.example.js", "content": "var webpack = require('webpack');\nvar path = require('path');\nconst CopyPlugin = require('copy-webpack-plugin');\n\nvar HtmlWebpackPlugin = require('html-webpack-plugin');\n\nconst GLOBALS = {\n 'process.env.NODE_ENV': JSON.stringify('production'),\n __DEV__: true\n};\n\nvar HtmlWebpackConfig = {\n title: 'hexo',\n filename: 'index.html',\n template: \"./src/example.html\",\n hash: true,\n showErrors: true,\n inject: 'head'\n};\n\nmodule.exports = {\n mode: 'production',\n\n entry: [\n \"./src/example.ts\"\n ],\n output: {\n filename: \"cplayerexample.js\",\n path: __dirname + \"/example\"\n },\n\n // Enable sourcemaps for debugging webpack's output.\n devtool: \"source-map\",\n\n plugins: [\n new webpack.DefinePlugin(GLOBALS),\n new HtmlWebpackPlugin(HtmlWebpackConfig),\n new CopyPlugin([\n { from: __dirname + '/src/manifest.json', to: 'manifest.json' }\n ])\n ],\n\n resolve: {\n // Add '.ts' and '.tsx' as resolvable extensions.\n extensions: [\".webpack.js\", \".web.js\", \".ts\", \".tsx\", \".js\"]\n },\n\n module: {\n rules: [\n {\n test: /\\.(ts|tsx)?$/,\n use: [\n {\n loader: 'babel-loader'\n },\n {\n loader: \"ts-loader\"\n }\n ]\n },\n {\n test: /\\.(scss)$/,\n use: [\n {\n loader: 'style-loader'\n },\n {\n loader: \"css-loader\"\n },\n {\n loader: 'postcss-loader'\n },\n {\n loader: \"sass-loader\"\n }\n ]\n },\n {\n test: /\\.(html|svg)$/,\n use: {\n loader: 'html-loader',\n options: {\n minimize: true\n }\n }\n },\n {\n test: /\\.(css)$/,\n use: [\n {\n loader: 'style-loader'\n },\n {\n loader: \"css-loader\"\n },\n {\n loader: \"postcss-loader\"\n }\n ]\n },\n {\n test: /\\.(ttf|otf|woff|woff2|eot|png|jpg|mp3|mp4)$/,\n use: [{\n loader: 'url-loader',\n options: {\n limit: 8192,\n esModule: false\n }\n }]\n },\n {\n test: /\\.(js|jsx)$/,\n exclude: path.resolve(__dirname, \"node_modules\"),\n use: [\n {\n loader: 'babel-loader'\n }\n ],\n }\n ]\n }\n}" }, { "path": "webpack.config.js", "content": "var webpack = require('webpack');\nvar path = require('path');\n\nvar HtmlWebpackPlugin = require('html-webpack-plugin');\n\nconst GLOBALS = {\n 'process.env.NODE_ENV': JSON.stringify('development'),\n __DEV__: true\n};\n\nvar HtmlWebpackConfig = {\n title: 'hexo',\n filename: 'index.html',\n template: \"./src/example.html\",\n hash: true,\n showErrors: true,\n inject: 'head'\n};\n\n\nmodule.exports = {\n mode: 'development',\n\n entry: [\n \"./src/example.ts\"\n ],\n output: {\n filename: \"cplayerexample.js\",\n path: __dirname + \"/example\"\n },\n\n // Enable sourcemaps for debugging webpack's output.\n devtool: \"source-map\",\n\n plugins: [\n new webpack.DefinePlugin(GLOBALS),\n new HtmlWebpackPlugin(HtmlWebpackConfig)\n ],\n\n resolve: {\n // Add '.ts' and '.tsx' as resolvable extensions.\n extensions: [\".webpack.js\", \".web.js\", \".ts\", \".tsx\", \".js\"]\n },\n\n module: {\n rules: [\n {\n test: /\\.(ts|tsx)?$/,\n use: [\n {\n loader: 'babel-loader'\n },\n {\n loader: \"ts-loader\"\n }\n ]\n },\n {\n test: /\\.(scss)$/,\n use: [\n {\n loader: 'style-loader'\n },\n {\n loader: \"css-loader\"\n },\n {\n loader: 'postcss-loader'\n },\n {\n loader: \"sass-loader\"\n }\n ]\n },\n {\n test: /\\.(html|svg)$/,\n use: {\n loader: 'html-loader',\n options: {\n minimize: true\n }\n }\n },\n {\n test: /\\.(css)$/,\n use: [\n {\n loader: 'style-loader'\n },\n {\n loader: \"css-loader\"\n },\n {\n loader: \"postcss-loader\"\n }\n ]\n },\n {\n test: /\\.(ttf|otf|woff|woff2|eot|png|jpg|mp3|mp4)$/,\n use: [{\n loader: 'url-loader',\n options: {\n limit: 8192,\n esModule: false\n }\n }]\n },\n {\n test: /\\.(js|jsx)$/,\n exclude: path.resolve(__dirname, \"node_modules\"),\n use: [\n {\n loader: 'babel-loader'\n }\n ],\n }\n ]\n },\n devServer: {\n port: process.env.PORT || 8888,\n host: 'localhost',\n publicPath: '/',\n contentBase: './src',\n historyApiFallback: true,\n open: true,\n disableHostCheck: true,\n watchContentBase: true,\n compress: true,\n headers: {\n \"access-control-allow-origin\":\"*\"\n },\n proxy: {\n // OPTIONAL: proxy configuration:\n // '/optional-prefix/**': { // path pattern to rewrite\n // target: 'http://target-host.com',\n // pathRewrite: path => path.replace(/^\\/[^\\/]+\\//, '') // strip first path segment\n // }\n }\n }\n}" }, { "path": "webpack.config.prod.js", "content": "var webpack = require('webpack');\nvar path = require('path');\nvar BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nconst GLOBALS = {\n 'process.env.NODE_ENV': JSON.stringify('production'),\n 'process.env.cplayer_noview': JSON.stringify(!!process.env.noview),\n __DEV__: false\n};\n\nmodule.exports = {\n mode: 'production',\n\n entry: [\n \"./src/lib/index.ts\"\n ],\n output: {\n filename: \"cplayer\" + (process.env.suffix || '') + \".js\",\n path: __dirname + \"/dist\",\n library: 'cplayer-umd',\n libraryTarget: 'umd',\n umdNamedDefine: true\n },\n\n // Enable sourcemaps for debugging webpack's output.\n devtool: \"source-map\",\n\n plugins: [\n !!process.env.analyzer ? new BundleAnalyzerPlugin() : undefined,\n new webpack.DefinePlugin(GLOBALS)\n ].filter(function(e){return e}),\n\n resolve: {\n // Add '.ts' and '.tsx' as resolvable extensions.\n extensions: [\".webpack.js\", \".web.js\", \".ts\", \".tsx\", \".js\"]\n },\n\n module: {\n strictExportPresence: true,\n rules: [\n {\n test: /\\.(ts|tsx)?$/,\n use: [\n {\n loader: 'babel-loader'\n },\n {\n loader: \"ts-loader\"\n }\n ]\n },\n {\n test: /\\.(scss)$/,\n use: [\n {\n loader: 'style-loader'\n },\n {\n loader: \"css-loader\"\n },\n {\n loader: 'postcss-loader',\n },\n {\n loader: \"sass-loader\"\n }\n ]\n },\n {\n test: /\\.(html|svg)$/,\n use: {\n loader: 'html-loader',\n options: {\n minimize: true\n }\n }\n },\n {\n test: /\\.(css)$/,\n use: [\n {\n loader: 'style-loader'\n },\n {\n loader: \"css-loader\"\n },\n {\n loader: \"postcss-loader\"\n }\n ]\n },\n {\n test: /\\.(ttf|otf|woff|woff2|eot|png|jpg|mp3|mp4)$/,\n use: [{\n loader: 'url-loader',\n options: {\n limit: 8192,\n esModule: false\n }\n }]\n },\n {\n test: /\\.(js|jsx)$/,\n exclude: path.resolve(__dirname, \"node_modules\"),\n use: [\n {\n loader: 'babel-loader'\n }\n ],\n }\n ]\n }\n}" } ]