Attachments control panel

dev/Common/Audio.js

@@ -40,7 +40,7 @@
 			this.objForNotification.muted = false;
 			this.objForNotification.src = Links.sound('new-mail.mp3');
 
-			$(this.obj).on('ended', function () {
+			$(this.obj).on('ended error', function () {
 				self.stop();
 			});
 

dev/Model/Attachment.js

@@ -6,6 +6,7 @@
 	var
 		window = require('window'),
 		_ = require('_'),
+		ko = require('ko'),
 
 		Globals = require('Common/Globals'),
 		Utils = require('Common/Utils'),
@@ -22,6 +23,8 @@
 	{
 		AbstractModel.call(this, 'AttachmentModel');
 
+		this.checked = ko.observable(false);
+
 		this.mimeType = '';
 		this.fileName = '';
 		this.estimatedSize = 0;

dev/Styles/Attachmnets.less

@@ -1,5 +1,7 @@
 .attachmentItem {
 
+	position: relative;
+
 	display: inline-block;
 	margin: 5px;
 	max-width: 200px;
@@ -9,7 +11,8 @@
 	line-height: 24px;
 	border: 0;
 	background-color: #fff;
-	box-shadow: 0 1px 5px #ccc;
+
+	box-shadow: 0 1px 4px #ccc;
 	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
 	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
 
@@ -19,6 +22,21 @@
 		opacity: 0.6;
 	}
 
+	&.checked {
+		box-shadow: 0 1px 4px #00a;
+		box-shadow: 0 1px 5px rgba(0, 0, 255, 0.3);
+		box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2);
+	}
+
+	.checkedParent {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 1px 4px 0px 5px;
+		background: #FAFAFA;
+		border: 0px solid #CCC;
+	}
+
 	.attachmentSize {
 		font-size: 12px;
 		color: #999;
@@ -117,6 +135,12 @@
 		display: none;
 	}
 
+	.attachmentIconParent.hasPreview.isImage {
+		.iconMain {
+			display: none;
+		}
+	}
+
 	.attachmentIconParent.hasPreview:hover {
 		.iconPreview {
 			display: inline-block;

dev/Styles/MessageView.less

@@ -247,10 +247,35 @@ html.rl-no-preview-pane {
 				padding: 10px 10px 6px 10px;
 				background: #eee;
 				border-bottom: 1px solid #ddd;
+				position: relative;
 
 				.attachmentList {
 					margin: 0;
 				}
+
+				.checkedParent {
+					display: none;
+				}
+
+				&.selection-mode {
+					.checkedParent {
+						display: inline-block;
+					}
+				}
+
+				.controls-handle {
+					position: absolute;
+					bottom: 5px;
+					right: 8px;
+					color: #999;
+					cursor: pointer;
+				}
+			}
+
+			.attachmentsControls {
+				padding: 7px 5px 7px 14px;
+				background: #e8e8e8;
+				border-bottom: 1px solid #ddd;
 			}
 
 			.rlBlockquoteSwitcher {
@@ -339,6 +364,12 @@ html.rl-no-preview-pane {
 							font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
 						}
 
+						pre.b-plain-openpgp {
+							display: inline-block;
+							padding: 6px 10px;
+							border: 1px dashed #666;
+						}
+
 						blockquote {
 							border-left: 2px solid blue;
 							color: blue;

dev/Styles/SystemDropDown.less

@@ -40,15 +40,35 @@
 		line-height: 30px;
 		margin-right: 15px;
 
-		.playIcon {
+		.playIcon, .stopIcon {
+			cursor: pointer;
+			color: orange;
+			text-shadow: 0 1px 0 #555;
+		}
 
+		.playIcon {
+			margin-top: 5px;
+		}
+
+		.stopIcon {
 			font-size: 30px;
 			line-height: 30px;
+			margin-right: 10px;
+		}
 
-			cursor: pointer;
+		.stopIcon {
+			display: none;
+		}
 
-			color: orange;
+		&:hover {
-			text-shadow: 0 1px 0 #fff;
+
+			.playIcon {
+				display: none;
+			}
+
+			.stopIcon {
+				display: inline-block;
+			}
 		}
 	}
 
@@ -103,3 +123,66 @@
 html.ssm-state-mobile .accountPlace {
 	max-width: 150px !important;
 }
+
+@keyframes firstBar {
+  0%   { height: 30%; }
+  50%  { height: 100%; }
+  100% { height: 30%; }
+}
+
+@keyframes secondBar {
+  0%   { height: 90%; }
+  50%  { height: 30%; }
+  100% { height: 100%; }
+}
+
+@keyframes thirdBar {
+  0%   { height: 20%; }
+  40%  { height: 40%; }
+  60%  { height: 80%; }
+  100% { height: 40%; }
+}
+
+.equaliser {
+
+	width: 20px;
+	height: 20px;
+	position: relative;
+
+	.bar {
+		float:left;
+		width: 5px;
+		height: 5px;
+		background: orange;
+		position: absolute;
+		bottom:0;
+	}
+
+
+	.first {
+		left: 0px;
+		animation: none;
+	}
+	.second {
+		left: 7px;
+		animation: none;
+	}
+	.third {
+		left: 14px;
+		animation: none;
+	}
+
+	&.animated {
+		.first {
+			animation: firstBar 1s infinite;
+		}
+		.second {
+			animation: secondBar 1s infinite;
+		}
+		.third {
+			animation: thirdBar 1s infinite;
+		}
+	}
+
+
+}

dev/View/User/MailBox/MessageView.js

@@ -79,6 +79,21 @@
 
 		this.messageListOfThreadsLoading = ko.observable(false).extend({'rateLimit': 1});
 
+		this.allowAttachmnetControls = ko.observable(false);
+		this.showAttachmnetControls = ko.observable(false);
+
+		this.showAttachmnetControls.subscribe(function (bV) {
+			if (this.message())
+			{
+				_.each(this.message().attachments(), function (oItem) {
+					if (oItem)
+					{
+						oItem.checked(!!bV);
+					}
+				});
+			}
+		}, this);
+
 		this.lastReplyAction_ = ko.observable('');
 		this.lastReplyAction = ko.computed({
 			read: this.lastReplyAction_,
@@ -407,6 +422,8 @@
 
 			if (oMessage)
 			{
+				this.showAttachmnetControls(false);
+
 				if (this.viewHash !== oMessage.hash)
 				{
 					this.scrollMessageToTop();

package.json

@@ -2,7 +2,7 @@
 	"name": "RainLoop",
 	"title": "RainLoop Webmail",
 	"version": "1.8.3",
-	"release": "297",
+	"release": "298",
 	"description": "Simple, modern & fast web-based email client",
 	"homepage": "http://rainloop.net",
 	"main": "gulpfile.js",

rainloop/v/0.0.0/app/libraries/MailSo/Base/HtmlUtils.php

@@ -566,15 +566,15 @@ class HtmlUtils
 				if ($oElement->hasAttribute('href'))
 				{
 					$sHref = \trim($oElement->getAttribute('href'));
-					if (!\preg_match('/^(http[s]?|ftp|skype|mailto):/i', $sHref) ||
+					if (!\preg_match('/^(http[s]?|ftp|skype|mailto):/i', $sHref) && '//' !== \substr($sHref, 0, 2))
-						'//' !== \substr($sHref, 0, 2))
 					{
 						$oElement->setAttribute('data-x-broken-href', $sHref);
 						$oElement->setAttribute('href', 'javascript:false');
 					}
-					else if ('a' === $sTagNameLower)
+
+					if ('a' === $sTagNameLower)
 					{
-						$oElement->setAttribute('rel', 'external');
+						$oElement->setAttribute('rel', 'external nofollow');
 					}
 				}
 
@@ -595,8 +595,7 @@ class HtmlUtils
 					}
 					else
 					{
-						if (\preg_match('/^http[s]?:\/\//i', $sSrc) ||
+						if (\preg_match('/^http[s]?:\/\//i', $sSrc) || '//' === \substr($sSrc, 0, 2))
-							'//' === \substr($sSrc, 0, 2))
 						{
 							if ($bDoNotReplaceExternalUrl)
 							{

rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php

@@ -1315,6 +1315,7 @@ class Actions
 			'AllowAppendMessage' => (bool) $oConfig->Get('labs', 'allow_message_append', false),
 			'MaterialDesign' => (bool) $oConfig->Get('labs', 'use_material_design', true),
 			'PremType' => $this->PremType(),
+			'ZipSupported' => !!\class_exists('ZipArchive'),
 			'Admin' => array(),
 			'Capa' => array(),
 			'Plugins' => array()

rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -380,11 +380,11 @@
 											autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 											style="margin-bottom: 0" data-i18n="[placeholder]MESSAGE/PGP_PASSWORD_INPUT_PLACEHOLDER" data-bind="value: viewPgpPassword, onEnter: function() { decryptPgpEncryptedMessage(message()); }" />
 									</div>
-									<div class="attachmentsPlace" data-bind="visible: message() && message().hasVisibleAttachments()">
+									<div class="attachmentsPlace" data-bind="visible: message() && message().hasVisibleAttachments(), css: {'selection-mode' : showAttachmnetControls}">
 										<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
 											<li class="attachmentItem clearfix" draggable="true" data-tooltip-join="top"
-													data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }">
+													data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
-												<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay() }">
+												<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
 													<div class="hidePreview">
 														<div class="iconMain">
 															<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
@@ -408,7 +408,7 @@
 															<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
 														</div>
 														<div class="iconPreview">
-															<i class="attachmentIcon icon-right-dir show-hover"></i>
+															<i class="attachmentIcon icon-play show-hover"></i>
 														</div>
 													</div>
 												</div>
@@ -420,8 +420,26 @@
 														<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
 													</div>
 												</div>
+												<div class="checkedParent">
+													<i class="checkboxAttachment icon-checkbox-unchecked"
+														data-bind="css: checked() ? 'checkboxMessage icon-checkbox-checked' : 'checkboxMessage icon-checkbox-unchecked',
+														click: function () { checked(!checked()); return false }"></i>
+												</div>
 											</li>
 										</ul>
+										<i class="icon-cog controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true) }"></i>
+									</div>
+									<div class="attachmentsControls"
+										data-bind="visible: showAttachmnetControls() && message() && message().hasVisibleAttachments()">
+										<i class="icon-file-zip"></i>
+										&nbsp;&nbsp;
+										<span class="g-ui-link">Download as zip</span>
+										&nbsp;&nbsp;&nbsp;&nbsp;
+										<i class="icon-cloud-up"></i>
+										&nbsp;&nbsp;
+										<span class="g-ui-link">Save to ownCloud</span>
+										<button type="button" class="close" style="margin-right: 5px;"
+											data-bind="click: function () { showAttachmnetControls(false); }">×</button>
 									</div>
 									<div class="bodyText g-ui-min-height-300" data-bind="initDom: messagesBodiesDom"></div>
 								</div>

rainloop/v/0.0.0/app/templates/Views/User/SystemDropDown.html

@@ -70,8 +70,14 @@
 			<div class="accountPlace pull-right" data-bind="text: emailTitle()"></div>
 			<div class="audioPlace pull-right" data-tooltip-i18n="off" data-tooltip-mobile="on" data-tooltip-join="right top"
 					data-bind="visible: '' !== currentAudio(), tooltip: currentAudio, click: stopPlay">
-				<i class="playIcon icon-right-dir"></i>
+				<div class="playIcon equaliser" data-bind="css: {'animated': '' !== currentAudio()}">
+					<div class="bar first"></div>
+					<div class="bar second"></div>
+					<div class="bar third"></div>
+				</div>
+				<i class="stopIcon icon-pause"></i>
 			</div>
+
 		</div>
 	</div>
 </div>

rainloop/v/0.0.0/static/css/fonts/rainloop.svg

@@ -119,4 +119,7 @@
 <glyph unicode="&#57453;" d="M282 475l65-64-89-89 64-64 89 89 64-65 0 193z m-92-221l-89-89-64 65 0-193 193 0-65 64 89 89z"/>
 <glyph unicode="&#57455;" d="M256 484c-126 0-228-102-228-228 0-126 102-228 228-228 126 0 228 102 228 228 0 126-102 228-228 228z m-185-228c0 39 12 75 33 105 3 1 7 2 9 1 3-2 2-3 2-7 1-6 2-13 10-9 7 4 5 15 9 21 3 4 7 9 10 12 5 4 9 6 9 12 1 7-5 9-11 10 8 7 16 12 26 17 2-1 5-5 4-9-2-3-10-3-8-10 10-5 33 18 32-4-9-3-30-6-31-18-1-12 20-9 27-8 9 1 16 3 23 9 9 6 23 18 25 28 4 18-23 9-29 17-2 3-2 7-1 11 0 0 0 0 0 1 15 4 30 6 46 6 22 0 43-4 62-11-8-13-3-36-3-50 0-8-4-8-9-13-5-6-10-10-17-9-16 3-31 10-45-3-5-5-10-9-10-17 0-5-2-13 4-15 3-2 12-2 15 1 4 3 4 10 6 15 3 6 11 9 15 3 3-6 1-12-2-17-5-7-8-10-16-13-2-1-4-3-7-2-3 1-4 4-6 5-6 2-12-4-15-7-4-4-9-6-15-7-4-1-13 1-10-7 1-5 7-5 6-13-7 0-17 2-21-3-2-3-7-18-5-21 2-4 12-3 16-3 6-1 12 0 13 7 4 2 5 6 8 8 3 2 6 3 10 3 12 2 13-5 18-13 4-6 10-11 10-1-1 8-8 12-7 21 7 2 9-7 11-12 2-4 3-7 6-10 1-2 3-4 5-6 2 6 6 10 8 15 2 5 5 10 9 14 7 7 36 7 25-5-5-4-36-11-26-20 4-5 14 0 19-3 5-2 2-9 2-14 0-1 0-2 0-3-13-7-36-3-48-2-9 0-15 4-22 9-7 5-11 6-20 7-22 1-39-3-56-17-16-13-23-29-19-50 6-35 45-29 72-31 11-1 13-2 17-12 3-9 6-17 8-26 2-8 2-17 3-25 1-8 2-13 6-17-100 3-180 85-180 185z m242-176c7 4 11 8 18 13 3 2 6 2 8 6 2 5-1 8-3 13-4 10 4 14 10 21 7 6 12 15 16 23 4 6 10 20 10 26-8 0-17-4-26-3-11 2-19 9-25 16-7 7-11 16-10 26 0 4 0 5 3 6 5-6 14-9 19-16 4-5 6-9 11-13 3-2 5-6 8-9 4-4 13-1 17 3 6 5 5 11 7 17 1 5 4 7 6 12 1 5 0 11 0 15-5 1-8 0-12-2-3-2-3-5-8-5-7 0-11 8-12 15 6 3 15 2 22 2 7 0 13 1 19 4 11 5 19 0 28-6 5-4 12-14 16-8 4 5 2 16 2 22 0 3 1 6 1 10 1 2 1 4 2 5 1-5 1-11 1-17 0-82-54-152-128-176z"/>
 <glyph unicode="&#57454;" d="M218 63c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z m204-386c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z"/>
+<glyph unicode="&#57456;" d="M377 269c5-3 7-8 7-13 0-5-2-9-7-12 0 0-219-136-219-136-8-6-15-7-21-4-6 4-9 11-9 21 0 0 0 263 0 263 0 10 3 17 9 21 6 3 13 2 21-3 0 0 219-137 219-137"/>
+<glyph unicode="&#57457;" d="M346 435c30 0 46-11 46-33 0 0 0-291 0-291 0-23-16-34-46-34-31 0-46 11-46 34 0 0 0 291 0 291 0 22 15 33 46 33m-180 0c31 0 46-11 46-33 0 0 0-291 0-291 0-23-15-34-46-34-30 0-46 11-46 34 0 0 0 291 0 291 0 22 16 33 46 33"/>
+<glyph unicode="&#57458;" d="M372 410c25 0 38-11 38-33 0 0 0-241 0-241 0-22-13-34-38-34 0 0-231 0-231 0-26 0-39 12-39 34 0 0 0 241 0 241 0 12 3 21 10 25 6 5 16 8 29 8 0 0 231 0 231 0"/>
 </font></defs></svg>

vendors/fontastic/fonts/rainloop.svg

@@ -119,4 +119,7 @@
 <glyph unicode="&#57453;" d="M282 475l65-64-89-89 64-64 89 89 64-65 0 193z m-92-221l-89-89-64 65 0-193 193 0-65 64 89 89z"/>
 <glyph unicode="&#57455;" d="M256 484c-126 0-228-102-228-228 0-126 102-228 228-228 126 0 228 102 228 228 0 126-102 228-228 228z m-185-228c0 39 12 75 33 105 3 1 7 2 9 1 3-2 2-3 2-7 1-6 2-13 10-9 7 4 5 15 9 21 3 4 7 9 10 12 5 4 9 6 9 12 1 7-5 9-11 10 8 7 16 12 26 17 2-1 5-5 4-9-2-3-10-3-8-10 10-5 33 18 32-4-9-3-30-6-31-18-1-12 20-9 27-8 9 1 16 3 23 9 9 6 23 18 25 28 4 18-23 9-29 17-2 3-2 7-1 11 0 0 0 0 0 1 15 4 30 6 46 6 22 0 43-4 62-11-8-13-3-36-3-50 0-8-4-8-9-13-5-6-10-10-17-9-16 3-31 10-45-3-5-5-10-9-10-17 0-5-2-13 4-15 3-2 12-2 15 1 4 3 4 10 6 15 3 6 11 9 15 3 3-6 1-12-2-17-5-7-8-10-16-13-2-1-4-3-7-2-3 1-4 4-6 5-6 2-12-4-15-7-4-4-9-6-15-7-4-1-13 1-10-7 1-5 7-5 6-13-7 0-17 2-21-3-2-3-7-18-5-21 2-4 12-3 16-3 6-1 12 0 13 7 4 2 5 6 8 8 3 2 6 3 10 3 12 2 13-5 18-13 4-6 10-11 10-1-1 8-8 12-7 21 7 2 9-7 11-12 2-4 3-7 6-10 1-2 3-4 5-6 2 6 6 10 8 15 2 5 5 10 9 14 7 7 36 7 25-5-5-4-36-11-26-20 4-5 14 0 19-3 5-2 2-9 2-14 0-1 0-2 0-3-13-7-36-3-48-2-9 0-15 4-22 9-7 5-11 6-20 7-22 1-39-3-56-17-16-13-23-29-19-50 6-35 45-29 72-31 11-1 13-2 17-12 3-9 6-17 8-26 2-8 2-17 3-25 1-8 2-13 6-17-100 3-180 85-180 185z m242-176c7 4 11 8 18 13 3 2 6 2 8 6 2 5-1 8-3 13-4 10 4 14 10 21 7 6 12 15 16 23 4 6 10 20 10 26-8 0-17-4-26-3-11 2-19 9-25 16-7 7-11 16-10 26 0 4 0 5 3 6 5-6 14-9 19-16 4-5 6-9 11-13 3-2 5-6 8-9 4-4 13-1 17 3 6 5 5 11 7 17 1 5 4 7 6 12 1 5 0 11 0 15-5 1-8 0-12-2-3-2-3-5-8-5-7 0-11 8-12 15 6 3 15 2 22 2 7 0 13 1 19 4 11 5 19 0 28-6 5-4 12-14 16-8 4 5 2 16 2 22 0 3 1 6 1 10 1 2 1 4 2 5 1-5 1-11 1-17 0-82-54-152-128-176z"/>
 <glyph unicode="&#57454;" d="M218 63c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z m204-386c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z"/>
+<glyph unicode="&#57456;" d="M377 269c5-3 7-8 7-13 0-5-2-9-7-12 0 0-219-136-219-136-8-6-15-7-21-4-6 4-9 11-9 21 0 0 0 263 0 263 0 10 3 17 9 21 6 3 13 2 21-3 0 0 219-137 219-137"/>
+<glyph unicode="&#57457;" d="M346 435c30 0 46-11 46-33 0 0 0-291 0-291 0-23-16-34-46-34-31 0-46 11-46 34 0 0 0 291 0 291 0 22 15 33 46 33m-180 0c31 0 46-11 46-33 0 0 0-291 0-291 0-23-15-34-46-34-30 0-46 11-46 34 0 0 0 291 0 291 0 22 16 33 46 33"/>
+<glyph unicode="&#57458;" d="M372 410c25 0 38-11 38-33 0 0 0-241 0-241 0-22-13-34-38-34 0 0-231 0-231 0-26 0-39 12-39 34 0 0 0 241 0 241 0 12 3 21 10 25 6 5 16 8 29 8 0 0 231 0 231 0"/>
 </font></defs></svg>

vendors/fontastic/icons-reference.html

@@ -493,6 +493,18 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
           <div class="icon icon-braille"></div>
           <input type="text" readonly="readonly" value="braille">
         </li>
+        <li>
+          <div class="icon icon-play"></div>
+          <input type="text" readonly="readonly" value="play">
+        </li>
+        <li>
+          <div class="icon icon-pause"></div>
+          <input type="text" readonly="readonly" value="pause">
+        </li>
+        <li>
+          <div class="icon icon-stop"></div>
+          <input type="text" readonly="readonly" value="stop">
+        </li>
       </ul>
       <h2>Character mapping</h2>
       <ul class="glyphs character-mapping">
@@ -944,6 +956,18 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
           <div data-icon="&#xe06e;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe06e;">
         </li>
+        <li>
+          <div data-icon="&#xe070;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe070;">
+        </li>
+        <li>
+          <div data-icon="&#xe071;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe071;">
+        </li>
+        <li>
+          <div data-icon="&#xe072;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe072;">
+        </li>
       </ul>
     </div><script type="text/javascript">
 (function() {

vendors/fontastic/styles.css

@@ -374,3 +374,12 @@
 .icon-braille:before {
   content: "\e06e";
 }
+.icon-play:before {
+  content: "\e070";
+}
+.icon-pause:before {
+  content: "\e071";
+}
+.icon-stop:before {
+  content: "\e072";
+}