git
This commit is contained in:
commit
164439d3a7
GPG Key ID:
1688DA83D222D0B5
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/config.ini
|
||||||
|
/node_modules/
|
||||||
|
/dist/
|
||||||
|
/venv/
|
||||||
|
*.db
|
||||||
|
*.pyc
|
||||||
280
app.py
Normal file
280
app.py
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
from flask import Flask, request, make_response, session, redirect, render_template, send_from_directory, jsonify
|
||||||
|
from time import gmtime, strftime
|
||||||
|
from uuid import uuid4
|
||||||
|
|
||||||
|
import requests
|
||||||
|
import json
|
||||||
|
import sqlite3
|
||||||
|
import base64
|
||||||
|
import configparser
|
||||||
|
import os
|
||||||
|
|
||||||
|
"""
|
||||||
|
SQLite3 Database Schema
|
||||||
|
|
||||||
|
CREATE TABLE channels (
|
||||||
|
"id" INTEGER PRIMARY KEY,
|
||||||
|
"name" TEXT NOT NULL,
|
||||||
|
"key" TEXT NOT NULL,
|
||||||
|
"live_at" TEXT,
|
||||||
|
"password" TEXT,
|
||||||
|
"user_uuid" TEXT
|
||||||
|
, "last_stream" TEXT);
|
||||||
|
|
||||||
|
CREATE TABLE signed_users (
|
||||||
|
"id" INTEGER PRIMARY KEY,
|
||||||
|
"uuid" TEXT NOT NULL,
|
||||||
|
"name" TEXT NOT NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
d2c45910-8eb8-11e8-b357-b10f0028b927
|
||||||
|
"""
|
||||||
|
|
||||||
|
# Load configuration
|
||||||
|
config = configparser.ConfigParser()
|
||||||
|
|
||||||
|
config['Streaming'] = {
|
||||||
|
'Database': 'streaming.db'
|
||||||
|
'StreamServer': 'https://tv.icynet.eu/live/',
|
||||||
|
'ServerHost': 'icynet.eu',
|
||||||
|
'PublishAddress': 'rtmp://{host}:1935/hls-live/{streamer}',
|
||||||
|
}
|
||||||
|
config['Auth'] = {
|
||||||
|
'Server': 'http://localhost:8282',
|
||||||
|
'Redirect': 'http://localhost:5000/auth/_callback/',
|
||||||
|
}
|
||||||
|
config['OAuth2'] = {
|
||||||
|
'ClientID': '1',
|
||||||
|
'ClientSecret': 'changeme',
|
||||||
|
}
|
||||||
|
|
||||||
|
if os.path.exists('config.ini'):
|
||||||
|
config.read('config.ini')
|
||||||
|
|
||||||
|
with open('config.ini', 'w') as configfile:
|
||||||
|
config.write(configfile)
|
||||||
|
|
||||||
|
# App settings
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
auth_image = "{server}/api/avatar/{uuid}"
|
||||||
|
oauth_auth = "{server}/oauth2/authorize?response_type=code&state={state}&redirect_uri={redirect}&client_id={client}&scope=image"
|
||||||
|
stream_server = config['Streaming']['StreamServer']
|
||||||
|
auth_server = config['Auth']['Server']
|
||||||
|
oauth_redirect = config['Auth']['Redirect']
|
||||||
|
oauth_id = int(config['OAuth2']['ClientID'])
|
||||||
|
oauth_secret = config['OAuth2']['ClientSecret']
|
||||||
|
|
||||||
|
# Database
|
||||||
|
conn = sqlite3.connect(config['Streaming']['Database'], check_same_thread=False)
|
||||||
|
|
||||||
|
# Streamer Cache
|
||||||
|
stream_cache = {}
|
||||||
|
|
||||||
|
# Check if user is a streamer
|
||||||
|
def valid_streamer(uuid):
|
||||||
|
streamer = None
|
||||||
|
|
||||||
|
if 'uuid' in session:
|
||||||
|
if session['uuid'] in stream_cache:
|
||||||
|
streamer = stream_cache[session['uuid']]
|
||||||
|
else:
|
||||||
|
# Find key in database
|
||||||
|
data = conn.execute('SELECT * FROM channels WHERE user_uuid=?', (session['uuid'],))
|
||||||
|
row = data.fetchone()
|
||||||
|
|
||||||
|
# Deny stream publish
|
||||||
|
if row:
|
||||||
|
streamer = row[2]
|
||||||
|
|
||||||
|
return streamer
|
||||||
|
|
||||||
|
@app.route("/")
|
||||||
|
def index():
|
||||||
|
streamer = False
|
||||||
|
if 'uuid' in session:
|
||||||
|
if valid_streamer(session['uuid']):
|
||||||
|
streamer = True
|
||||||
|
|
||||||
|
return render_template("index.html", streamer = streamer)
|
||||||
|
|
||||||
|
@app.route("/dashboard")
|
||||||
|
def dashboard():
|
||||||
|
if not 'uuid' in session:
|
||||||
|
return redirect("/login", code = 302)
|
||||||
|
|
||||||
|
streamkey = valid_streamer(session['uuid'])
|
||||||
|
if not streamkey:
|
||||||
|
return make_response("Unauthorized.", 402)
|
||||||
|
|
||||||
|
return render_template("dashboard.html", stream = streamkey,
|
||||||
|
server = config['Streaming']['PublishAddress'].format(streamer = "", host = config['Streaming']['ServerHost']))
|
||||||
|
|
||||||
|
@app.route("/dashboard/data")
|
||||||
|
def dashboard_data():
|
||||||
|
if not 'uuid' in session:
|
||||||
|
return jsonify({'error': 'Unauthorized'})
|
||||||
|
|
||||||
|
streamkey = valid_streamer(session['uuid'])
|
||||||
|
if not streamkey:
|
||||||
|
return jsonify({'error': 'Unauthorized'})
|
||||||
|
|
||||||
|
# Find key in database
|
||||||
|
data = conn.execute('SELECT * FROM channels WHERE key=?', (streamkey,))
|
||||||
|
row = data.fetchone()
|
||||||
|
|
||||||
|
if not row:
|
||||||
|
return jsonify({'error': 'Unauthorized'})
|
||||||
|
|
||||||
|
livedate = row[3]
|
||||||
|
|
||||||
|
data = {
|
||||||
|
'name': row[1],
|
||||||
|
'key': streamkey,
|
||||||
|
'uuid': session['uuid'],
|
||||||
|
'live': livedate != None,
|
||||||
|
'live_at': livedate,
|
||||||
|
'last_stream': row[6],
|
||||||
|
}
|
||||||
|
|
||||||
|
return jsonify(data)
|
||||||
|
|
||||||
|
# Called when starting publishing
|
||||||
|
@app.route("/publish", methods=["POST"])
|
||||||
|
def publish():
|
||||||
|
print(json.dumps(request.form, ensure_ascii=False))
|
||||||
|
|
||||||
|
streamkey = request.form["name"]
|
||||||
|
|
||||||
|
# Find key in database
|
||||||
|
data = conn.execute('SELECT * FROM channels WHERE key=?', (streamkey,))
|
||||||
|
row = data.fetchone()
|
||||||
|
|
||||||
|
# Deny stream publish
|
||||||
|
if not row:
|
||||||
|
return make_response("Request Denied", 400)
|
||||||
|
|
||||||
|
streamer = row[1]
|
||||||
|
|
||||||
|
print("Streamer %s has started streaming!" % streamer)
|
||||||
|
|
||||||
|
# Redirect stream publish to stream name
|
||||||
|
url = config['Streaming']['PublishAddress'].format(streamer = streamer, host = "127.0.0.1")
|
||||||
|
|
||||||
|
response = make_response(url, 302)
|
||||||
|
response.headers["Location"] = url
|
||||||
|
|
||||||
|
# Update database with stream timestamp
|
||||||
|
starttime = strftime("%Y-%m-%d %H:%M:%S", gmtime())
|
||||||
|
|
||||||
|
conn.execute('UPDATE channels SET live_at=? WHERE id=?', (starttime, row[0]))
|
||||||
|
conn.commit()
|
||||||
|
|
||||||
|
return response
|
||||||
|
|
||||||
|
# Called when stopped publishing
|
||||||
|
@app.route("/publish_done", methods=["POST"])
|
||||||
|
def publish_done():
|
||||||
|
streamkey = request.form["name"]
|
||||||
|
|
||||||
|
# Update database with stream end time
|
||||||
|
endtime = strftime("%Y-%m-%d %H:%M:%S", gmtime())
|
||||||
|
|
||||||
|
conn.execute('UPDATE channels SET live_at=NULL, last_stream=? WHERE key=?', (endtime, streamkey,))
|
||||||
|
conn.commit()
|
||||||
|
|
||||||
|
return "OK"
|
||||||
|
|
||||||
|
@app.route("/login")
|
||||||
|
def login():
|
||||||
|
if 'uuid' in session:
|
||||||
|
return make_response("Already authenticated as %s!" % session['username'])
|
||||||
|
|
||||||
|
state = str(uuid4())
|
||||||
|
session['state'] = state
|
||||||
|
|
||||||
|
return redirect(oauth_auth.format(state = state, client = oauth_id, redirect = oauth_redirect, server = auth_server), code = 302)
|
||||||
|
|
||||||
|
@app.route("/logout")
|
||||||
|
def logout():
|
||||||
|
session.clear()
|
||||||
|
return redirect("/", code = 302)
|
||||||
|
|
||||||
|
@app.route("/auth/_callback/")
|
||||||
|
def cb():
|
||||||
|
if not 'state' in session:
|
||||||
|
return make_response("Something went wrong!", 402)
|
||||||
|
|
||||||
|
code = request.args.get('code')
|
||||||
|
state = request.args.get('state')
|
||||||
|
|
||||||
|
if session['state'] != state:
|
||||||
|
return make_response("Something went wrong!", 402)
|
||||||
|
|
||||||
|
if not code:
|
||||||
|
return make_response("Authorization denied by user", 402)
|
||||||
|
|
||||||
|
# Get access token
|
||||||
|
r = requests.post(auth_server + "/oauth2/token", data = {
|
||||||
|
'grant_type': 'authorization_code',
|
||||||
|
'code': code,
|
||||||
|
'redirect_uri': oauth_redirect,
|
||||||
|
'client_id': oauth_id,
|
||||||
|
'client_secret': oauth_secret
|
||||||
|
}, headers = {
|
||||||
|
'Authorization': 'Basic ' + str(base64.b64encode(bytes("%s:%s" % (oauth_id, oauth_secret), 'utf-8')))
|
||||||
|
})
|
||||||
|
|
||||||
|
res_token = None
|
||||||
|
try:
|
||||||
|
res_token = r.json()
|
||||||
|
except ValueError:
|
||||||
|
return make_response("Something went wrong while getting an access token!")
|
||||||
|
|
||||||
|
if 'error' in res_token:
|
||||||
|
return make_response("%s: %s" % (res_token['error'], res_token['error_description']), 500)
|
||||||
|
|
||||||
|
token = res_token['access_token']
|
||||||
|
|
||||||
|
# Get user info
|
||||||
|
ru = requests.get(auth_server + "/oauth2/user", headers = {
|
||||||
|
'Authorization': 'Bearer ' + token
|
||||||
|
})
|
||||||
|
|
||||||
|
res_uinfo = None
|
||||||
|
try:
|
||||||
|
res_uinfo = ru.json()
|
||||||
|
except ValueError:
|
||||||
|
return make_response("Something went wrong while getting user information!")
|
||||||
|
|
||||||
|
udata = conn.execute('SELECT * FROM signed_users WHERE uuid=?', (res_uinfo['uuid'],))
|
||||||
|
row = udata.fetchone()
|
||||||
|
|
||||||
|
if not row:
|
||||||
|
conn.execute('INSERT INTO signed_users (uuid, name) VALUES (?, ?)', (res_uinfo['uuid'], res_uinfo['username']))
|
||||||
|
conn.commit()
|
||||||
|
|
||||||
|
session['uuid'] = res_uinfo['uuid']
|
||||||
|
session['username'] = res_uinfo['username']
|
||||||
|
|
||||||
|
return redirect("/", code = 302)
|
||||||
|
|
||||||
|
@app.route("/watch/<name>")
|
||||||
|
def watch(name):
|
||||||
|
return render_template("player.html", name = name, server = stream_server)
|
||||||
|
|
||||||
|
@app.route("/player/<name>")
|
||||||
|
def watch_old(name):
|
||||||
|
return redirect("/watch/%s" % name, code = 302)
|
||||||
|
|
||||||
|
@app.route("/dist/<path:path>")
|
||||||
|
def dist(path):
|
||||||
|
return send_from_directory("dist", path)
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.secret_key = '00-wegrhr[gqw[er=1ew qwergfdq.///**+'
|
||||||
|
app.config['SESSION_TYPE'] = 'redis'
|
||||||
|
app.debug = True
|
||||||
|
app.run()
|
||||||
5509
package-lock.json
generated
Normal file
5509
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
package.json
Normal file
25
package.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "icytv",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Frontend builder",
|
||||||
|
"main": "index.js",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"watch": "webpack -w --mode=development --log-level=debug",
|
||||||
|
"build": "webpack -p"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"bootstrap": "^4.1.3",
|
||||||
|
"css-loader": "^1.0.0",
|
||||||
|
"file-loader": "^1.1.11",
|
||||||
|
"font-awesome": "^4.7.0",
|
||||||
|
"hls.js": "^0.10.1",
|
||||||
|
"jquery": "^3.3.1",
|
||||||
|
"popper.js": "^1.14.4",
|
||||||
|
"style-loader": "^0.21.0",
|
||||||
|
"url-loader": "^1.0.1",
|
||||||
|
"webpack": "^4.16.4",
|
||||||
|
"webpack-command": "^0.4.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
93
src/css/dashboard.css
Normal file
93
src/css/dashboard.css
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
body {
|
||||||
|
font-size: .875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sidebar
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100; /* Behind the navbar */
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-sticky {
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 48px; /* Height of navbar */
|
||||||
|
height: calc(100vh - 48px);
|
||||||
|
padding-top: .5rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .nav-link {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .nav-link .feather {
|
||||||
|
margin-right: 4px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .nav-link.active {
|
||||||
|
color: #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .nav-link:hover .feather,
|
||||||
|
.sidebar .nav-link.active .feather {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-heading {
|
||||||
|
font-size: .75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Navbar
|
||||||
|
*/
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
padding-top: .75rem;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
background-color: rgba(0, 0, 0, .25);
|
||||||
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .form-control {
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
border-width: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-dark {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(255, 255, 255, .1);
|
||||||
|
border-color: rgba(255, 255, 255, .1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-dark:focus {
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Utilities
|
||||||
|
*/
|
||||||
|
|
||||||
|
.border-top { border-top: 1px solid #e5e5e5; }
|
||||||
|
.border-bottom { border-bottom: 1px solid #e5e5e5; }
|
||||||
110
src/css/index.css
Normal file
110
src/css/index.css
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
/*
|
||||||
|
* Globals
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a,
|
||||||
|
a:focus,
|
||||||
|
a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom default button */
|
||||||
|
.btn-secondary,
|
||||||
|
.btn-secondary:hover,
|
||||||
|
.btn-secondary:focus {
|
||||||
|
color: #333;
|
||||||
|
text-shadow: none; /* Prevent inheritance from `body` */
|
||||||
|
background-color: #fff;
|
||||||
|
border: .05rem solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Base structure
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #006289;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||||
|
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover-container {
|
||||||
|
max-width: 50em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Header
|
||||||
|
*/
|
||||||
|
.masthead {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead-brand {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-masthead .nav-link {
|
||||||
|
padding: .25rem 0;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(255, 255, 255, .5);
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom: .25rem solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-masthead .nav-link:hover,
|
||||||
|
.nav-masthead .nav-link:focus {
|
||||||
|
border-bottom-color: rgba(255, 255, 255, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-masthead .nav-link + .nav-link {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-masthead .active {
|
||||||
|
color: #fff;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
.masthead-brand {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.nav-masthead {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Cover
|
||||||
|
*/
|
||||||
|
.cover {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
.cover .btn-lg {
|
||||||
|
padding: .75rem 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Footer
|
||||||
|
*/
|
||||||
|
.mastfoot {
|
||||||
|
color: rgba(255, 255, 255, .5);
|
||||||
|
}
|
||||||
119
src/css/player.css
Normal file
119
src/css/player.css
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
body {
|
||||||
|
font-family: Helvetica;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.livecnt {
|
||||||
|
position: absolute;
|
||||||
|
background-color: black;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.videobox {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#stream {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.live {
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
font-size: 120%;
|
||||||
|
margin: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-color: #F44336;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.live.offline {
|
||||||
|
background-color: rgba(93, 93, 93, 0.7);
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transition: opacity .25s ease-in-out;
|
||||||
|
-moz-transition: opacity .25s ease-in-out;
|
||||||
|
-webkit-transition: opacity .25s ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.overlay.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
.controls {
|
||||||
|
background-color: rgba(0, 142, 255, 0.42);
|
||||||
|
border-top: 2px solid #006cc1;
|
||||||
|
color: white;
|
||||||
|
height: 45px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.controls .inline {
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.controls .ilbtn {
|
||||||
|
font-size: 200%;
|
||||||
|
width: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
#duration {
|
||||||
|
line-height: 2.4;
|
||||||
|
font-size: 110%;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.controls .right {
|
||||||
|
float: right;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.bigplaybtn {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 400%;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
margin: auto;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 1.2;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(3, 169, 244, 0.7);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 5px dotted #2196F3;
|
||||||
|
text-align: right;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.bigplaybtn .fa {
|
||||||
|
top: 6px;
|
||||||
|
position: relative;
|
||||||
|
left: 3px;
|
||||||
|
}
|
||||||
|
.bigplaybtn.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.seekview .seeker {
|
||||||
|
display: none;
|
||||||
|
width: 120px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #9be0ff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.seeker .seekbar {
|
||||||
|
background-color: #00b0ff;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
.seekview:hover > .seeker {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
20
src/dashboard.js
Normal file
20
src/dashboard.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
|
function dashboard () {
|
||||||
|
$.get("/dashboard/data", function (res) {
|
||||||
|
if (res.error) {
|
||||||
|
window.location.href = "/"
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var fullURL = window.location.origin + "/player/" + res.name
|
||||||
|
$('#myStream').attr('src', fullURL)
|
||||||
|
$('#stream_url').text(fullURL).attr("href", fullURL)
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#show_key').click(function () {
|
||||||
|
$('#show_key').html(window.STREAM_KEY)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {start: dashboard}
|
||||||
17
src/index.js
Normal file
17
src/index.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import 'bootstrap'
|
||||||
|
|
||||||
|
// Style
|
||||||
|
import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
|
||||||
|
import dash from './css/dashboard.css'
|
||||||
|
import index from './css/index.css'
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import dashboard from './dashboard.js'
|
||||||
|
|
||||||
|
bootstrap.ref()
|
||||||
|
if (window.STREAM_KEY) {
|
||||||
|
dash.ref()
|
||||||
|
dashboard.start()
|
||||||
|
} else {
|
||||||
|
index.ref()
|
||||||
|
}
|
||||||
248
src/player.js
Normal file
248
src/player.js
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
import css from './css/player.css'
|
||||||
|
import Hls from 'hls.js'
|
||||||
|
|
||||||
|
let player
|
||||||
|
let vid
|
||||||
|
let btn
|
||||||
|
let bigbtn
|
||||||
|
let overlay
|
||||||
|
let time
|
||||||
|
let fscrn
|
||||||
|
let mutebtn
|
||||||
|
let hideTimeout
|
||||||
|
let hls
|
||||||
|
let lstat
|
||||||
|
let opts
|
||||||
|
let volumebar
|
||||||
|
let retry
|
||||||
|
let vidReady = false
|
||||||
|
let shouldHide = true
|
||||||
|
let infscr = false
|
||||||
|
|
||||||
|
window.onload = function (argument) {
|
||||||
|
player = document.querySelector('.livecnt')
|
||||||
|
vid = player.querySelector('#stream')
|
||||||
|
overlay = player.querySelector('.overlay')
|
||||||
|
btn = overlay.querySelector('#playbtn')
|
||||||
|
time = overlay.querySelector('#duration')
|
||||||
|
fscrn = overlay.querySelector('#fullscrbtn')
|
||||||
|
mutebtn = overlay.querySelector('#mutebtn')
|
||||||
|
lstat = overlay.querySelector('.live')
|
||||||
|
opts = overlay.querySelector('.controls')
|
||||||
|
bigbtn = overlay.querySelector('.bigplaybtn')
|
||||||
|
volumebar = overlay.querySelector('#volume_seek')
|
||||||
|
|
||||||
|
player.addEventListener('mousemove', resetHide)
|
||||||
|
|
||||||
|
opts.addEventListener('mouseenter', () => {
|
||||||
|
shouldHide = false
|
||||||
|
})
|
||||||
|
|
||||||
|
opts.addEventListener('mouseleave', () => {
|
||||||
|
shouldHide = true
|
||||||
|
})
|
||||||
|
|
||||||
|
opts.addEventListener('mousemove', () => {
|
||||||
|
shouldHide = false
|
||||||
|
})
|
||||||
|
|
||||||
|
bigbtn.addEventListener('click', () => {
|
||||||
|
toggleStream()
|
||||||
|
})
|
||||||
|
|
||||||
|
volumebar.addEventListener('click', (e) => {
|
||||||
|
vid.volume = ((e.pageX - volumebar.offsetLeft) / volumebar.clientWidth)
|
||||||
|
updateVolume()
|
||||||
|
})
|
||||||
|
|
||||||
|
let mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel'
|
||||||
|
|
||||||
|
mutebtn.addEventListener(mousewheelevt, (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
let scrollAmnt = (e.wheelDelta == null ? e.detail * -40 : e.wheelDelta)
|
||||||
|
|
||||||
|
if (scrollAmnt < 0) {
|
||||||
|
vid.volume = clampAddition(-0.1)
|
||||||
|
} else {
|
||||||
|
vid.volume = clampAddition(0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
updateVolume()
|
||||||
|
}, false)
|
||||||
|
|
||||||
|
if (Hls.isSupported()) {
|
||||||
|
hls = new Hls()
|
||||||
|
hls.loadSource(STREAM_SERVER + STREAM_NAME + '.m3u8')
|
||||||
|
hls.attachMedia(vid)
|
||||||
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||||
|
vidReady = true
|
||||||
|
liveStatus(true)
|
||||||
|
})
|
||||||
|
hls.on(Hls.Events.ERROR, (e) => {
|
||||||
|
vidReady = false
|
||||||
|
liveStatus(false)
|
||||||
|
|
||||||
|
if (!vid.paused) {
|
||||||
|
toggleStream()
|
||||||
|
resetHide()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('Your browser does not support HLS streaming!')
|
||||||
|
}
|
||||||
|
|
||||||
|
playbtn.addEventListener('click', toggleStream)
|
||||||
|
mutebtn.addEventListener('click', toggleSound)
|
||||||
|
fscrn.addEventListener('click', toggleFullscreen)
|
||||||
|
|
||||||
|
document.addEventListener('webkitfullscreenchange', exitHandler, false)
|
||||||
|
document.addEventListener('mozfullscreenchange', exitHandler, false)
|
||||||
|
document.addEventListener('fullscreenchange', exitHandler, false)
|
||||||
|
document.addEventListener('MSFullscreenChange', exitHandler, false)
|
||||||
|
|
||||||
|
vid.addEventListener('timeupdate', updateTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
function clampAddition (val) {
|
||||||
|
let volume = vid.volume
|
||||||
|
|
||||||
|
if (volume + val > 1) {
|
||||||
|
volume = 1
|
||||||
|
} else if (volume + val < 0) {
|
||||||
|
volume = 0
|
||||||
|
} else {
|
||||||
|
volume += val
|
||||||
|
}
|
||||||
|
|
||||||
|
return volume.toFixed(2)
|
||||||
|
}
|
||||||
|
|
||||||
|
function showBigBtn (show) {
|
||||||
|
if (show) {
|
||||||
|
bigbtn.className = 'bigplaybtn'
|
||||||
|
} else {
|
||||||
|
bigbtn.className = 'bigplaybtn hidden'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVolume () {
|
||||||
|
let inner = volumebar.querySelector('.seekbar')
|
||||||
|
inner.style.width = vid.volume * 100 + '%'
|
||||||
|
}
|
||||||
|
|
||||||
|
function liveStatus (status) {
|
||||||
|
if (status) {
|
||||||
|
lstat.innerHTML = 'live now'
|
||||||
|
lstat.className = 'live'
|
||||||
|
clearTimeout(retry)
|
||||||
|
if (vid.paused) {
|
||||||
|
showBigBtn(true)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
lstat.innerHTML = 'offline'
|
||||||
|
lstat.className = 'live offline'
|
||||||
|
retry = setTimeout(() => {
|
||||||
|
if (vidReady) return
|
||||||
|
hls.loadSource(readFromURI())
|
||||||
|
}, 10000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide () {
|
||||||
|
if (vid.paused || !shouldHide) {
|
||||||
|
overlay.className = 'overlay'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
overlay.className = 'overlay hidden'
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetHide () {
|
||||||
|
overlay.className = 'overlay'
|
||||||
|
clearTimeout(hideTimeout)
|
||||||
|
|
||||||
|
if (vid.paused) return
|
||||||
|
if (!shouldHide) return
|
||||||
|
|
||||||
|
hideTimeout = setTimeout(() => {
|
||||||
|
hide()
|
||||||
|
}, 5000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTime () {
|
||||||
|
let minutes = Math.floor(vid.currentTime / 60)
|
||||||
|
let seconds = Math.floor(vid.currentTime - minutes * 60)
|
||||||
|
time.innerHTML = minutes + ':' + (seconds < 10 ? '0' + seconds : seconds)
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleStream () {
|
||||||
|
if (!vid) return
|
||||||
|
if (!vidReady) return
|
||||||
|
if (vid.paused) {
|
||||||
|
vid.play()
|
||||||
|
btn.innerHTML = '<i class="fa fa-pause fa-fw"></i>'
|
||||||
|
showBigBtn(false)
|
||||||
|
} else {
|
||||||
|
vid.pause()
|
||||||
|
btn.innerHTML = '<i class="fa fa-play fa-fw"></i>'
|
||||||
|
showBigBtn(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSound () {
|
||||||
|
let muteicon = mutebtn.querySelector('.fa')
|
||||||
|
if (vid.muted) {
|
||||||
|
vid.muted = false
|
||||||
|
muteicon.className = 'fa fa-volume-up fa-fw'
|
||||||
|
} else {
|
||||||
|
vid.muted = true
|
||||||
|
muteicon.className = 'fa fa-volume-off fa-fw'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function exitHandler () {
|
||||||
|
if (!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen)) {
|
||||||
|
infscr = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (infscr) {
|
||||||
|
fscrn.innerHTML = '<i class="fa fa-compress fa-fw"></i>'
|
||||||
|
} else {
|
||||||
|
fscrn.innerHTML = '<i class="fa fa-expand fa-fw"></i>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFullscreen () {
|
||||||
|
if (vid.enterFullscreen) {
|
||||||
|
if (!document.fullScreen) {
|
||||||
|
player.requestFullScreen()
|
||||||
|
infscr = true
|
||||||
|
} else {
|
||||||
|
document.cancelFullScreen()
|
||||||
|
}
|
||||||
|
} else if (vid.webkitEnterFullscreen) {
|
||||||
|
if (!document.webkitIsFullScreen) {
|
||||||
|
player.webkitRequestFullScreen()
|
||||||
|
infscr = true
|
||||||
|
} else {
|
||||||
|
document.webkitCancelFullScreen()
|
||||||
|
}
|
||||||
|
} else if (vid.mozRequestFullScreen) {
|
||||||
|
if (!document.mozFullScreen) {
|
||||||
|
player.mozRequestFullScreen()
|
||||||
|
infscr = true
|
||||||
|
} else {
|
||||||
|
document.mozCancelFullScreen()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('Your browser doesn\'t support fullscreen!')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onblur = () => {
|
||||||
|
shouldHide = true
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onfocus = () => {
|
||||||
|
shouldHide = true
|
||||||
|
}
|
||||||
75
templates/dashboard.html
Normal file
75
templates/dashboard.html
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.STREAM_KEY = "{{ stream }}"
|
||||||
|
</script>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>IcyTV Dashboard</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
|
||||||
|
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">IcyTV</a>
|
||||||
|
<ul class="navbar-nav px-3">
|
||||||
|
<li class="nav-item text-nowrap">
|
||||||
|
<a class="nav-link" href="/logout">Sign out</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
|
||||||
|
<div class="sidebar-sticky">
|
||||||
|
<ul class="nav flex-column">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" href="#">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
||||||
|
Dashboard <span class="sr-only">(current)</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
|
||||||
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
|
||||||
|
<h1 class="h2">Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<iframe allowfullscreen src="" id="myStream" width="1542" height="651" style="display: block; width: 1542px; height: 651px;"></iframe>
|
||||||
|
<h1 class="h2">Information</h1>
|
||||||
|
<p class="lead">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<label>Stream Server</label>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<span>{{ server }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<label>Stream Key</label>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#" id="show_key">Show Stream Key</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<label>Stream Link</label>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="" id="stream_url"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="/dist/main.bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
44
templates/index.html
Normal file
44
templates/index.html
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>IcyTV Private Livestreaming Server</title>
|
||||||
|
</head>
|
||||||
|
<body class="text-center">
|
||||||
|
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
|
||||||
|
<header class="masthead mb-auto">
|
||||||
|
<div class="inner">
|
||||||
|
<h3 class="masthead-brand">IcyTV</h3>
|
||||||
|
<nav class="nav nav-masthead justify-content-center">
|
||||||
|
<a class="nav-link active" href="/">Home</a>
|
||||||
|
{% if session.uuid %}
|
||||||
|
<a class="nav-link" href="/logout">{{ session.username }}</a>
|
||||||
|
{% else %}
|
||||||
|
<a class="nav-link" href="/login">Login</a>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main role="main" class="inner cover">
|
||||||
|
<h1 class="cover-heading">IcyTV</h1>
|
||||||
|
<p class="lead">This is a private livestreaming server for Icy Network members.</p>
|
||||||
|
{% if streamer %}
|
||||||
|
<p class="lead">Welcome back, {{ session.username }}!</p>
|
||||||
|
<p class="lead">
|
||||||
|
<a href="/dashboard" class="btn btn-lg btn-secondary">My Dashboard</a>
|
||||||
|
</p>
|
||||||
|
{% else %}
|
||||||
|
<p class="lead">Email me at <code>evert(at)lunasqu.ee</code> if you're interested.</p>
|
||||||
|
{% endif %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="mastfoot mt-auto">
|
||||||
|
<div class="inner">
|
||||||
|
<p>Copyleft © 2018 - <a href="https://icynet.eu/" target="_blank">Icy Network</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script src="/dist/main.bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
templates/player.html
Normal file
35
templates/player.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>IcyTV - {{ name }}</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<script type="text/javascript">
|
||||||
|
const STREAM_SERVER = "{{ server }}"
|
||||||
|
const STREAM_NAME = "{{ name }}"
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="livecnt">
|
||||||
|
<div class="videobox">
|
||||||
|
<video id="stream"></video>
|
||||||
|
</div>
|
||||||
|
<div class="overlay">
|
||||||
|
<div class="live offline">offline</div>
|
||||||
|
<div class="bigplaybtn hidden"><i class="fa fa-play fa-fw"></i></div>
|
||||||
|
<div class="controls">
|
||||||
|
<div id="playbtn" class="inline ilbtn"><i class="fa fa-play fa-fw"></i></div>
|
||||||
|
<span class="seekview">
|
||||||
|
<div id="mutebtn" class="inline ilbtn"><i class="fa fa-volume-up fa-fw"></i></div>
|
||||||
|
<div class="seeker" id="volume_seek">
|
||||||
|
<div class="seekbar" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<div id="duration">0:00</div>
|
||||||
|
<div id="fullscrbtn" class="right ilbtn"><i class="fa fa-expand fa-fw"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="/dist/player.bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
webpack.config.js
Normal file
25
webpack.config.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: {
|
||||||
|
main: './src/index.js',
|
||||||
|
player: './src/player.js'
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: '[name].bundle.js'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
{ loader: "style-loader/useable" },
|
||||||
|
{ loader: "css-loader" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
|
||||||
|
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user