Merge pull request #1 from ZyqGitHub1/dev

merge Dev to master
ZyqGitHub1 · Jul 18, 2019 · 8feb9be · 8feb9be
2 parents 79f554f + f447fb8
commit 8feb9be
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "plyr": "^3.5.6",
     "quasar": "^1.0.0",
     "vue-i18n": "^8.0.0",
+    "vue-navigation": "^1.1.4",
     "vue-plyr": "^5.1.3",
     "xml2js": "^0.4.19"
   },

diff --git a/quasar.conf.js b/quasar.conf.js
@@ -10,7 +10,7 @@ module.exports = function (ctx) {
   return {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
-    boot: ['i18n', 'axios'],
+    boot: ['i18n', 'axios', 'vue-navigation'],
 
     css: ['app.styl'],
 
@@ -59,6 +59,9 @@ module.exports = function (ctx) {
         'QScrollArea',
         'QForm',
         'QToggle',
+        'QPageSticky',
+        'QInput',
+        'QSeparator',
       ],
 
       directives: ['Ripple'],

diff --git a/src/boot/vue-navigation.js b/src/boot/vue-navigation.js
@@ -0,0 +1,6 @@
+import Navigation from 'vue-navigation';
+
+// "async" is optional
+export default async ({ router, Vue, store }) => {
+  Vue.use(Navigation, { router, store });
+};
diff --git a/src/components/HlsPlayer.vue b/src/components/HlsPlayer.vue
@@ -54,18 +54,7 @@ export default {
       hls.loadSource(this.source);
       hls.attachMedia(this.video);
       this.$once('hook:beforeDestroy', () => {
-        try {
-          this.player.destroy();
-        } catch (e) {
-          if (
-            !(
-              this.opts.hideYouTubeDOMError
-              && e.message === 'The YouTube player is not attached to the DOM.'
-            )
-          ) {
-            console.error(e);
-          }
-        }
+        this.player.destroy();
         hls.stopLoad();
         hls.destroy();
       });

diff --git a/src/layouts/Home.vue b/src/layouts/Home.vue
@@ -51,6 +51,22 @@
       side="left"
       bordered
     >
+      <div class="row serch">
+        <div class="col">
+          <q-input
+            clearable
+            borderless
+            v-model="keyWord"
+            label="请输入关键字"
+            @keyup.enter="search"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <q-separator />
       <q-list separator>
         <q-item
           clickable
@@ -91,7 +107,9 @@
     </q-drawer>
 
     <q-page-container>
-      <router-view />
+      <navigation>
+        <router-view />
+      </navigation>
     </q-page-container>
 
     <q-footer
@@ -122,6 +140,7 @@ export default {
   data() {
     return {
       loading: true,
+      keyWord: '',
       tab: 1,
       videoClass: [],
       left: this.$q.platform.is.desktop,
@@ -139,8 +158,10 @@ export default {
       },
       immediate: true,
     },
-    CurrentSite(val) {
-      console.log(val);
+    keyWord() {
+      if (this.keyWord === null) {
+        this.$store.commit('setKeyWord', this.keyWord);
+      }
     },
   },
   methods: {
@@ -165,6 +186,9 @@ export default {
       this.setCurrentClass(currentClass);
       this.$router.push('/');
     },
+    search() {
+      this.$store.commit('setKeyWord', this.keyWord);
+    },
   },
   computed: {
     ...mapGetters(['currentSite']),
@@ -187,4 +211,8 @@ export default {
 .q-layout, .q-page {
   min-height: inherit !important;
 }
+
+.serch {
+  margin-top: 24px;
+}
 </style>
diff --git a/src/pages/Video.vue b/src/pages/Video.vue
@@ -3,7 +3,21 @@
     class="video-warp"
     padding
   >
-    <hls-player :source="normalizeUrl(currentVideo.dl.dd._)"></hls-player>
+    <hls-player
+      :source="normalizeUrl(currentVideo.dl.dd._)"
+      :options="options"
+    ></hls-player>
+    <q-page-sticky
+      position="top-right"
+      :offset="[5, 5]"
+    >
+      <q-btn
+        round
+        color="accent"
+        icon="arrow_back"
+        @click="goback"
+      />
+    </q-page-sticky>
   </q-page>
 </template>
 
@@ -14,15 +28,35 @@ import { mapState } from 'vuex';
 
 export default {
   name: 'Videop',
+  data() {
+    return {
+      options: {
+        controls: [
+          'play-large',
+          'play',
+          'progress',
+          'current-time',
+          'mute',
+          'volume',
+          'captions',
+          'settings',
+          'airplay',
+          'fullscreen',
+        ],
+      },
+    };
+  },
   components: {
     HlsPlayer,
   },
   methods: {
     normalizeUrl(url) {
       const pureUrl = url.replace(/(.*?)\$/, '').replace(/\$(.*)/, '');
-      console.log(pureUrl);
       return normalizeUrl(pureUrl);
     },
+    goback() {
+      this.$router.go(-1);
+    },
   },
   computed: {
     ...mapState({
@@ -34,6 +68,6 @@ export default {
 
 <style>
 .video-warp {
-  height: calc(100vh - 257px);
+  height: calc(100vh - 148px);
 }
 </style>
diff --git a/src/pages/VideoList.vue b/src/pages/VideoList.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page padding>
-    <q-scroll-area style="height: calc(100vh - 257px);">
+    <q-scroll-area style="height: calc(100vh - 198px);">
       <div class="q-pa-md row items-start justify-center q-gutter-md">
         <q-card
           class="my-card"
@@ -76,6 +76,11 @@ export default {
     currentClass() {
       this.getVideoList(1);
     },
+    keyWord(newKeyWord, oldKeyWord) {
+      if (newKeyWord !== oldKeyWord) {
+        this.getVideoList(1);
+      }
+    },
   },
   methods: {
     ...mapMutations(['setCurrentVideo']),
@@ -88,6 +93,9 @@ export default {
       if (this.currentClass !== 'all') {
         params.t = this.currentClass;
       }
+      if (this.keyWord) {
+        params.wd = this.keyWord;
+      }
       const uri = this.https
         ? this.currentSite.httpsApi
         : this.currentSite.httpApi;
@@ -114,6 +122,7 @@ export default {
     ...mapState({
       currentClass: state => state.site.currentClass,
       https: state => state.app.https,
+      keyWord: state => state.site.keyWord,
     }),
   },
 };

diff --git a/src/store/module/site.js b/src/store/module/site.js
@@ -68,6 +68,7 @@ export default {
     ],
     currentSiteId: 1,
     currentClass: '',
+    keyWord: '',
   },
   mutations: {
     setCurrentSiteId(state, currentSiteId) {
@@ -76,6 +77,9 @@ export default {
     setCurrentClass(state, currentClass) {
       state.currentClass = currentClass;
     },
+    setKeyWord(state, keyWord) {
+      state.keyWord = keyWord;
+    },
   },
   getters: {
     currentSite: state => state.siteList.find(item => item.id === state.currentSiteId),

diff --git a/yarn.lock b/yarn.lock
@@ -9086,6 +9086,11 @@ vue-loader@15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-navigation@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npm.taobao.org/vue-navigation/download/vue-navigation-1.1.4.tgz#be990190624647daa34b8cd525fad4fb6d472542"
+  integrity sha1-vpkBkGJGR9qjS4zVJfrU+21HJUI=
+
 vue-plyr@^5.1.3:
   version "5.1.3"
   resolved "https://registry.npm.taobao.org/vue-plyr/download/vue-plyr-5.1.3.tgz#38da58f71b952c3dbfa8c7fccc5b2471a118c654"