Feature/34 media overlay style choices

Source/FolioReaderAudioPlayer.swift

@@ -286,10 +286,11 @@ class FolioReaderAudioPlayer: NSObject, AVAudioPlayerDelegate {
         var songInfo = [String: AnyObject]()
 
         // Get book Artwork
-        if let artwork = UIImage(contentsOfFile: book.coverImage.fullHref) {
+        if book.coverImage != nil {
+        if let artwork = UIImage(contentsOfFile: book.coverImage!.fullHref) {
             let albumArt = MPMediaItemArtwork(image: artwork)
             songInfo[MPMediaItemPropertyArtwork] = albumArt
-        }
+        }}
 
         // Get book title
         if let title = book.title() {

Source/FolioReaderCenter.swift

@@ -447,14 +447,14 @@ class FolioReaderCenter: UIViewController, UICollectionViewDelegate, UICollectio
         // Configure the cell
         let resource = book.spine.spineReferences[indexPath.row].resource
         var html = try? String(contentsOfFile: resource.fullHref, encoding: NSUTF8StringEncoding)
-        let mediaOverlayStyle = "background: \(readerConfig.mediaOverlayColor.hexString(false)) !important;"
+        let mediaOverlayStyleColors = "\"\(readerConfig.mediaOverlayColor.hexString(false))\", \"\(readerConfig.mediaOverlayColor.highlightColor().hexString(false))\""
 
         // Inject CSS
         let jsFilePath = NSBundle.frameworkBundle().pathForResource("Bridge", ofType: "js")
         let cssFilePath = NSBundle.frameworkBundle().pathForResource("Style", ofType: "css")
         let cssTag = "<link rel=\"stylesheet\" type=\"text/css\" href=\"\(cssFilePath!)\">"
         let jsTag = "<script type=\"text/javascript\" src=\"\(jsFilePath!)\"></script>" +
-                    "<script type=\"text/javascript\">setMediaOverlayStyle(\"\(mediaOverlayStyle)\")</script>"
+                    "<script type=\"text/javascript\">setMediaOverlayStyleColors(\(mediaOverlayStyleColors))</script>"
 
         let toInject = "\n\(cssTag)\n\(jsTag)\n</head>"
         html = html?.stringByReplacingOccurrencesOfString("</head>", withString: toInject)
@@ -479,6 +479,7 @@ class FolioReaderCenter: UIViewController, UICollectionViewDelegate, UICollectio
             break
         }
 
+        classes += " "+FolioReader.sharedInstance.currentMediaOverlayStyle.className()
 
         // Night mode
         if FolioReader.sharedInstance.nightMode {

Source/FolioReaderConfig.swift

@@ -19,7 +19,7 @@ public class FolioReaderConfig: NSObject {
     public var nightModeBackground: UIColor!
     public var nightModeMenuBackground: UIColor!
     public var nightModeSeparatorColor: UIColor!
-    public lazy var mediaOverlayColor: UIColor! = self.tintColor.highlightColor()
+    public lazy var mediaOverlayColor: UIColor! = self.tintColor
 
     // Custom actions
     public var shouldHideNavigationOnTap: Bool!
@@ -33,6 +33,7 @@ public class FolioReaderConfig: NSObject {
     public var localizedPlayMenu: String
     public var localizedPauseMenu: String
     public var localizedFontMenuNight: String
+    public var localizedPlayerMenuStyle: String
     public var localizedFontMenuDay: String
     public var localizedReaderOnePageLeft: String
     public var localizedReaderManyPagesLeft: String
@@ -68,6 +69,7 @@ public class FolioReaderConfig: NSObject {
         self.localizedDefineMenu = NSLocalizedString("Define", comment: "")
         self.localizedFontMenuNight = NSLocalizedString("Night", comment: "")
         self.localizedFontMenuDay = NSLocalizedString("Day", comment: "")
+        self.localizedPlayerMenuStyle = NSLocalizedString("Style", comment: "")
         self.localizedReaderOnePageLeft = NSLocalizedString("1 page left", comment: "")
         self.localizedReaderManyPagesLeft = NSLocalizedString("pages left", comment: "")
         self.localizedReaderManyMinutes = NSLocalizedString("minutes", comment: "")

Source/FolioReaderContainer.swift

@@ -74,7 +74,8 @@ class FolioReaderContainer: UIViewController, FolioReaderSidePanelDelegate {
             kNightMode: false,
             kCurrentFontSize: 2,
             kCurrentAudioRate: 1,
-            kCurrentHighlightStyle: 0
+            kCurrentHighlightStyle: 0,
+            kCurrentMediaOverlayStyle: MediaOverlayStyle.Default.rawValue
             ])
     }
 

Source/FolioReaderKit.swift

@@ -26,10 +26,30 @@ internal let kCurrentFontFamily = "kCurrentFontFamily"
 internal let kCurrentFontSize = "kCurrentFontSize"
 internal let kCurrentAudioRate = "kCurrentAudioRate"
 internal let kCurrentHighlightStyle = "kCurrentHighlightStyle"
+internal var kCurrentMediaOverlayStyle = "kMediaOverlayStyle"
 internal let kNightMode = "kNightMode"
 internal let kHighlightRange = 30
 internal var kBookId: String!
 
+/**
+ `0` Default  
+ `1` Underline  
+ `2` Text Color
+*/
+enum MediaOverlayStyle: Int {
+    case Default
+    case Underline
+    case TextColor
+
+    init () {
+        self = .Default
+    }
+
+    func className() -> String {
+        return "mediaOverlayStyle\(self.rawValue)"
+    }
+}
+
 /**
 *  Main Library class with some useful constants and methods
 */
@@ -83,6 +103,14 @@ public class FolioReader {
             FolioReader.defaults.synchronize()
         }
     }
+
+    var currentMediaOverlayStyle: MediaOverlayStyle {
+        get { return MediaOverlayStyle(rawValue: FolioReader.defaults.valueForKey(kCurrentMediaOverlayStyle) as! Int)! }
+        set (value) {
+            FolioReader.defaults.setValue(value.rawValue, forKey: kCurrentMediaOverlayStyle)
+            FolioReader.defaults.synchronize()
+        }
+    }
 
     // MARK: - Present Folio Reader
 

Source/FolioReaderPlayerMenu.swift

@@ -12,6 +12,7 @@ class FolioReaderPlayerMenu: UIViewController, SMSegmentViewDelegate {
 
     var menuView: UIView!
     var playPauseBtn: UIButton!
+    var styleOptionBtns = [UIButton]()
     var viewDidAppear = false
 
     override func viewDidLoad() {
@@ -27,7 +28,7 @@ class FolioReaderPlayerMenu: UIViewController, SMSegmentViewDelegate {
         view.addGestureRecognizer(tapGesture)
 
         // Menu view
-        menuView = UIView(frame: CGRectMake(0, view.frame.height-110, view.frame.width, view.frame.height))
+        menuView = UIView(frame: CGRectMake(0, view.frame.height-165, view.frame.width, view.frame.height))
         menuView.backgroundColor = isNight(readerConfig.nightModeMenuBackground, UIColor.whiteColor())
         menuView.autoresizingMask = .FlexibleWidth
         menuView.layer.shadowColor = UIColor.blackColor().CGColor
@@ -118,7 +119,82 @@ class FolioReaderPlayerMenu: UIViewController, SMSegmentViewDelegate {
         playbackRate.segmentTitleFont = UIFont(name: "Avenir-Light", size: 17)!
         playbackRate.selectSegmentAtIndex(Int(FolioReader.sharedInstance.currentAudioRate))
         menuView.addSubview(playbackRate)
-
+
+
+        // Separator
+        let line2 = UIView(frame: CGRectMake(0, playbackRate.frame.height+playbackRate.frame.origin.y, view.frame.width, 1))
+        line2.backgroundColor = readerConfig.nightModeSeparatorColor
+        menuView.addSubview(line2)
+
+
+        // Media overlay highlight styles
+        let style0 = UIButton(frame: CGRectMake(0, line2.frame.height+line2.frame.origin.y, view.frame.width/3, 55))
+        style0.titleLabel!.textAlignment = .Center
+        style0.titleLabel!.font = UIFont(name: "Avenir-Light", size: 17)
+        style0.setTitleColor(isNight(readerConfig.nightModeMenuBackground, UIColor.whiteColor()), forState: .Normal)
+        style0.setTitleColor(isNight(readerConfig.nightModeMenuBackground, UIColor.whiteColor()), forState: .Selected)
+        style0.setTitle(readerConfig.localizedPlayerMenuStyle, forState: .Normal)
+        menuView.addSubview(style0);
+        style0.titleLabel?.sizeToFit()
+        let style0Bgd = UIView(frame: style0.titleLabel!.frame)
+        style0Bgd.center = CGPointMake(style0.frame.size.width  / 2, style0.frame.size.height / 2);
+        style0Bgd.frame.size.width += 8
+        style0Bgd.frame.origin.x -= 4
+        style0Bgd.backgroundColor = normalColor;
+        style0Bgd.layer.cornerRadius = 3.0;
+        style0Bgd.userInteractionEnabled = false
+        style0.insertSubview(style0Bgd, belowSubview: style0.titleLabel!)
+
+        let style1 = UIButton(frame: CGRectMake(view.frame.width/3, line2.frame.height+line2.frame.origin.y, view.frame.width/3, 55))
+        style1.titleLabel!.textAlignment = .Center
+        style1.titleLabel!.font = UIFont(name: "Avenir-Light", size: 17)
+        style1.setTitleColor(normalColor, forState: .Normal)
+        style1.setAttributedTitle(NSAttributedString(string: "Style", attributes: [
+            NSForegroundColorAttributeName: normalColor,
+            NSUnderlineStyleAttributeName: NSUnderlineStyle.PatternDot.rawValue|NSUnderlineStyle.StyleSingle.rawValue,
+            NSUnderlineColorAttributeName: normalColor
+        ]), forState: .Normal)
+        style1.setAttributedTitle(NSAttributedString(string: readerConfig.localizedPlayerMenuStyle, attributes: [
+            NSForegroundColorAttributeName: isNight(UIColor.whiteColor(), UIColor.blackColor()),
+            NSUnderlineStyleAttributeName: NSUnderlineStyle.PatternDot.rawValue|NSUnderlineStyle.StyleSingle.rawValue,
+            NSUnderlineColorAttributeName: selectedColor
+            ]), forState: .Selected)
+        menuView.addSubview(style1);
+
+        let style2 = UIButton(frame: CGRectMake(view.frame.width/1.5, line2.frame.height+line2.frame.origin.y, view.frame.width/3, 55))
+        style2.titleLabel!.textAlignment = .Center
+        style2.titleLabel!.font = UIFont(name: "Avenir-Light", size: 17)
+        style2.setTitleColor(normalColor, forState: .Normal)
+        style2.setTitleColor(selectedColor, forState: .Selected)
+        style2.setTitle(readerConfig.localizedPlayerMenuStyle, forState: .Normal)
+        menuView.addSubview(style2);
+
+        // add line dividers between style buttons
+        let style1line = UIView(frame: CGRectMake(style1.frame.origin.x, style1.frame.origin.y, 1, style1.frame.height))
+        style1line.backgroundColor = readerConfig.nightModeSeparatorColor
+        menuView.addSubview(style1line)
+        let style2line = UIView(frame: CGRectMake(style2.frame.origin.x, style2.frame.origin.y, 1, style2.frame.height))
+        style2line.backgroundColor = readerConfig.nightModeSeparatorColor
+        menuView.addSubview(style2line)
+
+        // select the current style
+        style0.selected = (FolioReader.sharedInstance.currentMediaOverlayStyle == .Default)
+        style1.selected = (FolioReader.sharedInstance.currentMediaOverlayStyle == .Underline)
+        style2.selected = (FolioReader.sharedInstance.currentMediaOverlayStyle == .TextColor)
+        if style0.selected { style0Bgd.backgroundColor = selectedColor }
+
+        // hook up button actions
+        style0.tag = MediaOverlayStyle.Default.rawValue
+        style1.tag = MediaOverlayStyle.Underline.rawValue
+        style2.tag = MediaOverlayStyle.TextColor.rawValue
+        style0.addTarget(self, action: "changeStyle:", forControlEvents: .TouchUpInside)
+        style1.addTarget(self, action: "changeStyle:", forControlEvents: .TouchUpInside)
+        style2.addTarget(self, action: "changeStyle:", forControlEvents: .TouchUpInside)
+
+        // store ref to buttons
+        styleOptionBtns.append(style0)
+        styleOptionBtns.append(style1)
+        styleOptionBtns.append(style2)
     }
 
 
@@ -170,6 +246,24 @@ class FolioReaderPlayerMenu: UIViewController, SMSegmentViewDelegate {
         FolioReader.sharedInstance.readerAudioPlayer.togglePlay()
         closeView()
     }
+
+    func changeStyle(sender: UIButton!) {
+        FolioReader.sharedInstance.currentMediaOverlayStyle = MediaOverlayStyle(rawValue: sender.tag)!
+
+        // select the proper style button
+        for btn in styleOptionBtns {
+            btn.selected = btn == sender
+
+            if btn.tag == MediaOverlayStyle.Default.rawValue {
+                btn.subviews.first?.backgroundColor = btn.selected ? readerConfig.tintColor : UIColor(white: 0.5, alpha: 0.7)
+            }
+        }
+
+        // update the current page style
+        if let currentPage = FolioReader.sharedInstance.readerCenter.currentPage {
+            currentPage.webView.js("setMediaOverlayStyle(\"\(FolioReader.sharedInstance.currentMediaOverlayStyle.className())\")")
+        }
+    }
 
     func closeView() {
         dismissViewControllerAnimated(true, completion: nil)

Source/Resources/Bridge.js

@@ -264,17 +264,14 @@ function audioMarkID(className, id) {
     el.classList.add(className)
 }
 
-function setMediaOverlayStyle(style) {
-    var stylesheet = document.styleSheets[document.styleSheets.length-1];
-    var index = null;
-
-    [].forEach.call(stylesheet.rules, function(rule, i) {
-        if (rule.selectorText && rule.selectorText == "span.epub-media-overlay-playing") {
-            index = i
-            return
-        }
-    })
+function setMediaOverlayStyle(style){
+    document.documentElement.classList.remove("mediaOverlayStyle0", "mediaOverlayStyle1", "mediaOverlayStyle2")
+    document.documentElement.classList.add(style)
+}
 
-    if (index) stylesheet.removeRule(index)
-    stylesheet.insertRule("span.epub-media-overlay-playing { "+style+" }")
+function setMediaOverlayStyleColors(color, colorHighlight) {
+    var stylesheet = document.styleSheets[document.styleSheets.length-1];
+    stylesheet.insertRule(".mediaOverlayStyle0 span.epub-media-overlay-playing { background: "+colorHighlight+" !important }")
+    stylesheet.insertRule(".mediaOverlayStyle1 span.epub-media-overlay-playing { border-color: "+color+" !important }")
+    stylesheet.insertRule(".mediaOverlayStyle2 span.epub-media-overlay-playing { color: "+color+" !important }")
 }

Source/Resources/Style.css

@@ -175,7 +175,15 @@ html .highlight-yellow, html .highlight-green, html .highlight-blue, html .highl
 }
 
 /* default media overlay style */
-span.epub-media-overlay-playing {background: #ccc !important}
+.mediaOverlayStyle0 span.epub-media-overlay-playing {
+    background: #ccc
+}
+
+.mediaOverlayStyle1 .epub-media-overlay-playing {
+    border-bottom: dotted 2px transparent;
+    border-radius: 0;
+}
+
 
 
 /*