添加简单的IPTV页面

src/App.vue

@@ -5,6 +5,7 @@
       <Frame />
       <Film v-show="view === 'Film'" />
       <Play v-show="view === 'Play'" />
+      <IPTV v-show="view === 'IPTV'" />
       <Star v-show="view === 'Star'" />
       <History v-show="view === 'History'" />
       <Setting v-show="view === 'Setting'" />

src/components/Aside.vue

@@ -2,7 +2,7 @@
   <div class="aside">
     <span :class="[view === 'Film' ? 'active ': ''] + 'zy-svg'" @click="changeView('Film')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle">
-        <title id="apertureIconTitle">view</title>
+        <title id="apertureIconTitle">电影</title>
         <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
         <g stroke-linecap="round">
           <path d="M3 16H14.3164"></path>
@@ -16,7 +16,7 @@
     </span>
     <span :class="[view === 'Play' ? 'active ': ''] + 'zy-svg'" @click="changeView('Play')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
-        <title id="playIconTitle">play</title>
+        <title id="playIconTitle">播放</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
@@ -26,6 +26,13 @@
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
+    <span :class="[view === 'IPTV' ? 'active ': ''] + 'zy-svg'" @click="changeView('IPTV')">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
+            <title id="tvIconTitle">IPTV</title>
+            <polygon points="20 8 20 20 4 20 4 8"></polygon>
+            <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
+          </svg>
+    </span>
     <span :class="[view === 'History' ? 'active ': ''] + 'zy-svg'" @click="changeView('History')">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="timeIconTitle">
             <title id="timeIconTitle">历史记录</title>
@@ -35,7 +42,7 @@
     </span>
     <span :class="[view === 'Setting' ? 'active ': ''] + 'zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
-        <title id="settingsIconTitle">setting</title>
+        <title id="settingsIconTitle">设置</title>
         <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
         <circle cx="12" cy="12" r="1"></circle>
       </svg>

src/components/IPTV.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="iptv">
+    <div class="body zy-scroll">
+      <div class="zy-table">
+        <div class="tBody zy-scroll">
+          <ul>
+            <li v-for="(i, j) in iptv" :key="j" @click="playEvent(i)">
+              <span class="name">{{i.name}}</span>
+              <span class="operate">
+                <span class="btn" @click.stop="playEvent(i)">播放</span>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { iptv } from '../lib/dexie'
+export default {
+  name: 'iptv',
+  data () {
+    return {
+      iptv: []
+    }
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    },
+    setting () {
+      return this.$store.getters.getSetting
+    }
+  },
+  watch: {
+    view () {
+      this.getAllIptv()
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    playEvent (e) {
+      var m3u8Link = e.site
+      const fs = require('fs')
+      var externalPlayer = this.setting.externalPlayer
+      if (!fs.existsSync(externalPlayer)) {
+        this.$message.error('请设置第三方播放器路径')
+        // 在线播放该视频
+        var link = 'https://www.m3u8play.com/?play=' + m3u8Link
+        const open = require('open')
+        open(link)
+      } else {
+        this.$message.error(m3u8Link)
+        var exec = require('child_process').execFile
+        exec(externalPlayer, [m3u8Link])
+      }
+    },
+    getAllIptv () {
+      iptv.all().then(res => {
+        this.iptv = res
+      })
+    }
+  },
+  created () {
+    this.getAllIptv()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.iptv{
+  position: relative;
+  height: calc(100% - 40px);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  .body{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/register.js

@@ -9,6 +9,7 @@ import Detail from './Detail'
 import Share from './Share'
 import History from './History'
 import EditSites from './EditSites'
+import IPTV from './IPTV'
 
 export default {
   registerComponents () {
@@ -22,5 +23,6 @@ export default {
     Vue.component('Share', Share)
     Vue.component('History', History)
     Vue.component('EditSites', EditSites)
+    Vue.component('IPTV', IPTV)
   }
 }

src/lib/dexie/dexie.js

@@ -1,5 +1,5 @@
 import Dexie from 'dexie'
-import { setting, sites, localKey } from './initData'
+import { setting, sites, localKey, iptv } from './initData'
 
 const db = new Dexie('zy')
 
@@ -10,13 +10,15 @@ db.version(3).stores({
   star: '++id, site, ids, name, type, year, index',
   sites: '++id, key, name, json, xml, down, level',
   history: '++id, site, ids, name, type, year, index, time',
-  mini: 'id, site, ids, name, index, time'
+  mini: 'id, site, ids, name, index, time',
+  iptv: 'name, site'
 })
 
 db.on('populate', () => {
   db.setting.bulkAdd(setting)
   db.sites.bulkAdd(sites)
   db.shortcut.bulkAdd(localKey)
+  db.iptv.bulkAdd(iptv)
 })
 
 db.open()

src/lib/dexie/index.js

@@ -5,6 +5,7 @@ import shortcut from './shortcut'
 import star from './star'
 import sites from './sites'
 import search from './search'
+import iptv from './iptv'
 
 export {
   history,
@@ -13,5 +14,6 @@ export {
   shortcut,
   star,
   sites,
+  iptv,
   search
 }

src/lib/dexie/initData.js

@@ -280,9 +280,33 @@ const getSite = (key) => {
   }
 }
 
+const iptv = [
+  {
+    name: 'CCTV 1',
+    site: 'http://111.40.205.87/PLTV/88888888/224/3221225710/index.m3u8'
+  },
+  {
+    name: 'CCTV 2',
+    site: 'http://117.148.187.37/PLTV/88888888/224/3221226138/index.m3u8'
+  },
+  {
+    name: 'CCTV 13',
+    site: 'http://117.148.187.37/PLTV/88888888/224/3221226193/index.m3u8'
+  },
+  {
+    name: 'BBC News UK',
+    site: 'http://51.52.156.22:8888/http/004'
+  },
+  {
+    name: 'Music Channel',
+    site: 'https://edge126.rcs-rds.ro/utvedge/musicchannelhq.stream/playlist.m3u8'
+  }
+]
+
 export {
   setting,
   sites,
+  iptv,
   localKey,
   getSite
 }

src/lib/dexie/iptv.js

@@ -0,0 +1,16 @@
+import db from './dexie'
+const { iptv } = db
+export default {
+  async all () {
+    return await iptv.toArray()
+  },
+  async clear () {
+    return await iptv.clear()
+  },
+  async add (doc) {
+    return await iptv.bulkAdd(doc)
+  },
+  async find (doc) {
+    return await iptv.get(doc)
+  }
+}