Rado's blog

Извадих основните компоненти като класове в отделен .css file.
Така изглежда css-a във Flex :

1
2
3
4
5

  .volumeSlider
    {
    	show-track-highlight: true;
    	thumb-skin: Embed("assets/search-32.png");
    }

Нужно е само да си свалите арихивираният проек и да го отворите във Flex (file->Import->Flex project-> посочвате пътя за архива).
В главната директория ще намерите all_styles.css.
Също така може да променяте и външния вид през Design View.
Връзки :
Линк за сваляне(архив)
Линк за сваляне(swf)
Главна публикация

Добавих и възможността за търсене ( тип winamp ).
Demo
Натискате лупичката на player-a и пишете желаното име, а пускането на песента става чрез Enter или double click.
В скоро време ще изведа всичко, което може да се променя по player-a в отделни променливи и отделен .css файл и отделен XML, за да е възможно най-удобен за ползване.
Връзки :
Сваляне на архив (project archive)
Сваляне на .swf
Публикацията за mp3-то
Поздрави, Радо.

В предната статия публикувах демо на CMS, може да я погледнете.
За сега е задължително да имате Adobe Flex Builder. Може да си изтеглтие trial версия от Adobe
Сваляте си Flex archive project и го отваряте през Flex .
Става по следния начин : File -> Import -> Flex Project и избирате пътя до архива. .
Ако ви зареди успешно, всичко е ОК и може да си настроите проекта.
Отворете главния mxml файл и ще видите следните линии код :

1
2
3
4
5
6
7
8

 private var autoUpdate:Boolean = true;
 private var updateSecurityCode:String  = "test";
 private var deleteSecurityCode:String = "test";	
 private var xmlLocation:String = "../data/playlist.xml";
 private var uploadingPHPFile:String = "../upload.php";
[Bindable] private var XMLUpdatePHP:String = "../update_xml.php";
[Bindable] private var serverDeletePHP:String= "../serverDelete.php";
 private var maxUploadSize:int = 5 * 1048576; //change the 1 digit number ( 5 in this case ) only.

Първите два update и security трябва да съвпадат със съотвните в PHP файловете, които са по-долу.
В следващите няколко реда, трябва да зададете точните пътища на съответните файлове спрямо изходния .swf .

