Simple mp3 player

dev/Common/Audio.js

@@ -0,0 +1,110 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		window = require('window'),
+		$ = require('$'),
+
+		Globals = require('Common/Globals'),
+		Utils = require('Common/Utils'),
+		Links = require('Common/Links'),
+		Events = require('Common/Events')
+	;
+
+	/**
+	 * @constructor
+	 */
+	function Audio()
+	{
+		var self = this;
+
+		this.obj = window.Audio ? new window.Audio() : null;
+		this.objForNotification = window.Audio ? new window.Audio() : null;
+
+		this.supported = !Globals.bMobileDevice &&
+			this.obj && this.obj.canPlayType && this.obj.play &&
+			'' !== this.obj.canPlayType('audio/mpeg;');
+
+		if (this.obj && this.supported)
+		{
+			this.obj.preload = 'none';
+			this.obj.loop = false;
+			this.obj.autoplay = false;
+			this.obj.muted = false;
+
+			this.objForNotification.preload = 'none';
+			this.objForNotification.loop = false;
+			this.objForNotification.autoplay = false;
+			this.objForNotification.muted = false;
+			this.objForNotification.src = Links.sound('new-mail.mp3');
+
+			$(this.obj).on('ended', function () {
+				self.stop();
+			});
+
+			Events.sub('audio.api.stop', function () {
+				self.stop();
+			});
+
+			Events.sub('audio.api.play', function (sUrl, sName) {
+				self.playMp3(sUrl, sName);
+			});
+		}
+	}
+
+	Audio.prototype.obj = null;
+	Audio.prototype.objForNotification = null;
+	Audio.prototype.supported = false;
+
+	Audio.prototype.paused = function ()
+	{
+		return this.supported ? !!this.obj.paused : true;
+	};
+
+	Audio.prototype.stop = function ()
+	{
+		if (this.supported && this.obj.pause)
+		{
+			this.obj.pause();
+		}
+
+		Events.pub('audio.stop');
+	};
+
+	Audio.prototype.pause = Audio.prototype.stop;
+
+	Audio.prototype.playMp3 = function (sUrl, sName)
+	{
+		if (this.supported && this.obj.play)
+		{
+			this.obj.src = sUrl;
+			this.obj.play();
+
+			sName = Utils.isUnd(sName) ? '' : Utils.trim(sName);
+			if ('.mp3' === sName.toLowerCase().substr(-4))
+			{
+				sName = Utils.trim(sName.substr(0, sName.length - 4));
+			}
+
+			if ('' === sName)
+			{
+				sName = 'audio';
+			}
+
+			Events.pub('audio.start', [sName]);
+		}
+	};
+
+	Audio.prototype.playNotification = function ()
+	{
+		if (this.supported && this.objForNotification.play)
+		{
+			this.objForNotification.play();
+		}
+	};
+
+	module.exports = new Audio();
+
+}());

dev/External/Opentip.js

