bootstrap
This commit is contained in:
uf0
commit
2ecb98a842
16 changed files with 706 additions and 0 deletions
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
public/bundle.*
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
.vscode
|
||||
6
.prettierrc
Normal file
6
.prettierrc
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{"svelteSortOrder" : "styles-scripts-markup",
|
||||
"svelteStrictMode": true,
|
||||
"svelteBracketNewLine": true,
|
||||
"svelteAllowShorthand": false,
|
||||
"svelteIndentScriptAndStyle": false
|
||||
}
|
||||
64
README.md
Normal file
64
README.md
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
# svelte app
|
||||
|
||||
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template-webpack.
|
||||
|
||||
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template-webpack svelte-app
|
||||
cd svelte-app
|
||||
```
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
Install the dependencies...
|
||||
|
||||
```bash
|
||||
cd svelte-app
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start webpack:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes.
|
||||
|
||||
|
||||
## Deploying to the web
|
||||
|
||||
### With [now](https://zeit.co/now)
|
||||
|
||||
Install `now` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g now
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
now
|
||||
```
|
||||
|
||||
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
|
||||
|
||||
### With [surge](https://surge.sh/)
|
||||
|
||||
Install `surge` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g surge
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
surge public
|
||||
```
|
||||
24
package.json
Normal file
24
package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"devDependencies": {
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^2.1.1",
|
||||
"mdsvex": "^0.8.8",
|
||||
"mini-css-extract-plugin": "^0.6.0",
|
||||
"serve": "^11.0.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-loader": "2.13.3",
|
||||
"webpack": "^4.30.0",
|
||||
"webpack-cli": "^3.3.0",
|
||||
"webpack-dev-server": "^3.3.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack",
|
||||
"dev": "webpack-dev-server --content-base public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vime/svelte": "4.2.0"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
10
public/global.css
Normal file
10
public/global.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: rgb(34, 35, 31);
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
|
||||
}
|
||||
17
public/index.html
Normal file
17
public/index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf8'>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
|
||||
<title>Off Topic live</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='favicon.png'>
|
||||
<link rel='stylesheet' href='global.css'>
|
||||
<link rel='stylesheet' href='bundle.css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src='bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
104
src/App.svelte
Normal file
104
src/App.svelte
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: calc(100% - 55px);
|
||||
flex-direction: column;
|
||||
/* max-width:1320px; */
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
color: white;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.videoContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chatContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.videoContainer {
|
||||
flex: 0 0 70%;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.chatContainer {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import VideoPlayer from "./components/VideoPlayer.svelte";
|
||||
import Chat from "./components/Chat.svelte";
|
||||
import Nav from "./components/Nav.svelte";
|
||||
import Description from "./components/Description.svx";
|
||||
// import { onMount } from "svelte";
|
||||
// import { live, channel } from "./stores.js";
|
||||
|
||||
// let liveChannels = [];
|
||||
|
||||
// onMount(async () => {
|
||||
// const res = await fetch(
|
||||
// `https://cors-anywhere.herokuapp.com/https://live.autistici.org/stats`
|
||||
// );
|
||||
// const xmlText = await res.text();
|
||||
// liveChannels = await new window.DOMParser().parseFromString(
|
||||
// xmlText,
|
||||
// "text/xml"
|
||||
// );
|
||||
// const streams = liveChannels
|
||||
// .getElementsByTagName("application")[0]
|
||||
// .getElementsByTagName("stream");
|
||||
|
||||
// for (const i = 0; i < streams.length; i++) {
|
||||
// livechannels.push(streams[i].getElementsByTagName("name")[0].textContent);
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
|
||||
<Nav />
|
||||
<div class="container">
|
||||
<div class="videoContainer">
|
||||
<VideoPlayer />
|
||||
<div class="desc">
|
||||
<Description />
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatContainer">
|
||||
<Chat />
|
||||
</div>
|
||||
</div>
|
||||
19
src/components/Chat.svelte
Normal file
19
src/components/Chat.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<style>
|
||||
.chatIframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { live, channel } from "../stores.js";
|
||||
</script>
|
||||
|
||||
<iframe
|
||||
title="live chat"
|
||||
class="chatIframe"
|
||||
src="{`https://kiwiirc.com/nextclient/#irc://irc.autistici.org:+6697/#${$channel}`}"
|
||||
></iframe>
|
||||
13
src/components/Description.svx
Normal file
13
src/components/Description.svx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b992;
|
||||
}
|
||||
</style>
|
||||
|
||||
Off Topic è un laboratorio politico che ha sede presso lo spazio autogestito [Piano Terra](https://www.pianoterralab.org/) a Milano. Leggi i nostri approfondimenti sul [sito](https://www.offtopiclab.org) o seguici su canale [Telegram](https://t.me/offtopic_lab/) e/o [Twitter](https://twitter.com/OffTopic_lab) per rimanere sempre aggioranta/o.
|
||||
|
||||
Questo live stream è possibile grazie al collettivo [Autistici/Inventati](https://www.autistici.org). Fai una [donazione](https://www.autistici.org/donate) per supportare il progetto.
|
||||
57
src/components/Nav.svelte
Normal file
57
src/components/Nav.svelte
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<style>
|
||||
nav {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.title h1 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: rgb(34, 35, 31);
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 0.75rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.live {
|
||||
background-color: red !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { live, channel } from "../stores.js";
|
||||
|
||||
onMount(async () => {
|
||||
const res = await fetch(`https://live.autistici.org/hls/${$channel}.m3u8`);
|
||||
if (res.status !== 200) {
|
||||
live.set(false);
|
||||
} else {
|
||||
live.set(true);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<div class="title">
|
||||
<h1>Off Topic</h1>
|
||||
<div class="badge" class:live="{$live}">live</div>
|
||||
</div>
|
||||
</nav>
|
||||
263
src/components/Offline.svelte
Normal file
263
src/components/Offline.svelte
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
<style>
|
||||
.offline {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 21;
|
||||
pointer-events: none;
|
||||
background-color: rgb(34, 35, 31);
|
||||
}
|
||||
|
||||
@keyframes screen-turn-on {
|
||||
0% {
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
border-radius: 0px;
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
50% {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-radius: 0px;
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
51% {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-radius: 0px;
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
70% {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-radius: 0px;
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
80% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
background-color: #454545;
|
||||
}
|
||||
}
|
||||
@keyframes shiver {
|
||||
0% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 6px 0 rgba(255, 0, 0, 0.9), -6px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
5% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
10% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
15% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 7px 0 rgba(255, 0, 0, 0.9), -7px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
20% {
|
||||
transform: translate(1px, 2px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
25% {
|
||||
transform: translate(1px, 2px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
30% {
|
||||
transform: translate(1px, 2px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
35% {
|
||||
transform: translate(1px, 2px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
40% {
|
||||
transform: translate(2px, 1px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
45% {
|
||||
transform: translate(2px, 1px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
50% {
|
||||
transform: translate(2px, 1px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
55% {
|
||||
transform: translate(2px, 1px);
|
||||
text-shadow: 4px 0 rgba(255, 0, 0, 0.9), -4px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
60% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
65% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
70% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
75% {
|
||||
transform: translate(1px, 1px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, 1px);
|
||||
text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
85% {
|
||||
transform: translate(2px, 1px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
90% {
|
||||
transform: translate(2px, 2px);
|
||||
text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
95% {
|
||||
transform: translate(2px, 2px);
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
100% {
|
||||
transform: translate(1px, 2px);
|
||||
text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
#screen:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background-image: -webkit-linear-gradient(
|
||||
bottom,
|
||||
rgba(255, 255, 255, 0.2) 33.3%,
|
||||
rgba(255, 255, 255, 0.4) 33.3%,
|
||||
rgba(255, 255, 255, 0.4) 66.7%,
|
||||
rgba(255, 255, 255, 0.6) 66.7%
|
||||
),
|
||||
-webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 33.3%, rgba(
|
||||
0,
|
||||
255,
|
||||
0,
|
||||
0.7
|
||||
)
|
||||
33.3%, rgba(0, 255, 0, 0.6) 66.7%, rgba(0, 0, 255, 0.6) 66.7%);
|
||||
background-image: -moz-linear-gradient(
|
||||
bottom,
|
||||
rgba(255, 255, 255, 0.2) 33.3%,
|
||||
rgba(255, 255, 255, 0.4) 33.3%,
|
||||
rgba(255, 255, 255, 0.4) 66.7%,
|
||||
rgba(255, 255, 255, 0.6) 66.7%
|
||||
),
|
||||
-webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 33.3%, rgba(
|
||||
0,
|
||||
255,
|
||||
0,
|
||||
0.7
|
||||
)
|
||||
33.3%, rgba(0, 255, 0, 0.6) 66.7%, rgba(0, 0, 255, 0.6) 66.7%);
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgba(255, 255, 255, 0.2) 33.3%,
|
||||
rgba(255, 255, 255, 0.4) 33.3%,
|
||||
rgba(255, 255, 255, 0.4) 66.7%,
|
||||
rgba(255, 255, 255, 0.6) 66.7%
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
rgba(255, 0, 0, 0.7) 33.3%,
|
||||
rgba(0, 255, 0, 0.7) 33.3%,
|
||||
rgba(0, 255, 0, 0.6) 66.7%,
|
||||
rgba(0, 0, 255, 0.6) 66.7%
|
||||
);
|
||||
background-size: 3px 3px;
|
||||
mix-blend-mode: multiply;
|
||||
background-color: #00f;
|
||||
}
|
||||
#screen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #0a0a0a;
|
||||
color: #fff;
|
||||
text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
|
||||
border-radius: 5px;
|
||||
}
|
||||
#screen {
|
||||
background-color: #222;
|
||||
}
|
||||
#content-holder {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
#content {
|
||||
background-color: #b0b0b0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
#content {
|
||||
animation: screen-turn-on 0.4s linear 0.5s 1 forwards;
|
||||
}
|
||||
|
||||
/* #channel {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 25px;
|
||||
font-size: 2rem;
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
vertical-align: middle;
|
||||
color: #fbff68;
|
||||
animation: shiver 1s linear 0.5s infinite;
|
||||
} */
|
||||
#text {
|
||||
color: #ededed;
|
||||
text-align: left;
|
||||
font-weight: 200;
|
||||
/* text-transform: uppercase; */
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 3rem;
|
||||
animation: shiver 1s linear 0.5s infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="offline">
|
||||
<div id="screen">
|
||||
<div id="content-holder">
|
||||
<div id="content">
|
||||
<div id="app">
|
||||
<!-- <div id="channel">OT CHANNEL</div> -->
|
||||
<div id="text">Non siamo live!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
42
src/components/VideoPlayer.svelte
Normal file
42
src/components/VideoPlayer.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
import {
|
||||
VimePlayer,
|
||||
VimeHls,
|
||||
usePlayerStore,
|
||||
VimeControls,
|
||||
VimeFullscreenControl,
|
||||
VimeScrim,
|
||||
VimeControlSpacer,
|
||||
VimeVolumeControl,
|
||||
VimePlaybackControl,
|
||||
VimeDefaultUi,
|
||||
} from "@vime/svelte";
|
||||
import "@vime/core/themes/default.css";
|
||||
import Offline from "./Offline.svelte";
|
||||
import { live, channel } from "../stores.js";
|
||||
|
||||
let player;
|
||||
//const { paused } = usePlayerStore(() => player);
|
||||
</script>
|
||||
|
||||
<VimePlayer playsinline bind:this="{player}">
|
||||
<VimeHls preload="auto" version="latest">
|
||||
<source
|
||||
data-src="{`https://live.autistici.org/hls/${$channel}.m3u8`}"
|
||||
type="application/x-mpegURL"
|
||||
/>
|
||||
</VimeHls>
|
||||
{#if !$live}
|
||||
<Offline />
|
||||
{/if}
|
||||
|
||||
<VimeDefaultUi noControls>
|
||||
<VimeScrim />
|
||||
<VimeControls fullWidth>
|
||||
<VimePlaybackControl hideTooltip />
|
||||
<VimeVolumeControl hideTooltip />
|
||||
<VimeControlSpacer />
|
||||
<VimeFullscreenControl hideTooltip />
|
||||
</VimeControls>
|
||||
</VimeDefaultUi>
|
||||
</VimePlayer>
|
||||
9
src/main.js
Normal file
9
src/main.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body
|
||||
});
|
||||
|
||||
window.app = app;
|
||||
|
||||
export default app;
|
||||
15
src/stores.js
Normal file
15
src/stores.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import queryString from "query-string";
|
||||
import { writable, derived } from 'svelte/store';
|
||||
|
||||
const live = writable(false);
|
||||
|
||||
const channel = writable('offtopic');
|
||||
if (typeof window !== "undefined") {
|
||||
const parsed = queryString.parse(window.location.search);
|
||||
if(parsed.channel){
|
||||
channel.set(parsed.channel)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export { live, channel}
|
||||
57
webpack.config.js
Normal file
57
webpack.config.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
const { mdsvex } = require('mdsvex')
|
||||
|
||||
const mode = process.env.NODE_ENV || 'development';
|
||||
const prod = mode === 'production';
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
bundle: ['./src/main.js']
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
svelte: path.resolve('node_modules', 'svelte')
|
||||
},
|
||||
extensions: ['.mjs', '.js', '.svelte','.svx'],
|
||||
mainFields: ['svelte', 'browser', 'module', 'main']
|
||||
},
|
||||
output: {
|
||||
path: __dirname + '/public',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[name].[id].js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /.(svelte|svx)$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
options: {
|
||||
emitCss: true,
|
||||
hotReload: true,
|
||||
preprocess: mdsvex()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
/**
|
||||
* MiniCssExtractPlugin doesn't support HMR.
|
||||
* For developing, use 'style-loader' instead.
|
||||
* */
|
||||
prod ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
mode,
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css'
|
||||
})
|
||||
],
|
||||
devtool: prod ? false: 'source-map'
|
||||
};
|
||||
Loading…
Reference in a new issue