bootstrap
This commit is contained in:
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