Browse Source

All views are accounted for, plus experimentation

master
ポール ウェッブ 1 month ago
parent
commit
c997e9eeb0

+ 2
- 0
app/index.html View File

@@ -7,6 +7,8 @@
7 7
       content="
8 8
         default-src 'self' filesystem:;
9 9
         connect-src *;
10
+        img-src *;
11
+        media-src *;
10 12
     "/>
11 13
 
12 14
     <title><%= appName %> ∙ <%= appTagline %></title>

+ 23
- 19
app/models/resolve.js View File

@@ -6,32 +6,36 @@
6 6
 
7 7
 import m from "mithril";
8 8
 
9
+//  P A C K A G E
10
+
11
+const { Lbry } = require("lbry-redux");
12
+
9 13
 
10 14
 
11 15
 //  P R O G R A M
12 16
 
13 17
 const Resolve = {
14 18
   query: suppliedData => {
15
-    return m.request({
16
-      data: {
17
-        authorization: "b5125d5be5ef2b8f3a2fba18a349c8375a85e613",
18
-        method: "resolve",
19
-        uri: suppliedData
20
-      },
21
-      headers: {
22
-        "Content-Type": "application/json"
23
-      },
24
-      method: "POST",
25
-      // url: "https://daemon.lbry.tech/resolve",
26
-      url: "http://localhost:5200/resolve"
27
-      // useBody: true
28
-    }).then(result => {
29
-      result = result.result[suppliedData];
30
-      Resolve.result = result;
31
-    })
19
+    const id = suppliedData.split("#")[1];
20
+
21
+    // curl -d'{"method": "claim_search", "params": {"channel_id": "feb61536c007cdf4faeeaab4876cb397feaf6b51", "page": 1, "page_size": 20}}' http://localhost:5279
22
+
23
+    return Lbry.claim_search({ channel_id: id, page: 1, page_size: 20 })
24
+      .then(result => {
25
+        // console.info(result);
26
+
27
+        /*
28
+          result
29
+          result.items
30
+          result.page
31
+          result.page_size
32
+          result.total_pages
33
+        */
34
+
35
+        Resolve.result = result;
36
+      })
32 37
       .catch(error => {
33
-        console.error(error);
34
-        return null;
38
+        console.error(error); // eslint-disable-line no-console
35 39
       });
36 40
   },
37 41
   result: []

+ 72
- 31
app/views/channel.js View File

@@ -6,7 +6,7 @@
6 6
 
7 7
 import m from "mithril";
8 8
 
9
-//  U T I L
9
+//  U T I L S
10 10
 
11 11
 import Resolve from "~model/resolve";
12 12
 import Wrapper from "~component/wrapper";
@@ -18,35 +18,76 @@ import Wrapper from "~component/wrapper";
18 18
 export default {
19 19
   onmatch: args => Resolve.query(args.channelName),
20 20
   render: () => {
21
-    const creatorData = Resolve.result;
22
-
23
-    // console.log(creatorData);
24
-    console.log("Name:", creatorData.certificate.name);
25
-    console.log("TXID:", creatorData.certificate.txid);
26
-    console.log("Claims:", creatorData.claims_in_channel);
27
-    console.log("——————————");
28
-
29
-    return m(Wrapper,
30
-      <section class="ancillary inner-wrap">
31
-        <p><a href="/">Go home, Roger</a></p>
32
-      </section>
33
-    );
34
-  }
21
+    // const creatorData = Resolve.result;
22
+
23
+    // https://tympanus.net/Development/GridLoadingAnimations
24
+    // Amun / Hapi / Seker
25
+
26
+    /*
27
+      address
28
+      amount
29
+      channel_name
30
+      claim_id
31
+      effective_amount
32
+      name
33
+      normalized_name
34
+      permanent_url
35
+      txid
36
+
37
+      value.stream.author
38
+      value.stream.description
39
+      value.stream.license
40
+      value.stream.media_type
41
+      value.stream.thumbnail_url
42
+      value.stream.title
43
+    */
35 44
 
36
-  // Lbry.resolve({ urls: url }) // This can be a list of urls
37
-  //   .then(res => {
38
-  //     claimData.innerText = JSON.stringify(res[url].claim, null, 2);
39
-  //   })
40
-  //   .catch(error => {
41
-  //     claimData.innerText = JSON.stringify(error, null, 2);
42
-  // });
43
-
44
-  // curl -d'{"method": "channel_list", "params": { account: "bFiP69zpGKXgKVyguvTEfYT1JVKPi85WUp"}}' http://localhost:5279
45
-
46
-  // view: () => m(Wrapper,
47
-  //   <section class="ancillary inner-wrap">
48
-  //     <img alt="WTF bro" src="/images/what.png"/>
49
-  //     <p><a href="/">Go home, Roger</a></p>
50
-  //   </section>
51
-  // )
45
+    const { result } = Resolve;
46
+
47
+    // console.info(result);
48
+
49
+    return m(Wrapper,[
50
+      (
51
+        <content-list>
52
+          {
53
+            result.items.length ?
54
+              result.items.map(item => renderContent(item)) :
55
+              m("div", { style: "color: white; text-align: center;" }, "Waiting for content query to finish...")
56
+          }
57
+        </content-list>
58
+      )
59
+    ]);
60
+  }
52 61
 };
