git ssb - broken out into components · dangerousbeans/etherstreams@9a97ed3c

Commit 9a97ed3c5555d86b5a568540f7acdc5df0095df4

broken out into components

Joran committed on 9/27/2017, 1:02:47 AM
Parent: 30ff2002997e7314a59699dcf2a19831392c0cdf

Files changed

src/App.vue	changed
src/components/EthVideo.vue	changed
src/components/Stream.vue	changed
src/components/Streams.vue	changed
src/components/VideoPreview.vue	changed
src/components/Nav.vue	added
src/router/index.js	changed
src/store/streams.js	added
src/store/web3.js	added
src/store/webtorrent.js	added

src/App.vueView
		@@ -1,68 +1,12 @@
1	1 …	<template>
2	2 …	<div>
3	3 …
4		- <nav class="navbar navbar-default navbar-fixed-top">
5		- <div class="container">
6		- <div class="navbar-header">
	4 …	+ <main-nav></main-nav>
7	5 …
8		-
9		- <!-- Branding Image -->
10		- <router-link class="navbar-brand" :to="{ name: 'Stream'}">
11		- <span class="glyphicon glyphicon-play"></span><span>►</span> ΞtherStreams
12		- </router-link>
13		- </div>
14		-
15		- <div class="collapse navbar-collapse" id="app-navbar-collapse">
16		- <form class="navbar-form navbar-left">
17		- <div class="form-group">
18		- <input name="q" type="search" class="form-control" placeholder="Search">
19		- </div>
20		- <button type="submit" class="btn btn-default btn-search">
21		- <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
22		- </button>
23		- </form>
24		-
25		- <!-- Right Side Of Navbar -->
26		- <ul class="nav navbar-nav navbar-right">
27		-
28		- <li>
29		- <router-link :to="{name: 'UploadPage'}">
30		- <span class="glyphicon glyphicon-open"></span>
31		- </router-link>
32		- </li>
33		- <li class="dropdown">
34		- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
35		- <span class="glyphicon glyphicon-bell"></span>
36		- </a>
37		- <ul class="dropdown-menu" role="menu">
38		- <li class="dropdown-header">No Notification</li>
39		- </ul>
40		- </li>
41		- <li class="dropdown">
42		- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
43		- <span class="glyphicon glyphicon-user"></span> <span class="caret"></span>
44		- </a>
45		-
46		- <ul class="dropdown-menu" role="menu">
47		- <li class="dropdown-header"> name</li>
48		- <li>
49		- My Account
50		- </li>
51		- <li class="nav-divider"></li>
52		- <li>
53		- Logout
54		- </li>
55		- </ul>
56		- </li>
57		- </ul>
58		- </div>
59		- </div>
60		- </nav>
61		-
62	6 …	<div class="container-fluid">
63	7 …	<div class="row">
64		- <streams></streams>
	8 …	+
65	9 …	<router-view></router-view>
66	10 …	<footer></footer>
67	11 …	</div>
68	12 …	</div>
		@@ -70,15 +14,15 @@
70	14 …	</template>
71	15 …
72	16 …	<script>
73	17 …
74		-import Streams from './components/Streams.vue'
75	18 …
	19 …	+import Nav from './components/Nav.vue'
76	20 …
77	21 …	export default {
78	22 …	name: 'app',
79	23 …	components: {
80		- 'streams': Streams,
	24 …	+ 'main-nav': Nav
81	25 …	},
82	26 …
83	27 …	}
84	28 …	</script>

src/components/EthVideo.vueView
		@@ -1,6 +1,6 @@
1	1 …	<template>
2		- <div class='video-container'>
	2 …	+ <div class=''>
3	3 …	<div class='embed-responsive'>
4	4 …	<div class='video'>
5	5 …	<MoonLoader ></MoonLoader>
6	6 …	</div>

src/components/Stream.vueView
		@@ -1,14 +1,18 @@
1	1 …	<template>
2		- <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3 drop-here">
3		- <div class="row">
4		- <VideoPreview v-for="c in ContentStore.state.content" :key="c.magnet" :video="c">
5		- </VideoPreview>
6		- </div>
7		- </main>
	2 …	+ <div>
	3 …	+ <streams></streams>
	4 …	+ <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3 drop-here">
	5 …	+ <div class="row">
	6 …	+ <VideoPreview v-for="c in ContentStore.state.content" :key="c.magnet" :video="c">
	7 …	+ </VideoPreview>
	8 …	+ </div>
	9 …	+ </main>
	10 …	+ </div>
