Editor.vue

<template>
  <Page actionBarHidden="true">
    <GridLayout columns="*" rows="50, *">
      <GridLayout row="0" columns="*, *, auto" rows="*" id="actionBar">
        <Label col="0" row="0" text="Back"></Label>
        <Label col="1" row="0" text="qqq" class="title"></Label>
        <FlexboxLayout col="2" row="0" id="options">
          <Label text="+" @tap="addSong" />
          <Label text="->" id="playbtn" @tap="play" />
          <Label text="---" />
        </FlexboxLayout>
      </GridLayout>

      <ScrollView orientation="horizontal" row="1" col="0" ref="scrollview"
                  :isUserInteractionEnabled="scroll">
        <StackLayout>
          <AbsoluteLayout>
            <StackLayout ref="time" id="test"></StackLayout>

            <GridLayout rows="25, auto">
              <FlexboxLayout id="time" row="0" orientation="horizontal" borderColor="black" borderWidth="0">
                <Label text="|" :class="getTickClass(index)" v-for="(item, index) in test" />
              </FlexboxLayout>

              <GridLayout row="1" :rows="'auto,'.repeat(items.length)" columns="auto">
                <StackLayout :row="index" v-for="(item, index) in items" height="75" margin="5" borderColor="black"
                             borderWidth="1">
                  <ContentView id="test" horizontalAlignment="left" height="100%" ref="contentView">
                    <StackLayout orientation="horizontal" ref="row">
                      <StackLayout>
                        <Label text="| Mic IMG |" class="micImg"/>
                      </StackLayout>
                      <StackLayout v-for="speech in item.speeches"
                                   :marginLeft="speech.start * 10"
                                   :width="(speech.end - speech.start) * 20"
                                   :backgroundColor="item.backgroundColor"
                                   @pan="onPan($event, item, speech)"
                                   :ref="item.name">
                        <Image :src="item.src" height="50" width="50"/>
                        <Label :text="`${speech.id}`" />
                      </StackLayout>
                    </StackLayout>
                  </ContentView>
                </StackLayout>
              </GridLayout>
            </GridLayout>
          </AbsoluteLayout>
        </StackLayout>
      </ScrollView>
    </GridLayout>
  </Page>
</template>