62
+
63
+
64
+
65
+//  H E L P E R
66
+
67
+function renderContent(suppliedData) {
68
+  const { stream } = suppliedData.value;
69
+
70
+  // console.log(suppliedData.name);
71
+  // console.log(suppliedData.claim_id);
72
+  // console.log("");
73
+
74
+  return (
75
+    <content-item>
76
+      <a
77
+        href={"/content/" + encodeURIComponent(suppliedData.name) + "/" + encodeURIComponent(suppliedData.claim_id)}
78
+        oncreate={m.route.link}
79
+        title={"View '" + stream.title + "' by " + stream.author}
80
+      >
81
+        <figure>
82
+          <img
83
+            alt={"'" + stream.title + "' by " + stream.author}
84
+            src={stream.thumbnail_url}
85
+          />
86
+          <figcaption>
87
+            {stream.title}
88
+          </figcaption>
89
+        </figure>
90
+      </a>
91
+    </content-item>
92
+  );
93
+}

+ 85
- 0
app/views/content.js View File

@@ -0,0 +1,85 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+//  U T I L S
10
+
11
+// import Resolve from "~model/resolve";
12
+import Wrapper from "~component/wrapper";
13
+
14
+
15
+
16
+//  E X P O R T
17
+
18
+export default {
19
+  // onmatch: args => Resolve.query(args.contendId),
20
+  render: vnode => {
21
+    const { claimId, claimName } = vnode.attrs;
22
+
23
+    // https://tympanus.net/Development/GridLoadingAnimations
24
+    // Amun / Hapi / Seker
25
+
26
+    /*
27
+      address
28
+      amount
29
+      channel_name
30
+      claim_id
31
+      effective_amount
32
+      name
33
+      normalized_name
34
+      permanent_url
35
+      txid
36
+
37
+      value.stream.author
38
+      value.stream.description
39
+      value.stream.license
40
+      value.stream.media_type
41
+      value.stream.thumbnail_url
42
+      value.stream.title
43
+    */
44
+
45
+    // const { result } = Resolve;
46
+
47
+    // console.info(result);
48
+
49
+    // return (
50
+    //   <content-item>
51
+    //     <a
52
+    //       href={"/content/" + encodeURIComponent(suppliedData.name) + "/" + encodeURIComponent(suppliedData.claim_id)}
53
+    //       oncreate={m.route.link}
54
+    //       title={"View '" + stream.title + "' by " + stream.author}
55
+    //     >
56
+    //       <figure>
57
+    //         <img
58
+    //           alt={"'" + stream.title + "' by " + stream.author}
59
+    //           src={stream.thumbnail_url}
60
+    //         />
61
+    //         <figcaption>
62
+    //           {stream.title}
63
+    //         </figcaption>
64
+    //       </figure>
65
+    //     </a>
66
+    //   </content-item>
67
+    // );
68
+
69
+    // https://api.lbry.tv/content/claims/house/a05f51fe630f51e2568c329222ffb5e0bea5fb2d/stream
70
+    // /claims/{claim_name}/{claim_id}/stream
71
+    // You can use that as a `src` tag on `<audio>` or `<video>` elements
72
+
73
+    return m(Wrapper, [
74
+      (
75
+        <content>
76
+          <video src={`https://api.lbry.tv/content/claims/${claimName}/${claimId}/stream`}></video>
77
+        </content>
78
+      )
79
+    ]);
80
+  }
81
+};
82
+
83
+
84
+
85
+//  H E L P E R