8	11 …	</template>
9	12 …
10	13 …	<script>
	14 …	+import Streams from './Streams.vue'
11	15 …	import VideoPreview from './VideoPreview.vue'
12	16 …	import ContentStore from './../store/videos'
13	17 …
14	18 …
		@@ -21,8 +25,9 @@
21	25 …	export default {
22	26 …
23	27 …	name: 'video_list',
24	28 …	components: {
	29 …	+ 'streams': Streams,
25	30 …	'VideoPreview': VideoPreview,
26	31 …	},
27	32 …	methods: {
28	33 …	seedingStarted: function(torrent)

src/components/Streams.vueView
		@@ -1,37 +1,42 @@
1	1 …	<template>
2	2 …	<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
3		- <ul class="nav nav-pills flex-column">
4		- <li class="nav-item">
5		- <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
6		- </li>
7		- <li class="nav-item">
8		- <a class="nav-link" href="#">Cats</a>
9		- </li>
10		- <li class="nav-item">
11		- <a class="nav-link" href="#">Technology</a>
12		- </li>
13		- <li class="nav-item">
14		- <a class="nav-link" href="#">Ethereum</a>
15		- </li>
16		- </ul>
	3 …	+ <ul class="nav nav-pills flex-column">
	4 …	+ <li class="nav-item">
	5 …	+ <router-link :to="{ name: 'stream', params: { address: 'testaddress234897238946239' }}" class="nav-link active">
	6 …	+ Home <span class="sr-only">(current)</span>
	7 …	+ </router-link>
17	8 …
18		- <ul class="nav nav-pills flex-column">
19		- <li class="nav-item">
20		- <a class="nav-link" href="#">Music</a>
21		- </li>
22		- <li class="nav-item">
23		- <a class="nav-link" href="#">Documentaries</a>
24		- </li>
25		- <li class="nav-item">
26		- <a class="nav-link" href="#">Political</a>
27		- </li>
28		- <li class="nav-item">
29		- <a class="nav-link" href="#">FREEDOM</a>
30		- </li>
31		- </ul>
	9 …	+ </li>
	10 …	+ <li class="nav-item">
	11 …	+ <router-link :to="{ name: 'stream', params: { address: 'testaddress234897238946239' }}" class="nav-link">
	12 …	+ Cats
	13 …	+ </router-link>
	14 …	+ </li>
	15 …	+ <li class="nav-item">
	16 …	+ <a class="nav-link" href="#">Technology</a>
	17 …	+ </li>
	18 …	+ <li class="nav-item">
	19 …	+ <a class="nav-link" href="#">Ethereum</a>
	20 …	+ </li>
	21 …	+ </ul>
32	22 …
33		- </nav>
	23 …	+ <ul class="nav nav-pills flex-column">
	24 …	+ <li class="nav-item">
	25 …	+ <a class="nav-link" href="#">Music</a>
	26 …	+ </li>
	27 …	+ <li class="nav-item">
	28 …	+ <a class="nav-link" href="#">Documentaries</a>
	29 …	+ </li>
	30 …	+ <li class="nav-item">
	31 …	+ <a class="nav-link" href="#">Political</a>
	32 …	+ </li>
	33 …	+ <li class="nav-item">
	34 …	+ <a class="nav-link" href="#">FREEDOM</a>
	35 …	+ </li>
	36 …	+ </ul>
	37 …	+
	38 …	+ </nav>
34	39 …	</template>
35	40 …
36	41 …	<script>
37	42 …
		@@ -40,9 +45,9 @@
40	45 …	name: 'streams',
41	46 …
42	47 …	data () {
43	48 …	return {
44		- // ContentStore
	49 …	+ // StreamStore
45	50 …	}
46	51 …	}
47	52 …	}
48	53 …	</script>

src/components/VideoPreview.vueView
		@@ -2,9 +2,9 @@
2	2 …
3	3 …	<div class="content-card">
4	4 …	<router-link :to="{ name: 'watch', params: { magnet: video.magnet }}">
5	5 …	<img class="card-img-top" src="./../assets/content_placeholder.png" alt="Card image cap">
6		- </router-link>
	6 …	+ </router-link>
7	7 …	<div class="">
8	8 …	<router-link :to="{ name: 'watch', params: { magnet: video.magnet }}">
9	9 …	<p class="card-title lead">{{ video.title }}</p>
10	10 …	</router-link>

src/components/Nav.vueView
		@@ -1,0 +1,77 @@
	1 …	+<template>
	2 …	+ <nav class="navbar navbar-default navbar-fixed-top">
	3 …	+ <div class="container">
	4 …	+ <div class="navbar-header">
	5 …	+
	6 …	+
	7 …	+ <!-- Branding Image -->
	8 …	+ <router-link class="navbar-brand" :to="{ name: 'Stream'}">
	9 …	+ <span class="glyphicon glyphicon-play"></span><span>►</span> ΞtherStreams
	10 …	+ </router-link>
	11 …	+ </div>
	12 …	+
	13 …	+ <div class="collapse navbar-collapse" id="app-navbar-collapse">
	14 …	+ <form class="navbar-form navbar-left">
	15 …	+ <div class="form-group">
	16 …	+ <input name="q" type="search" class="form-control" placeholder="Search">
	17 …	+ </div>
	18 …	+ <button type="submit" class="btn btn-default btn-search">
	19 …	+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	20 …	+ </button>
	21 …	+ </form>
	22 …	+
	23 …	+ <!-- Right Side Of Navbar -->
	24 …	+ <ul class="nav navbar-nav navbar-right">
	25 …	+
	26 …	+ <li>
	27 …	+ <router-link :to="{name: 'UploadPage'}">
	28 …	+ <span class="glyphicon glyphicon-open"></span>
	29 …	+ </router-link>
	30 …	+ </li>
	31 …	+ <li class="dropdown">
	32 …	+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
	33 …	+ <span class="glyphicon glyphicon-bell"></span>
	34 …	+ </a>
	35 …	+ <ul class="dropdown-menu" role="menu">
	36 …	+ <li class="dropdown-header">No Notification</li>
	37 …	+ </ul>
	38 …	+ </li>
	39 …	+ <li class="dropdown">
	40 …	+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
	41 …	+ <span class="glyphicon glyphicon-user"></span> <span class="caret"></span>
	42 …	+ </a>
	43 …	+
	44 …	+ <ul class="dropdown-menu" role="menu">
	45 …	+ <li class="dropdown-header"> name</li>
	46 …	+ <li>
	47 …	+ My Account
	48 …	+ </li>
	49 …	+ <li class="nav-divider"></li>
	50 …	+ <li>
	51 …	+ Logout
	52 …	+ </li>
	53 …	+ </ul>
	54 …	+ </li>
	55 …	+ </ul>
	56 …	+ </div>
	57 …	+ </div>
	58 …	+ </nav>
	59 …	+</template>
	60 …	+
	61 …	+<script>
	62 …	+
	63 …	+export default {
	64 …	+
	65 …	+ name: 'nav',
	66 …	+
	67 …	+ data () {
	68 …	+ return {
	69 …	+ }
	70 …	+ }
	71 …	+}
	72 …	+</script>
	73 …	+
	74 …	+<!-- Add "scoped" attribute to limit CSS to this component only -->
	75 …	+<style scoped>
	76 …	+
	77 …	+</style>

src/router/index.jsView
		@@ -17,7 +17,14 @@
17	17 …	path: '/watch/:magnet',
18	18 …	name: 'watch',
19	19 …	component: EthVideo,
20	20 …	props: true
	21 …	+ },
	22 …	+ {
	23 …	+ path: '/stream/:address',
	24 …	+ name: 'stream',
	25 …	+ component: Stream,
	26 …	+ props: true
21	27 …	}
	28 …	+
22	29 …	]
23	30 …	})

src/store/streams.jsView

src/store/web3.jsView

src/store/webtorrent.jsView
		@@ -1,0 +1,5 @@
	1 …	+export default {
	2 …	+ state: {
	3 …	+ webtorrent: null
	4 …	+ }
	5 …	+}

Built with git-ssb-web

dangerousbeans / etherstreams

Commit 9a97ed3c5555d86b5a568540f7acdc5df0095df4

broken out into components

Files changed