~hokiegeek/crooked-monkey-vue

ebb2610d9cfd2a6a47fb371c17535813cdc809a6 — HokieGeek 2 months ago 6c3fd81
Some changes including program support
M src/components/mainnav/navlogin.vue => src/components/mainnav/navlogin.vue +1 -41
@@ 10,7 10,7 @@
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, watch } from 'vue';
import { defineComponent, inject, watch } from 'vue';
import { Auth } from '@/services/auth';
export default defineComponent({
  name: 'navlogin',


@@ 32,55 32,15 @@ export default defineComponent({
      () => Vue3GoogleOauth.isInit && Vue3GoogleOauth.isAuthorized,
      async () => {
        if (Vue3GoogleOauth.isInit && Vue3GoogleOauth.isAuthorized) {
          console.log('afp: navlogin setting user')
          // const authCode = await gAuth.getAuthCode()
          auth?.setUser({
            email: Vue3GoogleOauth.instance.currentUser.get().getBasicProfile().getEmail(),
            authToken: '',
            // authToken: Vue3GoogleOauth.instance.currentUser.get().getAuthResponse().access_token,
          })
          auth?.setAuthorized(true)
        }
      }
    )

    /*
    watch(
      () => !Vue3GoogleOauth.isAuthorized,
      async () => {
        if (Vue3GoogleOauth.isInit && Vue3GoogleOauth.isAuthorized) {
          // const authCode = await gAuth.getAuthCode()
          auth?.setUser({
            email: Vue3GoogleOauth.instance.currentUser.get().getBasicProfile().getEmail(),
            // authToken: authCode,
            authToken: Vue3GoogleOauth.instance.currentUser.get().getAuthResponse().access_token,
          })
          auth?.setAuthorized(true)
        }
      }
    )
    */

    /*
    onMounted(() => {
      const auth: Auth | undefined = inject('auth');
      const Vue3GoogleOauth: any = inject('Vue3GoogleOauth'); // eslint-disable-line @typescript-eslint/no-explicit-any

      const authCheck = setInterval(function () {
        if (Vue3GoogleOauth.isInit && Vue3GoogleOauth.isAuthorized) {
          const authCode = await gAuth.getAuthCode()
          auth?.setUser({
            email: Vue3GoogleOauth.instance.currentUser.get().getBasicProfile().getEmail(),
            authToken: authCode,
            // authToken: Vue3GoogleOauth.instance.currentUser.get().getAuthResponse().access_token,
          })
          auth?.setAuthorized(true)
          clearInterval(authCheck)
        }
      }.bind(this), 1000); 
    })
    */

    return {
      auth,
      clickSignOut,

A src/components/program/card.vue => src/components/program/card.vue +47 -0
@@ 0,0 1,47 @@
<template>
  <div v-if="program" class="card full-height-card">
    <div class="card-image">
      <router-link :to="{ name: 'program', params: { progref: program.id } }">
        <thumbnail :item="program" :size="size" overlay/>
      </router-link>
    </div>

    <div class="card-content">
      <div class="media-content">
        <div class="columns">
          <div class="column">
            <p class="title is-4">{{ program.title }}</p>
          </div>
        </div>
        <div class="columns">
          <div class="column">
            <tags size="small" readonly :tags="program.userData.tags" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import thumbnail from '@/components/thumbnail.vue';
import tags from '@/components/tags.vue';
export default defineComponent({
  name: 'program-card',
  props: {
    program: Object,
    size: {
      type: String,
      default: 'small',
    },
  },
  components: {
    thumbnail,
    tags,
  }
});
</script>

<style lang="scss" scoped>
</style>

M src/components/video/video-card.vue => src/components/video/video-card.vue +9 -16
@@ 37,7 37,7 @@
</template>

<script lang="ts">
import { defineComponent, ref, inject, onMounted } from 'vue';
import { defineComponent, ref, inject, watchEffect } from 'vue';
import { Auth } from '@/services/auth';
import { YTPulseApi } from '@/services/ytpulse';
import thumbnail from '@/components/thumbnail.vue';


@@ 64,22 64,15 @@ export default defineComponent({
    const auth: Auth | undefined = inject('auth');
    const ytpulse: YTPulseApi | undefined = inject('ytpulse');

    onMounted(() => {
      const dataget = setInterval(function () {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user && props.video) {
            ytpulse?.getChannel(user, props.video.channelId, false)
            .then(chan => {
              channel.value = chan
            })
            .catch(error => {
              console.error(error)
            })
            clearInterval(dataget)
          }
    watchEffect(() => {
      if (auth?.isAuthorized()) {
        const user = auth?.getUser()
        if (user && props.video) {
          ytpulse?.getChannel(user, props.video.channelId, false)
            .then(chan => channel.value = chan)
            .catch(error => console.error(error))
        }
      }.bind(this), 1000); 
      }
    })

    return {

M src/services/ytpulse.ts => src/services/ytpulse.ts +0 -16
@@ 173,20 173,6 @@ export class YTPulseApi {
    }

    async getVideo(user: User, id: string, byref: boolean): Promise<any> { // eslint-disable-line
      /*
      const video = await httpGet(`/videos/${ id }${byref ? '?refid=true' : ''}`, user)
                      .then(response => Promise.resolve(response.data))
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      console.log('afp: video', video)
      return video  
      */

      let video;
      await httpGet(`/videos/${ id }${byref ? '?refid=true' : ''}`, user)
                      .then(response => video = response.data)


@@ 197,9 183,7 @@ export class YTPulseApi {
                          return Promise.reject(error)
                        }
                      })
      // console.log('afp: video', video)
      return Promise.resolve(video)

    }

    updateVideo(user: User, id: string, video: Object): Promise<AxiosResponse<any>> { // eslint-disable-line

M src/views/login.vue => src/views/login.vue +1 -0
@@ 54,6 54,7 @@ export default defineComponent({
                  } else if (router.currentRoute.value.path === '/') {
                    router.push('videos')
                  }
                  console.log("wtf?!", router.currentRoute.value.path)
                })
                .catch(error => console.error(error))
            }

M src/views/program.vue => src/views/program.vue +1 -0
@@ 31,6 31,7 @@ export default defineComponent({
            ytpulse?.getProgram(user, refval)
            .then(response => {
              program.value = response.data
              console.log("program", program.value)
            })
            .catch(error => {
              console.error(error)

M src/views/programs.vue => src/views/programs.vue +23 -14
@@ 1,45 1,54 @@
<template>
  <div v-if="!auth.isAuthorized() && programs.length == 0">loading...</div>
  programs TODO
  <!--programs-gallery v-else :programs="programs"/-->
  <progress v-if="!auth.isAuthorized() || programs.length == 0" class="progress is-small is-primary" max="100">15%</progress>
  <gallery v-else>
    <div class="column is-one-fifth same-height-column"
      v-for='program in programs'
      :key='program.id'
      >
      <program-card
        :program="program"
        size="medium"
      />
    </div>
  </gallery>
</template>

<script lang="ts">
import { defineComponent, inject, ref, onMounted } from 'vue';
import { defineComponent, inject, ref, watchEffect } from 'vue';
import { Auth } from '@/services/auth';
import { YTPulseApi } from '@/services/ytpulse';
// import programGallery from '@/components/program/program-gallery.vue';
import programCard from '@/components/program/card.vue';
import gallery from '@/components/gallery.vue';
export default defineComponent({
  name: 'programs',
  /*
  components: {
    programGallery
    gallery,
    programCard,
  },
  */

  setup() {
    const programs = ref([])
    const auth: Auth | undefined = inject('auth');
    const ytpulse: YTPulseApi | undefined = inject('ytpulse');

    onMounted(() => {
      const vidget = setInterval(function () {
    watchEffect(
      () => {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user) {
              ytpulse?.getUserPrograms(user)
              .then(response => {
                programs.value = response.data
                console.log("got user programs", new Date())
                programs.value = response
              })
              .catch(error => {
                console.error(error)
                // TODO: display some error message
              })
          }
          clearInterval(vidget)
        }
      }.bind(this), 1000); 
    })
      }
    )
    return {
      auth,
      programs,

M src/views/sessions.vue => src/views/sessions.vue +6 -5
@@ 15,7 15,7 @@
</template>

<script lang="ts">
import { defineComponent, inject, ref, onMounted } from 'vue';
import { defineComponent, inject, ref, watchEffect } from 'vue';
import { Auth } from '@/services/auth';
import { YTPulseApi } from '@/services/ytpulse';
import { SelectedQueue } from '@/services/selected-queue';


@@ 38,13 38,14 @@ export default defineComponent({
      selectedQueue?.addItem('session', sessionId)
    }

    onMounted(() => {
      const seshget = setInterval(function () {
    watchEffect(() => {
      // const seshget = setInterval(function () {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user) {
              ytpulse?.getUserSessions(user)
              .then(response => {
                console.log("afp: sessions: ", response.length, response)
                sessions.value = response
              })
              .catch(error => {


@@ 52,9 53,9 @@ export default defineComponent({
                // TODO: display some error message
              })
          }
          clearInterval(seshget)
          // clearInterval(seshget)
        }
      }.bind(this), 1000); 
      // }.bind(this), 1000); 
    })
    return {
      auth,

M src/views/video.vue => src/views/video.vue +3 -3
@@ 51,7 51,7 @@ export default defineComponent({
    watch(
      () => props.vidref,
      () => {
        const refval = props.vidref
        // const refval = props.vidref
        console.log('afp: props.vidref 1', props.vidref)
    /*
        // TODO: this doesn't work.... yet


@@ 73,7 73,7 @@ export default defineComponent({
    watch(
      () => props.vidref && auth?.isAuthorized(),
      () => {
        const refval = props.vidref
        // const refval = props.vidref
        console.log('afp: props.vidref 2', props.vidref)
        /*
        const user = auth?.getUser()


@@ 91,7 91,7 @@ export default defineComponent({
    )

    onMounted(() => {
      const refval = props.vidref
      // const refval = props.vidref
      console.log('afp: vidref:', props.vidref)
      /*
      // TODO: this doesn't work.... yet

M src/views/videos.vue => src/views/videos.vue +7 -10
@@ 16,7 16,7 @@
</template>

<script lang="ts">
import { defineComponent, inject, ref, onMounted } from 'vue';
import { defineComponent, inject, ref, watchEffect } from 'vue';
import { Auth } from '@/services/auth';
import { YTPulseApi } from '@/services/ytpulse';
import { SelectedQueue } from '@/services/selected-queue';


@@ 39,25 39,22 @@ export default defineComponent({
      selectedQueue?.addItem('video', videoId)
    }

    onMounted(() => {
      const vidget = setInterval(function () {
    watchEffect(
      () => {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user) {
              ytpulse?.getUserVideos(user)
              .then(response => {
                console.log("got user videos", new Date())
                videos.value = response
              })
              .then(response => videos.value = response)
              .catch(error => {
                console.error(error)
                // TODO: display some error message
              })
          }
          clearInterval(vidget)
        }
      }.bind(this), 1000); 
    })
      }
    )

    return {
      auth,
      videos,