Junior Spellweaver
- Joined
- Dec 28, 2011
- Messages
- 185
- Reaction score
- 59
Today I'm releasing my radio player that I coded from scratch inspired by Flat-UI and SVG.
This took me many weeks to make, I was going to keep it private but I've decided to share it with the retro community.
Features:
Tips:
- To change/add radio stations, go to rScript.php on line 556.
- To change which station displays first, go to rScript.php on line 24. (Index 0 would be the first station and so on.)
- You can change the notification image by going to rScript.php on line 554.
- You should already know css, (Located on clientradio.php)
Screenshots:
- Main:
- Volume on hover:
- Playlist:
- Notification:
Install Instructions:
1.) Extract contents anywhere you like.
2.) Go to client.css and change height to 95%
3.) Go to client.php and use php include to call the files.
3.1) Place the code listed below right above </head> and change the path.
3.2) Place the code listed below right below <div id="client"></div> and change the path.
Download:
Need Help? Skype: jacob.lucado
For anyone having trouble, here's a copy of my client.php and client.css
Client.php:
Client.css:
Want it to blend in with the client bar? Update the clientradio.php style with the following code.
Screen of new style of above code:
This took me many weeks to make, I was going to keep it private but I've decided to share it with the retro community.
Features:
- Option to delete a stream from the playlist page.
- Web Notification box on station change.
- SVG Icons (ex:Moving Visualizer)
- Radio resizes with window
- And others.
Tips:
- To change/add radio stations, go to rScript.php on line 556.
- To change which station displays first, go to rScript.php on line 24. (Index 0 would be the first station and so on.)
- You can change the notification image by going to rScript.php on line 554.
- You should already know css, (Located on clientradio.php)
Screenshots:
- Main:
You must be registered to see links
- Volume on hover:
You must be registered to see links
- Playlist:
You must be registered to see links
- Notification:
You must be registered to see links
Install Instructions:
1.) Extract contents anywhere you like.
2.) Go to client.css and change height to 95%
3.) Go to client.php and use php include to call the files.
3.1) Place the code listed below right above </head> and change the path.
PHP:
<?php include ('/rScript.php');?>
PHP:
<?php include ('/clientradio.php');?>Download:
You must be registered to see links
Need Help? Skype: jacob.lucado
For anyone having trouble, here's a copy of my client.php and client.css
Client.php:
Code:
<!DOCTYPE HTML><html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="{url}/app/tpl/skins/{skin}/styles/client.css?<?php echo time() ?>" type="text/css">
<script type="text/javascript" src="{url}/app/tpl/skins/{skin}/js/swfobject.js?<?php echo time() ?>"></script>
<script type="text/javascript">
var BaseUrl = "{url}/game";
var flashvars =
{
"client.starting" : "Welcome {username}, {hotelname} is loading!",
"client.allow.cross.domain" : "1",
"client.notify.cross.domain" : "0",
"connection.info.host" : "I.P",
"connection.info.port" : "PORT",
"site.url" : "{url}",
"url.prefix" : "{url}",
"client.reload.url" : "{url}/client",
"client.fatal.error.url" : "{url}/disconnected",
"client.connection.failed.url" : "{url}/disconnected",
"external.variables.txt" : "{url}/game/gamedata/external_variables.txt",
"external.texts.txt" : "{url}/game/gamedata/external_flash_texts.txt",
"productdata.load.url" : "{url}/game/gamedata/productdata.xml",
"furnidata.load.url" : "{url}/game/gamedata/furnidata.xml",
"use.sso.ticket" : "1",
"sso.ticket" : "{sso}",
"processlog.enabled" : "0",
"flash.client.url" : BaseUrl + "/",
"flash.client.origin" : "popup"
};
var params =
{
"base" : BaseUrl + "/",
"allowScriptAccess" : "always",
"menu" : "false"
};
swfobject.embedSWF(BaseUrl + "/SwitchLucado.swf", "client", "100%", "100%", "10.0.0", "{url}/game/expressInstall.swf", flashvars, params, null);
</script>
<?php include ('/rScript.php');?>
</head>
<body>
<link href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin" rel="stylesheet" type="text/css">
<script language="JavaScript"> window.moveTo(0, 0); window.resizeTo(screen.width, screen.height) </script>
<script>
setTimeout(function() { removeLoader(); }, 5000);
function removeLoader()
{
document.getElementById("loadingpage").style.height='0px';
document.getElementById("img1").style.height='0px';
document.getElementById("font1").style.height='0px';
document.getElementById("img2").style.height='0px';
}
</script>
<div id="loadingpage">
</div>
<div id="client"></div>
<?php include ('/clientradio.php');?>
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>
Code:
html, body.flashclient {
height: 95%;
background-color: black;
color: white;
}
body {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
background-color: black;
color: white;
}
#client {
width: 100%;
height: 100%;
}
#loadingpage {
background-color: black;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 100%;
height: 1000%;
background-color: black;
}
#load {
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.start-1 {
font-family: 'Oleo Script', Helvetica, sans-serif;
color: white;
font-size: 100px;
margin-top: 200px;
}
#img1 {
margin-top: 30%;
}
#img2 {
height: 40px;
margin-top: 20px;
}
#font1{
color: white;
font-size: 24px;
font-weight: bold;
font-family: Ubuntu;
}
Code:
*,
*:before,
*:after {
box-sizing: border-box;
}
.hide {
display: none!important;
}
button {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
.ap {
position: fluid;
right: 0;
bottom: 0;
left: 0;
height: 48px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
user-select: none;
color: #333;
background: #1C1C1A;
border-top: 1px solid #1C1C1A;
z-index: 9999;
-webkit-transition: all 30s ease-in-out;
-moz-transition: all 30s ease-in-out;
-o-transition: all 30s ease-in-out;
transition: all 1s ease-in-out;
}
.ap-inner {
max-width: 1440px;
margin: 0 auto;
}
.ap-panel {
display: flex;
}
.ap-item {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.ap--track {
flex: 1 40%;
padding: 0 20px;
}
.ap-info {
width: 100%;
position: relative;
align-self: flex-start;
padding: 5px 0 0;
}
.ap-title {
position: relative;
overflow: hidden;
padding-right: 80px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
color: white;
}
.ap-title:hover {
position: relative;
overflow: hidden;
padding-right: 80px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
color: red;
font-weight: bold;
}
.ap-time {
position: absolute;
top: 5px;
right: 0;
color: white;
}
.ap-time:hover {
position: absolute;
top: 5px;
right: 0;
color: red;
font-weight: bold;
}
.ap-progress-container {
padding: 5px 0 10px;
cursor: pointer;
}
.ap-progress {
position: relative;
height: 3px;
border-radius: 5px;
background: #eee;
}
.ap-preload-bar,
.ap-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
border-radius: 5px 0 0 5px;
background: rgba(0, 0, 0, .3);
z-index: 999;
}
.ap-bar {
background: red;
z-index: 9999;
}
.ap-bar:after {
position: absolute;
top: 0;
right: -5px;
width: 12px;
height: 12px;
margin-top: -4px;
content: '';
border-radius: 6px;
background: red;
opacity: 0;
transition: opacity .3s ease;
}
.ap-progress-container:hover .ap-bar:after {
opacity: 1;
}
.ap-controls {
position: relative;
z-index: 1000;
display: block;
height: 50px;
cursor: pointer;
transition: background .2s ease;
text-align: center;
color: #fff;
border: 0;
outline: 0;
background: none;
}
.ap-controls svg {
fill: #eee;
}
.ap-controls:hover svg {
fill: red;
}
.ap-controls:active {
background: rgba(0, 0, 0, 3);
}
.ap--playback>.ap-controls,
.ap--settings>.ap-controls {
flex: 0 25%;
}
.ap--pause,
.playing>.ap--play {
display: none;
}
.playing>.ap--pause {
display: inline;
}
.ap-volume-container {
z-index: 9999;
}
.ap-volume {
position: absolute;
right: 0;
bottom: 50px;
overflow: hidden;
width: 100%;
height: 0;
visibility: hidden;
transition: height .2s cubic-bezier(0.17, 0.72, 0.26, 1.23);
background: #1C1C1A;
opacity: 0.7;
border: 1px solid #1C1C1A;
border-bottom: 0;
z-index: 9999;
}
.ap-volume-btn {
display: block;
text-align: center;
width: 100%;
}
.ap-volume-btn>.ap--volume-off,
.muted>.ap--volume-on {
display: none;
}
.muted>.ap--volume-off {
display: inline;
}
.ap-volume-container:hover {
background: #696969;
}
.ap-volume-container:hover .ap-volume {
height: 120px;
visibility: visible;
}
.ap-volume-progress {
display: block;
width: 4px;
height: 100px;
margin: 10px auto;
background: rgba(0, 0, 0, .2);
position: relative;
border-radius: 3px;
}
.ap-volume-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: red;
height: 50%;
border-radius: 3px;
}
.ap-active {
background: rgba(0, 0, 0, .15);
opacity: 1;
}
@[I][B][URL="https://forum.ragezone.com/members/363813.html"]KEY[/URL][/B][/I]frames blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.playing>.ap--pause {
animation: blink 1.9s linear infinite;
}
@[I][B][URL="https://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I](max-width:880px) {
.ap-item > .ap-controls {
flex: 1;
}
}
@[I][B][URL="https://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I](max-width:550px) {
.ap {
min-width: 250px;
}
.ap,
.ap-panel {
height: auto;
}
.ap-panel {
flex-wrap: wrap;
}
.ap--track {
margin-bottom: 10px;
padding: 0 20px;
order: 1;
flex: 1 1 100%;
}
.ap--playback,
.ap--settings {
flex: 1 1 50%;
order: 2;
}
}
/*--------------------
PlayList
--------------------*/
.pl-container {
position: fixed;
top: 0;
right: 0;
bottom: 50px;
left: 0;
margin: auto;
overflow: auto;
font-family: Arial, sans-serif;
font-size: 14px;
background: #000;
opacity: 0.7;
z-index: 999;
}
.pl-lead {
font-size: 24px;
font-weight: 400;
text-align: center;
color: #333;
}
.pl-list {
width: 100%;
max-width: 550px;
margin: 0 auto;
padding: 30px 10px;
}
.pl-list > li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.pl-number,
.pl-title,
.pl-remove {
margin: 0 5px;
padding: 10px 0;
}
.pl-number {
flex: 0 10%;
text-align: center;
}
.pl-playing {
display: none;
fill: rgb(255, 250, 250);
}
.pl-current .pl-count {
display: none;
}
.pl-current .pl-playing {
display: block;
}
.pl-current .pl-title {
font-weight: 700;
}
.pl-title {
overflow: hidden;
cursor: pointer;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
}
.pl-title:hover {
text-decoration: underline;
font-weight: bold;
font-style: italic;
color: red;
}
.pl-remove {
opacity: 0;
margin-right: 0;
cursor: pointer;
text-align: center;
flex: 0 50px;
}
.pl-remove:hover {
background: red;
}
.pl-list > li:hover .pl-remove {
opacity: 1;
}
.pl-list svg {
fill: rgb(255, 250, 250);
}
.pl-empty {
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
letter-spacing: 2px;
color: #ccc;
}
@[I][B][URL="https://forum.ragezone.com/members/363813.html"]KEY[/URL][/B][/I]frames eq {
0% {
height: 3px;
}
50% {
height: 20px;
}
100% {
height: 3px;
}
}
.eq {
display: flex;
width: 20px;
height: 20px;
margin: 0 auto;
justify-content: space-between;
align-items: flex-end;
}
.eq-bar {
width: 4px;
background: rgb(255, 250, 250);
}
.eq-bar:nth-child(1) {
animation: eq .8s ease-in-out infinite 0s;
}
.eq-bar:nth-child(2) {
animation: eq .8s ease-in-out infinite .2s;
}
.eq-bar:nth-child(3) {
animation: eq .8s ease-in-out infinite .4s;
}Screen of new style of above code:
You must be registered to see links
Like it? Like the post. 
Last edited:
?
