ParatiiJSDemo/feed.html at master · Paratii-Video/ParatiiJSDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="/node_modules/paratii-js/dist/paratii.min.js"></script>
    <script type="text/javascript" src="/node_modules/flickity/dist/flickity.pkgd.min.js"></script>
    <script type="text/javascript" src="/node_modules/venobox/venobox/venobox.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/node_modules/flickity/dist/flickity.min.css">
    <link rel="stylesheet" type="text/css" href="/node_modules/venobox/venobox/venobox.css">

    <style media="screen">

      #address{
        width: 400px
      }
      .video_carousel .videoItem {
        width: 30%; /* full width */
        height: 200px;
        background: #222;
        /* center images in cells with flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .video_carousel .videoItem img{
        display: block;
        max-height: 100%;
      }
    </style>
  </head>
  <body>
    <a href="/">
      Home
    </a>
    <br>
    <input id="address" type="text" value="0xdF7EacFfb8F1C5F65CDD7d045A608DeBa980d473">
    <button onClick="getDataFromDBProvider()">Fetch videos and init carousel</button>
    <div class="video_carousel">

    </ul>

    <script>

    var videos
    var flickity
    var isFlickity;

    var paratii = new paratiijs.Paratii({
      account: {
        address: '0x9e2d04eef5b16CFfB4328Ddd027B55736407B275',
        privateKey: '399b141d0cc2b863b2f514ffe53edc6afc9416d5899da4d9bd2350074c38f1c6'
      },
      db: {
        "provider": "https://db.paratii.video/api/v1/"
      },
      "eth": {
        "provider": "https://newchain.paratii.video",
        "registryAddress": "0x0d03db78f5D0a85B1aBB3eAcF77CECe27e6F623F"
      }
    })

    async function getDataFromDBProvider(){
      var address = document.getElementById("address").value
      videos = await paratii.vids.search({owner: address})
      initCarousel()
    }

    function initCarousel(){
      var videoCarousel = document.getElementsByClassName("video_carousel")[0]
      // Just check if Flickity it's already initialized
      if(isFlickity){
        //If initialized destroy it and empty videoCarousel
        flickity.destroy();
        videoCarousel.innerHTML = ''
      }

      isFlickity = false
      for(i = 0; i<videos.length; i++){
        var video = videos[i]
        var videoItem = document.createElement("a")
        videoItem.className = "videoItem venobox"
        videoItem.setAttribute("data-vbtype", "iframe")

        // TODO change this as soon _id will be replace by id
        videoItem.setAttribute("href", "http://portal.paratii.video/embed/"+video._id+"?autoplay=1")
        var thumb = document.createElement("IMG")
        console.log(video)
        if(video.thumbnails[0]){
          thumb.src = "https://gateway.paratii.video/ipfs/"+video.ipfsHash+"/"+video.thumbnails[0]
        } else {
          thumb.src = "/static/img/paratii-src.png"
        }
        videoItem.appendChild(thumb)
        videoCarousel.appendChild(videoItem)
      }

      // inizialize Flickity
      flickity = new Flickity( videoCarousel, {
        // options
        cellAlign: 'left',
        lazyLoad: 1
      });

      isFlickity = true
      $('.venobox').venobox();

    }
    </script>
  </body>
</html>