+ 1
- 13
app/views/home.js View File

@@ -6,20 +6,12 @@
6 6
 
7 7
 import m from "mithril";
8 8
 
9
-// import { Lbry } from "lbry-redux";
10
-
11 9
 //  U T I L S
12 10
 
13 11
 import Trending from "~model/trending";
14 12
 import Wrapper from "~component/wrapper";
15 13
 import sdkStatus from "~model/sdk-init";
16 14
 
17
-//  P A C K A G E
18
-
19
-// const { Lbry } = require("lbry-redux");
20
-
21
-// console.log(sdkStatus);
22
-
23 15
 
24 16
 
25 17
 //  E X P O R T
@@ -34,7 +26,7 @@ export default {
34 26
     const { list } = Trending;
35 27
     const channelNames = Object.keys(list);
36 28
 
37
-    return m(Wrapper, { mainClass: "inner-wrap flex-row" }, [
29
+    return m(Wrapper, { mainClass: "inner-wrap" }, [
38 30
       (
39 31
         <channels>
40 32
           {
@@ -93,10 +85,6 @@ function renderChannelLink(data, fullData) {
93 85
   // href={"/channel/" + channelName}
94 86
 }
95 87
 
96
-// https://api.lbry.tv/content/claims/house/a05f51fe630f51e2568c329222ffb5e0bea5fb2d/stream
97
-// /claims/{claim_name}/{claim_id}/stream
98
-// You can use that as a `src` tag on `<audio>` or `<video>` elements
99
-
100 88
 function resolveII(suppliedUrl) {
101 89
   return m.request({
102 90
     background: true, // commenting this out is not a good idea...

+ 2
- 0
app/views/index.js View File

@@ -5,6 +5,7 @@
5 5
 //  U T I L S
6 6
 
7 7
 import Channel from "./channel";
8
+import Content from "./content";
8 9
 import Home from "./home";
9 10
 import Nope from "./nope";
10 11
 
@@ -15,5 +16,6 @@ import Nope from "./nope";
15 16
 export default {
16 17
   "/": Home,
17 18
   "/channel/:channelName": Channel,
19
+  "/content/:claimName/:claimId": Content,
18 20
   "/:404...": Nope
19 21
 };

BIN
dist/images/missing.png View File


+ 14
- 10
sass/app/_layout.scss View File

@@ -4,6 +4,20 @@ body, {
4 4
   width: 100%; height: 100%;
5 5
 }
6 6
 
7
+html {
8
+  &::before {
9
+    top: 0; left: 0;
10
+    bottom: 0; right: 0;
11
+
12
+    animation: gradientMove 9s ease infinite;
13
+    background: linear-gradient(314deg, $lbry-teal-2, $lbry-blue-3);
14
+    background-size: 400%;
15
+    content: "";
16
+    position: fixed;
17
+    transition: background-position 1s ease;
18
+  }
19
+}
20
+
7 21
 app {
8 22
   min-height: 100vh;
9 23
   display: flex;
@@ -21,16 +35,6 @@ body {
21 35
   overflow-x: hidden;
22 36
   position: relative;
23 37
   z-index: 0;
24
-
25
-  &::before {
26
-    top: 0; right: 0;
27
-    bottom: 0; left: 0;
28
-
29
-    background-color: $lbry-black;
30
-    content: "";
31
-    position: fixed;
32
-    z-index: -1;
33
-  }
34 38
 }
35 39
 
36 40
 main {

+ 3
- 2
sass/app/components/_channel.scss View File

@@ -1,10 +1,10 @@
1 1
 channels {
2 2
   display: block;
3
-  padding-top: 2rem;
3
+  padding-top: 5rem;
4 4
 }
5 5
 
6 6
 channel {
7
-  cursor: pointer; //
7
+  // cursor: pointer; //
8 8
   display: block;
9 9
   font-size: 6rem;
10 10
   font-weight: 700;
@@ -12,6 +12,7 @@ channel {
12 12
   padding-bottom: 0.5rem;
13 13
   position: relative;
14 14
   text-transform: uppercase;
15
+
15 16
   -webkit-text-stroke: 1px $lbry-white;
16 17
 
17 18
   &:not(:hover) {

+ 54
- 0
sass/app/components/_content.scss View File

@@ -0,0 +1,54 @@
1
+content-item {
2
+  width: 40vw;
3
+  display: block;
4
+  margin-bottom: 1rem;
5
+  position: relative;
6
+
7
+  &::before {
8
+    width: 100%;
9
+
10
+    content: "";
11
+    display: block;
12
+    padding-top: (9 / 16) * 100%;
13
+  }
14
+
15
+  a {
16
+    width: 100%; height: 100%;
17
+    top: 0; right: 0;
18
+    bottom: 0; left: 0;
19
+
20
+    display: block;
21
+    position: absolute;
22
+  }
23
+
24
+  figure {
25
+    width: 100%; height: 100%;
26
+    position: relative;
27
+  }
28
+
29
+  figcaption {
30
+    width: 100%;
31
+    bottom: 2rem; left: 5rem;
32
+
33
+    color: $lbry-white;
34
+    font-size: 2vw;
35
+    font-weight: 700;
36
+    position: absolute;
37
+    text-transform: uppercase;
38
+
39
+    -webkit-text-stroke: 0.01rem rgba($lbry-black, 0.1);
40
+  }
41
+
42
+  img {
43
+    width: 100%; height: 100%;
44
+
45
+    background-color: #000;
46
+    object-fit: cover;
47
+  }
48
+}
49
+
50
+content-list {
51
+  padding: 6rem 2rem;
52
+  column-count: 2;
53
+  display: block;
54
+}

+ 1
- 0
sass/bundle.scss View File

@@ -9,6 +9,7 @@
9 9
 
10 10
 // Components
11 11
 @import "app/components/channel";
12
+@import "app/components/content";
12 13
 @import "app/components/navigation";
13 14
 
14 15
 // Partials

+ 14
- 0
sass/utilities/_animation.scss View File

@@ -17,3 +17,17 @@
17 17
     opacity: 0;
18 18
   }
19 19
 }
20
+
21
+@keyframes gradientMove {
22
+  0% {
23
+    background-position: 0%;
24
+  }
25
+
26
+  50% {
27
+    background-position: 93% 100%;
28
+  }
29
+
30
+  100% {
31
+    background-position: 0%;
32
+  }
33
+}

+ 1
- 1
sass/utilities/_base.scss View File

@@ -95,7 +95,7 @@ img {
95 95
     top: 0; left: 0;
96 96
 
97 97
     background-color: $lbry-white;
98
-    background-image: url("../media/images/missing.png");
98
+    background-image: url("../images/missing.png");
99 99
     background-size: cover;
100 100
     box-shadow: 0 0 1px 0 rgba($lbry-black, 0.3);
101 101
     content: "";

Loading…
Cancel
Save