TMTApp/src/views/Tab1Page.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-grid>
        <ion-row>
          <ion-col size="12" size-md="4" size-lg="2">
            <ion-card>
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
              <ion-card-header>
                <ion-card-title>Card Title</ion-card-title>
                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
              </ion-card-header>

              <ion-card-content>
                Here's a small text description for the card content. Nothing more, nothing less.
              </ion-card-content>
            </ion-card>
          </ion-col>
          <ion-col size="12" size-md="4" size-lg="2">
            <ion-card>
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
              <ion-card-header>
                <ion-card-title>Card Title</ion-card-title>
                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
              </ion-card-header>

              <ion-card-content>
                Here's a small text description for the card content. Nothing more, nothing less.
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
      {{ token }}
      <ion-button router-link="/tabs/detail/3/" router-direction="forward">Click Me</ion-button>
      {{ safeUrl }}
      
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/880005259?badge=0&amp;autopause=0&amp;quality_selector=1&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Muay Thai Advance"></iframe></div> 
<!--
<vue-core-video-player src="https://player.vimeo.com/progressive_redirect/playback/880005259/rendition/720p/file.mp4?loc=external&signature=5ddad1430211b33f65824444a3137fc0ec6fe61183d39997036d2dd3b78654f9"></vue-core-video-player> -->

      Video


<div id="made-in-ny" ref='video'></div>

      <ul>
        <li v-for="(item, index) in items">
          {{ item.msg }}
        </li>
      </ul>
      <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
        <ion-thumbnail slot="start" v-if="t.photo">
          <img alt="Silhouette of mountains" :src="t.photo" />
        </ion-thumbnail>
        <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
      </ion-item>
      <ion-icon icon="heart"></ion-icon>
      <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
      {{ mats }}
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">

import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonButton, 
  onIonViewWillLeave, IonItem, IonLabel, IonThumbnail, IonCol, IonGrid, IonRow, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle  } from '@ionic/vue';
import ExploreContainer  from '@/components/ExploreContainer.vue';
import { CapacitorHttp } from '@capacitor/core';
import { ref } from 'vue';
import { TOKEN, getProducts, setToken, getObject, getToken, getTrainers, listMats } from '@/settings';
//import VueCoreVideoPlayer from 'vue-core-video-player'
import { vueVimeoPlayer } from 'vue-vimeo-player'


import Player from '@vimeo/player';

const safeUrl = "https://vimeo.com/880005259?share=copy"
const token = ref()
const trainers = ref([])
const mats = ref()
 const scrollToBottom = () => {
    console.log("scroll")
    //content.value.$el.scrollToBottom(300);
  };
  const items = ref([{msg: 'foo'}, {msg: 'bar2'}])

  const options = {
        id: 59777392,
        width: 640,
        loop: true
    };
 //const video = ref(null)

  //const player = new Player(video, options);

  onIonViewWillEnter(async () => {
    //console.log("video " ,video)
    //console.log("video id", video.value.id)
    //const player = new Player(video.value.id, options);
    //player.setVolume(0);

    //player.on('play', function() {
    //    console.log('played the video!');
    //});
    console.log("view view enter")
    // doGet()
    // await getProducts()
    // console.log(TOKEN)
    // setToken()
    // let u = getObject()
    //console.log('u ', u)

    token.value = await getToken()
    trainers.value = await getTrainers()
    mats.value = await listMats()
    console.log(" trainers => ", trainers)

  })

  onIonViewWillLeave(() => {
    console.log("view will leave")
  
  })

  const doGet = async () => {
    console.log("do get")
    const options = {
      url: 'https://example.com/my/api',
      headers: { 'X-Fake-Header': 'Fake-Value' },
      params: { size: 'XL' },
    };

    const response: HttpResponse = await CapacitorHttp.get(options);
    console.log(response)
  }
</script>