Следващата важна стъпка е да смените паролата, която се изисква при влизането.
Файлът, който трябва да имате е pass_check.php (пътят до него може да зададете в LoginScreen.mxml в httpService component-a под url.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php 
if("POST" === $_SERVER["REQUEST_METHOD"])
{
$password = "test"; // променете този string.
$inputPassword = $_POST['pss'];
if($password != $inputPassword)
	{
		echo "fail";
	}
	else echo "ok";
}
else echo "You dont have permission";
 
?>

Промяната на паролата и на security кодовете е препоръчителна.
След като сте променили всичко, остава да направите следното :
file -> export -> release build.
Отивате в папката bin-release и там имате всички нужни файлове , които трябва да поместите на вашия сървър.
Сега PHP файловете (препоръчително е да си направите още някаква защита пригодена за вашия сайт) :
upload.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php 
if("POST" === $_SERVER["REQUEST_METHOD"])
{
	if ($_FILES["Filedata"]["error"] > 0)
	{
		echo "Return Code: " . $_FILES["Filedata"]["error"] . "<br />";
	}
	else
	{
		if(move_uploaded_file($_FILES["Filedata"]["tmp_name"], "mp3/" . $_FILES["Filedata"]["name"]))
		{
			echo "mp3/" . $_FILES["Filedata"]["name"];
		}
		else
		{
			echo "failure";
		}
	}
 
 
}
else
{
	echo "You dont have permission" . '<meta http-equiv="refresh" content="1;http://www.youtube.com" />';
}
?>

update_xml.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php
if("POST" === $_SERVER["REQUEST_METHOD"])
{
	//check if the file is being sent from the flex application
	//otherwise do nothing
	$security = $_POST['security'];
	if($security == 'test')
	{
		echo "Security code passed ... \n ";
		$data = '<?xml version="1.0" encoding="UTF-8" ?>';
		$data . "\r\n";
		$data .= '<songs>' . "\r\n";
		$data .= $_POST['xmlData'];
		$data . "\r\n";
		$data .= '</songs>';
		file_put_contents('data/playlist.xml',$data);
		echo "XML Saved";
	}
	else
	{
	echo "Wtf are you trying to do ?";
	}
}
else
{
echo "You dont have permission" . '<meta http-equiv="refresh" content="1;http://rado-dev.com" />';
}
?>

serverDelete.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
 if("POST" === $_SERVER["REQUEST_METHOD"])
{
	if($_POST['security'] == 'test')
	{ 
		$song = $_POST['songurl'];
		$path = "mp3/";
 
		unlink($path . basename($song)) or die ($path . $song);
	}
	else
	{
		echo "You really dont have permission";
	}
}
else echo "You dont have permission" . '<meta http-equiv="refresh" content="1;http://www.youtube.com" />';
?>

Това е всичко.Надявам се CMS-a да ви влезе в полза.
За въпроси -> пишете в коментарите.

Забранил съм опцията за триене на файлове и конфигуриране.
Може да качвате файлове до 5 мб. ( само песни ) .
Ако трафикът вземе да се качва много, ще го спра от ползване.
В много скоро време ще го пусна за теглене и ще обясня как да го настроите да бачка със вашия Mp3 Player.
CMS
Паролата е test
Начин на ползване:
Бутонът browse е ясен -> избирате си песен от локалния ви твърд диск.
След това въвеждате име на песента , изпълнител , и албум ( сложете n/a ако не знаете албума ) .
Бутонът upload е вашият нов приятел -> натискате го и песента ще започне качване.
Като се качи песента, всичко ще се обнови автоматично и ще трябва да рефрешнете MP3-то ( при IE да отворите нов таб или да си изчистите кеша ), за да видите новата качена песен.
Move Up и Move Down бутоните са ясни.Марките песен и я местите нагоре и надолу.
След като изберете къде да бъде преместена -> натиснете бутона Обнови
Edit ще ви изкара прозорче, в което може да промените параметрите на XML файлът за посочената песен. Натиснете done (прозорецът не се затваря) и след това Обнови , ако сте готови.
Това е всичко, което ви е нужно.
Успешно качване !
При наличие на бъгове или някакви дупки в системата -> моля коментирайте тук или в темата в Web-Tourist .
Очаквайте в скоро време целият код и обяснения, както и подобрения.

!! update 1 !!
Първото нещо, което ще пусна е един Web MP3 Player за вашите нужди.
За да видите какво предсавлява – демо

Самото панелче ( Player-a ) може да бъде вградено във всеки един WebSite чрез няколко реда JavaScript (  пример за вграждане по-надолу ).

MP3 Player-a съдържа :

1. Нормалните неща за един Player.
2. Playlist.
3. Съдържа lyrics прозорец, който показва ( ако намери ) текста на дадената песен ( скрипта по-долу ).
4. Песните се зареждат динамично от външен XML файл.
5. Ако тикнете „continue“ песните ви ще вървят една след друга.
6. Възможност за shuffle и repeat

Действа на принципа : зарежда песента и след това я пуска. ( има progress bar, когато дадена песен се зарежда ).

Компонентите :

data/playlist.xml
XML файлът задължително трябва да в е папка с име „data“, a папката да е в 1 ниво със .swf

<?xml version="1.0" encoding="UTF-8" ?>
<songs>
 <mp3>
   <title>Forever</title>
   <album>n/a</album>
   <artist>Papa Roach</artist>
   <songUrl>mp3/Papa roach - Forever.mp3</songUrl>
   <displayName>Papa Roach - Forever</displayName>
 </mp3>
  <mp3> ........ </mp3>
</songs>

lyrics_plugin.php
PHP файлът, който търси за текстовете на песните.Трябва да бъде в една директория със .swf
Скриптът не е оптимален и има още какво да се работи по него.

<?php
if("POST" === $_SERVER["REQUEST_METHOD"])
{
	$song = $_POST['song'];
	$artist = $_POST['artist'];
 
	$song = str_replace(' ', '%20', $song);
	$artist = str_replace(' ', '%20', $artist);
 
	$url = 'http://api.leoslyrics.com/api_search.php?auth=duane&artist='.$artist.'&songtitle='.$song;
	$res = file_get_contents($url);
 
		if($res)
		{
			$dom = new DOMDocument();
			$dom->preserveWhiteSpace = false;
			$dom->formatOutput   = true;
			$dom->loadXML($res);
		}
		else
		{
			exit();
		}
 
 
	$candidatename = $dom->getElementsByTagName('result')->item(0);
	$attribNode = $candidatename->getAttributeNode('hid');
 
 
 
	$lyricsurl =  'http://api.leoslyrics.com/api_lyrics.php?auth=duane&hid=' . $attribNode->value;
	$lyricsXML = file_get_contents($lyricsurl);
	$lyricsDOM = new DOMDocument();
	$lyricsDOM->loadXML($lyricsXML);
 
	$lyricsString =  $lyricsDOM->saveXML();
	$lyricsString = str_replace('&#13;', '', $lyricsString);
	echo $lyricsString; // vrushta XML na flex
	file_put_contents("lyrics.xml",$lyricsString);
 
}
else
{
	echo "You dont have permission" . '<meta http-equiv="refresh" content="1;http://rado-dev.com" />';
}
 
?>

Самият Flex проект ( за сега е версия с доста малко коментари по кода и лесно може да се загубите в него )
Може да променяте каквото искате по кода стига да работи след това.Може да променяте цветове и т.н. , за да го нагодите за нуждите ви. ( трябва да имате Flex Builder и да знаете поне малко как да го използвате, разбира се )
Линк за сваляне
Линк за сваляне на .swf

Инсталиране
Как да вградим това чудо в сайта си ? Много лесно !
Нужно ви е : swfobject
Трябва да имате папка data и playlist.xml форматиран по начина показан по-горе
Трябва да имате файлът lyrics_plugin.php във същата директория като .swf

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html" charset="windows-1251" />
	<script type="text/javascript" src="scripts/swfobject.js" > </script>
	<script type="text/javascript">
         swfobject.embedSWF("mp3Player.swf", "myContent", "330", "421", "9.0.0");
	</script>
 
  </head>
  <body>
    <div id="myContent">
	Нямате флаш ! ( това ще се изпише ако няма флаш плеяр )
	</div>
  </body>
</html>

Естествено има n+k други начина да го сложите в сайта си, но аз давам най-лесният според мен.
За въпросите и бъгове пишете в коментарите или на скайп rado_gg ( в представянето си напишете, че е относно mp3 player-a ).
Това е за сега !
Очаквайте и продължението –> CMS-а към този player, който е готов и функциониращ, но трябва да го допоизпипам, за да не стават злоупотреби.