@@ -10,10 +10,10 @@
 
 	Opentip.styles.rainloop = {
 		'extends': 'standard',
-		'group': 'rainloopTips',
 		'fixed': true,
 		'target': true,
 
+		'showOn': 'mouseover click',
 		'removeElementsOnHide': true,
 
 		'background': '#fff',
@@ -26,12 +26,14 @@
 
 	Opentip.styles.rainloopTip = {
 		'extends': 'rainloop',
+		'stemLength': 3,
+		'stemBase': 5,
 		'group': 'rainloopTips'
 	};
 
-	Opentip.styles.rainloopTestTip = {
+	Opentip.styles.rainloopErrorTip = {
 		'extends': 'rainloop',
-		'className': 'rainloopTestTip'
+		'className': 'rainloopErrorTip'
 	};
 
 	module.exports = Opentip;

dev/External/ko.js

@@ -68,51 +68,42 @@
 			if (!Globals.bMobileDevice || bMobile)
 			{
 				bi18n = 'on' === ($oEl.data('tooltip-i18n') || 'on');
-				sValue = bi18n ? ko.unwrap(fValueAccessor()) : fValueAccessor()();
+				sValue = ko.unwrap(fValueAccessor());
 
-				if (sValue)
+				oElement.__opentip = new Opentip(oElement, {
+					'style': 'rainloopTip',
+					'element': oElement,
+					'tipJoint': $oEl.data('tooltip-join') || 'bottom'
+				});
+
+				Globals.dropdownVisibility.subscribe(function (bV) {
+					if (bV) {
+						oElement.__opentip.deactivate();
+					} else {
+						oElement.__opentip.activate();
+					}
+				});
+
+				if (bi18n)
 				{
-					oElement.__opentip = new Opentip(oElement, {
-						'style': 'rainloopTip',
-						'showOn': 'mouseover click',
-						'element': oElement,
-						'tipJoint': $oEl.data('tooltip-join') || 'bottom'
+					Translator = require('Common/Translator');
+
+					oElement.__opentip.setContent(Translator.i18n(sValue));
+
+					Translator.trigger.subscribe(function () {
+						oElement.__opentip.setContent(Translator.i18n(sValue));
 					});
 
-					oElement.__opentip.setContent(
-						bi18n ? require('Common/Translator').i18n(sValue) : sValue);
-
-					Globals.dropdownVisibility.subscribe(function (bV) {
-						if (bV) {
-							oElement.__opentip.deactivate();
-						} else {
-							oElement.__opentip.activate();
+					Globals.dropdownVisibility.subscribe(function () {
+						if (oElement && oElement.__opentip)
+						{
+							oElement.__opentip.setContent(require('Common/Translator').i18n(sValue));
 						}
 					});
-
-					if (bi18n)
-					{
-						Translator = require('Common/Translator');
-
-						oElement.__opentip.setContent(Translator.i18n(sValue));
-
-						Translator.trigger.subscribe(function () {
-							oElement.__opentip.setContent(Translator.i18n(sValue));
-						});
-
-						Globals.dropdownVisibility.subscribe(function () {
-							if (oElement && oElement.__opentip)
-							{
-								oElement.__opentip.setContent(require('Common/Translator').i18n(sValue));
-							}
-						});
-					}
-					else
-					{
-						oElement.__opentip.setContent(sValue);
-					}
-
-					fDisposalTooltipHelper(oElement);
+				}
+				else
+				{
+					oElement.__opentip.setContent(sValue);
 				}
 			}
 		},
@@ -129,31 +120,31 @@
 			if ((!Globals.bMobileDevice || bMobile) && oElement.__opentip)
 			{
 				bi18n = 'on' === ($oEl.data('tooltip-i18n') || 'on');
-				sValue = bi18n ? ko.unwrap(fValueAccessor()) : fValueAccessor()();
+				sValue = ko.unwrap(fValueAccessor());
 
 				if (sValue)
 				{
-					oElement.__opentip.activate();
 					oElement.__opentip.setContent(
 						bi18n ? require('Common/Translator').i18n(sValue) : sValue);
+					oElement.__opentip.activate();
 				}
 				else
 				{
-					oElement.__opentip.setContent('');
+					oElement.__opentip.hide();
 					oElement.__opentip.deactivate();
+					oElement.__opentip.setContent('');
 				}
 			}
 		}
 	};
 
-	ko.bindingHandlers.tooltipForTest = {
+	ko.bindingHandlers.tooltipErrorTip = {
 		'init': function (oElement) {
 
 			var $oEl = $(oElement);
 
 			oElement.__opentip = new Opentip(oElement, {
-				'style': 'rainloopTestTip',
-				'showOn': 'mouseover click',
+				'style': 'rainloopErrorTip',
 				'hideOn': 'mouseout click',
 				'element': oElement,
 				'tipJoint': $oEl.data('tooltip-join') || 'top'
@@ -183,23 +174,23 @@
 				if ('' === sValue)
 				{
 					oOpenTips.hide();
-					oOpenTips.setContent('');
 					oOpenTips.deactivate();
+					oOpenTips.setContent('');
 				}
 				else
 				{
 					_.delay(function () {
 						if ($oEl.is(':visible'))
 						{
-							oOpenTips.activate();
 							oOpenTips.setContent(sValue);
+							oOpenTips.activate();
 							oOpenTips.show();
 						}
 						else
 						{
 							oOpenTips.hide();
-							oOpenTips.setContent('');
 							oOpenTips.deactivate();
+							oOpenTips.setContent('');
 						}
 					}, 100);
 				}

dev/Model/Attachment.js

@@ -10,6 +10,7 @@
 		Globals = require('Common/Globals'),
 		Utils = require('Common/Utils'),
 		Links = require('Common/Links'),
+		Audio = require('Common/Audio'),
 
 		AbstractModel = require('Knoin/AbstractModel')
 	;
@@ -109,6 +110,14 @@
 		);
 	};
 
+	/**
+	 * @return {boolean}
+	 */
+	AttachmentModel.prototype.isMp3 = function ()
+	{
+		return Audio.supported && '.mp3' === this.fileName.toLowerCase().substr(-4);
+	};
+
 	/**
 	 * @return {boolean}
 	 */
@@ -151,6 +160,14 @@
 		return this.isImage() || this.isPdf() || this.isText() || this.isFramed();
 	};
 
+	/**
+	 * @return {boolean}
+	 */
+	AttachmentModel.prototype.hasPreplay = function ()
+	{
+		return this.isMp3();
+	};
+
 	/**
 	 * @return {string}
 	 */
@@ -223,14 +240,6 @@
 		return sResult;
 	};
 
-	/**
-	 * @return {boolean}
-	 */
-	AttachmentModel.prototype.hasPreview = function ()
-	{
-		return this.isImage() || this.isPdf() || this.isText() || this.isFramed();
-	};
-
 	/**
 	 * @return {string}
 	 */

dev/Settings/Admin/Branding.js

@@ -68,18 +68,16 @@
 
 	BrandingAdminSettings.prototype.onBuild = function ()
 	{
-		if (this.capa)
-		{
-			var
-				self = this,
-				Remote = require('Remote/Admin/Ajax')
-			;
+		var
+			self = this,
+			Remote = require('Remote/Admin/Ajax')
+		;
 
+		if (this.capa())
+		{
 			_.delay(function () {
 
 				var
-					f1 = Utils.settingsSaveHelperSimpleFunction(self.title.trigger, self),
-					f2 = Utils.settingsSaveHelperSimpleFunction(self.loadingDesc.trigger, self),
 					f3 = Utils.settingsSaveHelperSimpleFunction(self.loginLogo.trigger, self),
 					f4 = Utils.settingsSaveHelperSimpleFunction(self.loginDescription.trigger, self),
 					f5 = Utils.settingsSaveHelperSimpleFunction(self.loginCss.trigger, self),
@@ -90,18 +88,6 @@
 					f10 = Utils.settingsSaveHelperSimpleFunction(self.welcomePageDisplay.trigger, self)
 				;
 
-				self.title.subscribe(function (sValue) {
-					Remote.saveAdminConfig(f1, {
-						'Title': Utils.trim(sValue)
-					});
-				});
-
-				self.loadingDesc.subscribe(function (sValue) {
-					Remote.saveAdminConfig(f2, {
-						'LoadingDescription': Utils.trim(sValue)
-					});
-				});
-
 				self.loginLogo.subscribe(function (sValue) {
 					Remote.saveAdminConfig(f3, {
 						'LoginLogo': Utils.trim(sValue)
@@ -158,6 +144,29 @@
 
 			}, 50);
 		}
+		else
+		{
+			_.delay(function () {
+
+				var
+					f1 = Utils.settingsSaveHelperSimpleFunction(self.title.trigger, self),
+					f2 = Utils.settingsSaveHelperSimpleFunction(self.loadingDesc.trigger, self)
+				;
+
+				self.title.subscribe(function (sValue) {
+					Remote.saveAdminConfig(f1, {
+						'Title': Utils.trim(sValue)
+					});
+				});
+
+				self.loadingDesc.subscribe(function (sValue) {
+					Remote.saveAdminConfig(f2, {
+						'LoadingDescription': Utils.trim(sValue)
+					});
+				});
+
+			}, 50);
+		}
 	};
 
 	module.exports = BrandingAdminSettings;

dev/Stores/User/App.js

@@ -21,6 +21,8 @@
 	{
 		AppStore.call(this);
 
+		this.currentAudio = ko.observable('');
+
 		this.focusedState = ko.observable(Enums.Focused.None);
 
 		this.focusedState.subscribe(function (mValue) {

dev/Stores/User/Notification.js

@@ -6,10 +6,9 @@
 	var
 		window = require('window'),
 		ko = require('ko'),
-		buzz = require('buzz'),
 
 		Enums = require('Common/Enums'),
-		Links = require('Common/Links'),
+		Audio = require('Common/Audio'),
 
 		Settings = require('Storage/Settings')
 	;
@@ -21,8 +20,6 @@
 	{
 		var self = this;
 
-		this.buzz = null;
-
 		this.enableSoundNotification = ko.observable(false);
 		this.soundNotificationIsSupported = ko.observable(false);
 
@@ -145,14 +142,9 @@
 
 	NotificationUserStore.prototype.initNotificationPlayer = function ()
 	{
-		if (buzz && buzz.isSupported() && (buzz.isOGGSupported() || buzz.isMP3Supported()))
+		if (Audio && Audio.supported)
 		{
 			this.soundNotificationIsSupported(true);
-
-			this.buzz = new buzz.sound(Links.sound('new-mail'), {
-				'preload': 'none',
-				'formats': ['mp3', 'ogg']
-			});
 		}
 		else
 		{
@@ -163,9 +155,9 @@
 
 	NotificationUserStore.prototype.playSoundNotification = function (bSkipSetting)
 	{
-		if (this.buzz && (bSkipSetting ? true : this.enableSoundNotification()))
+		if (Audio && Audio.supported && (bSkipSetting ? true : this.enableSoundNotification()))
 		{
-			this.buzz.play();
+			Audio.playNotification();
 		}
 	};
 

dev/Styles/Attachmnets.less

@@ -126,8 +126,18 @@
 		}
 	}
 
-	.showPreview {
+	.attachmentIconParent.hasPreplay:hover {
+		.iconPreview {
+			display: inline-block;
+		}
+		.iconMain {
+			display: none;
+		}
+	}
+
+	.showPreview, .showPreplay {
 		display: none;
+		cursor: pointer;
 	}
 
 	.attachmentIconParent.hasPreview {
@@ -135,6 +145,15 @@
 			display: inline;
 		}
 
+		.hidePreview {
+			display: none;
+		}
+	}
+	.attachmentIconParent.hasPreplay {
+		.showPreplay {
+			display: inline;
+		}
+
 		.hidePreview {
 			display: none;
 		}

dev/Styles/Compose.less

@@ -57,8 +57,8 @@
 			color: #fff;
 			border-color: #eee;
 
-			font-size: 28px;
-			line-height: 28px;
+			font-size: 24px;
+			line-height: 24px;
 		}
 
 		.btn.disabled {
@@ -130,6 +130,11 @@
 			color: red;
 		}
 
+		.error-to {
+			color: red;
+			font-weight: bold;
+		}
+
 		.b-appachments {
 
 			.b-attacment {

dev/Styles/MessageView.less

@@ -360,7 +360,7 @@ html.rl-no-preview-pane {
 	}
 
 	&.message-focused .b-content {
-		z-index: 102;
+		z-index: 101;
 		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
 		border-radius: @rlLowBorderRadius;
 		border-color: darken(@rlMainDarkColor, 5%);

dev/Styles/SystemDropDown.less

@@ -34,6 +34,24 @@
 		vertical-align: middle;
 	}
 
+	.audioPlace {
+
+		font-size: 25px;
+		line-height: 30px;
+		margin-right: 15px;
+
+		.playIcon {
+
+			font-size: 30px;
+			line-height: 30px;
+
+			cursor: pointer;
+
+			color: orange;
+			text-shadow: 0 1px 0 #fff;
+		}
+	}
+
 	.accountPlace {
 		background-color: #000;
 		background-color: rgba(0, 0, 0, 0.5);

dev/Styles/_End.less

@@ -38,7 +38,7 @@
 		font-size: 13px;
 	}
 
-	&.style-rainloopTestTip .ot-content {
+	&.style-rainloopErrorTip .ot-content {
 		color: red;
 	}
 }

dev/View/Popup/Compose.js

@@ -170,6 +170,23 @@
 		this.attachmentsInProcessError = ko.observable(false);
 		this.attachmentsInErrorError = ko.observable(false);
 
+		this.attachmentsErrorTooltip = ko.computed(function () {
+
+			var sResult = '';
+			switch (true)
+			{
+				case this.attachmentsInProcessError():
+					sResult = Translator.i18n('COMPOSE/ATTACHMENTS_UPLOAD_ERROR_DESC');
+					break;
+				case this.attachmentsInErrorError():
+					sResult = Translator.i18n('COMPOSE/ATTACHMENTS_ERROR_DESC');
+					break;
+			}
+
+			return sResult;
+
+		}, this);
+
 		this.showCc = ko.observable(false);
 		this.showBcc = ko.observable(false);
 		this.showReplyTo = ko.observable(false);
@@ -326,6 +343,10 @@
 				aFlagsCache = []
 			;
 
+			this.attachmentsInProcessError(false);
+			this.attachmentsInErrorError(false);
+			this.emptyToError(false);
+
 			if (0 < this.attachmentsInProcess().length)
 			{
 				this.attachmentsInProcessError(true);
@@ -336,11 +357,13 @@
 				this.attachmentsInErrorError(true);
 				this.attachmentsPlace(true);
 			}
-			else if (0 === sTo.length)
+
+			if (0 === sTo.length)
 			{
 				this.emptyToError(true);
 			}
-			else
+
+			if (!this.emptyToError() && !this.attachmentsInErrorError() && !this.attachmentsInProcessError())
 			{
 				if (SettingsStore.replySameFolder())
 				{

dev/View/User/AbstractSystemDropDown.js

@@ -11,7 +11,9 @@
 		Enums = require('Common/Enums'),
 		Utils = require('Common/Utils'),
 		Links = require('Common/Links'),
+		Events = require('Common/Events'),
 
+		AppStore = require('Stores/User/App'),
 		AccountStore = require('Stores/User/Account'),
 		MessageStore = require('Stores/User/Message'),
 
@@ -28,6 +30,8 @@
 	{
 		AbstractView.call(this, 'Right', 'SystemDropDown');
 
+		this.currentAudio = AppStore.currentAudio;
+
 		this.accountEmail = AccountStore.email;
 
 		this.accounts = AccountStore.accounts;
@@ -37,10 +41,25 @@
 		this.capaAdditionalAccounts = ko.observable(Settings.capa(Enums.Capa.AdditionalAccounts));
 
 		this.accountClick = _.bind(this.accountClick, this);
+
+		this.accountClick = _.bind(this.accountClick, this);
+
+		Events.sub('audio.stop', function () {
+			AppStore.currentAudio('');
+		});
+
+		Events.sub('audio.start', function (sName) {
+			AppStore.currentAudio(sName);
+		});
 	}
 
 	_.extend(AbstractSystemDropDownUserView.prototype, AbstractView.prototype);
 
+	AbstractSystemDropDownUserView.prototype.stopPlay = function ()
+	{
+		Events.pub('audio.api.stop');
+	};
+
 	AbstractSystemDropDownUserView.prototype.accountClick = function (oAccount, oEvent)
 	{
 		if (oAccount && oEvent && !Utils.isUnd(oEvent.which) && 1 === oEvent.which)

dev/View/User/MailBox/MessageView.js

@@ -18,6 +18,7 @@
 		Utils = require('Common/Utils'),
 		Events = require('Common/Events'),
 		Translator = require('Common/Translator'),
+		Audio = require('Common/Audio'),
 
 		Cache = require('Common/Cache'),
 
@@ -734,6 +735,18 @@
 					oEvent.stopPropagation();
 				}
 			})
+			.on('click', '.attachmentsPlace .showPreplay', function (oEvent) {
+				if (oEvent && oEvent.stopPropagation)
+				{
+					oEvent.stopPropagation();
+				}
+
+				var oAttachment = ko.dataFor(this);
+				if (oAttachment && oAttachment.isMp3() && Audio.supported)
+				{
+					Audio.playMp3(oAttachment.linkDownload(), oAttachment.fileName);
+				}
+			})
 			.on('click', '.thread-list .more-threads', function (e) {
 
 				var oLast = null;