<script>
  const audio = require('nativescript-audio')
  const timer = require('tns-core-modules/timer')

  export default {
    data () {
      return {
        test: [],
        totalSeconds: 0,
        seconds: 0,
        minutes: 0,
        hours: 0,
        items: [
          {
          id: 0,
          name: "charmander",
          src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png",
          backgroundColor: "red",
          speeches: [{
              id: 0,
              song: '~/assets/audio/rocks.mp4',
              start: 2,
              end: 10
            }]
          },
          {
            id: 1,
            name: "charizard",
            src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png",
            backgroundColor: "green",
            speeches: [{
              id: 0,
              song: '~/assets/audio/heart.mp4',
              start: 1,
              end: 5
            },
            {
              id: 1,
              song: 'charizard2.mp4',
              start: 15,
              end: 25
            }]
          },
          {
            id: 2,
            name: "wartortle",
            src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png",
            backgroundColor: "blue",
            speeches: [{
              id: 0,
              song: 'wartortle.mp4',
              start: 9,
              end: 10
            }]
          }
        ],
        prevDeltaX: 0,
        prevDeltaY: 0,
        speech: null,
        scroll: true,
        data: null,
        scrollOrientation: 'horizontal'
      }
    },
    methods: {
      msToHMS(ms) {
        this.totalSeconds = Math.trunc(ms / 1000)
        this.seconds = ms / 1000
        this.hours = Math.trunc(this.seconds / 3600)
        this.seconds = this.seconds % 3600
        this.minutes = Math.trunc(this.seconds / 60)
        this.seconds = Math.trunc(this.seconds % 60)
      },
      addSong() {
        // Add a new row
        this.items = [
          ...this.items,
          {
            id: 3,
            name: "tartanpion",
            src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png",
            backgroundColor: "black",
            speeches: [{
              id: 0,
              start: 9,
              end: 10
            }]
          }
        ]

        // Add a new speech
        this.items[2].speeches.push({
          id: 1,
          song: 'wartortle2.mp4',
          start: 8,
          end: 16
        })
      },
      play () {
        this.data = this.getPokemonsAndSpeeches()
        let t = 1
        timer.setInterval(() => {
          const px = 16

          this.$refs.time.nativeView.animate({
            translate: {
              x: t * px,
              y: 0
            },
            duration: 100
          })

          t++
        }, 1000)

        setInterval(() => {
          this.isCollide()
        }, 100)
      },
      playSong(song) {
        console.log('play')

        const player = new audio.TNSPlayer()
        const playerOptions = {
          audioFile: song,
          loop: false
        }

        player.playFromFile(playerOptions)

        const audioTrackDuration = player.getAudioTrackDuration()
        this.msToHMS(audioTrackDuration)
      },
      getTickClass (index) {
        return index % 2 === 0 ? 'big' : 'little'
      },
      getPokemonsAndSpeeches () {
        const pokemons = this.items.map(({ name }) => name)
        const speeches = this.items.map(({ speeches }) => speeches.map(({ id }) => id ))

        return { pokemons, speeches }
      },
      onPan (args, item, speech) {
        this.$refs.row[item.id].nativeView.width = this.$refs.scrollview.nativeView.getActualSize().height
        this.speech = this.$refs[item.name][speech.id].nativeView

        if (args.state === 1) {
          this.prevDeltaX = 0
          this.prevDeltaY = 0
        } else if (args.state === 2) {
          this.scroll = false
          this.speech.translateX += args.deltaX - this.prevDeltaX
          this.prevDeltaX = args.deltaX
        } else if (args.state === 3 ) {
          this.scroll = true
        }
      },
      async isCollide () {
        const h = this.$refs.time.nativeView.height
        const w = this.$refs.time.nativeView.width
        const x = this.$refs.time.nativeView.getLocationOnScreen().x
        const y = this.$refs.time.nativeView.getLocationOnScreen().y

        let refh = 0
        let refw = 0
        let refx = 0
        let refy = 0

        for (let i = 0; i < this.data.speeches.length; i++) {
          for (let j = 0; j < this.data.speeches[i].length; j++) {
            const ref = this.$refs[this.data.pokemons[i]][this.data.speeches[i][j]].nativeView
            refh = ref.height
            refw = ref.width
            refx = ref.getLocationOnScreen().x
            refy = ref.getLocationOnScreen().y

            const res = this.items.find(x => x.name === this.data.pokemons[i]).speeches.find(y => y.id === this.data.speeches[i][j])

            if (!(
              (refx >= (x + w)) ||
              ((refx + refw) <= x) ||
              (refy >= (y + h)) ||
              ((refy + refh) <= y)
            )) {
              if (!res.running) {
                res.running = true
                ref.backgroundColor = 'black'
                this.playSong(res.song)
              }
            } else {
              if (res.running) {
                res.running = false
                ref.backgroundColor = 'white'
              }
            }
          }
        }
      }
    },
    mounted () {
      for (let i = 0; i < 100; i++) {
        this.test.push(i)
      }

      setTimeout(() => {
        this.$refs.time.nativeView.height = this.$refs.scrollview.nativeView.getActualSize().width
      }, 500)
    }
  }
</script>

<style lang="scss" scoped>
  .micImg {
    text-align: center;
    vertical-align: center;
    padding: 25 0;
  }

  #debug {
    flex-direction: column;
  }

  #songs {
    flex-direction: row;
  }

  FlexboxLayout#time {
    align-items: flex-end;

    Label.big {
      font-size: 15;
      margin: 0 5;
    }

    Label.little {
      font-size: 7;
    }
  }

  .big {
    font-size: 15;
    margin: 0 5;
  }

  .little {
    font-size: 7;
  }

  StackLayout#test {
    width: 2;
    height: 100;
    left: 80;
    background-color: red;
    z-index: 9999;
  }

  GridLayout#actionBar {
    width: 90%;
    height: 50;

    Label {
      vertical-align: center;
    }

    FlexboxLayout#options {
      vertical-align: center;
    }
  }

  FlexboxLayout {
    Label#playbtn {
      margin-right: 15;
    }
  }

  ScrollView,
  AbsoluteLayout,
  ListView {
    height: 100%;
  }

  FlexboxLayout#infos {
    Image {
      height: 50;
      width: 50;
    }
  }

  #idontknow,
  #speeches {
    height: 100%;
  }
</style>