Clip.qml 37.1 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * Copyright (c) 2013-2016 Meltytech, LLC
 * Author: Dan Dennedy <dan@dennedy.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19
import QtQuick 2.6
20
import QtQuick.Controls 2.2
21
import Kdenlive.Controls 1.0
22
23
import QtQml.Models 2.2
import QtQuick.Window 2.2
24
import 'Timeline.js' as Logic
25
import com.enums 1.0
26
27
28

Rectangle {
    id: clipRoot
29
    property real timeScale: 1.0
30
31
32
    property string clipName: ''
    property string clipResource: ''
    property string mltService: ''
33
    property string effectNames
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
34
    property int modelStart
35
    property real scrollX: 0
36
37
38
    property int inPoint: 0
    property int outPoint: 0
    property int clipDuration: 0
39
    property int maxDuration: 0
40
    property bool isAudio: false
41
    property int audioChannels
42
    property bool showKeyframes: false
43
    property bool isGrabbed: false
44
    property bool grouped: false
45
    property var markers
46
    property var keyframeModel
47
48
    property int clipStatus: 0
    property int itemType: 0
49
50
    property int fadeIn: 0
    property int fadeOut: 0
51
    property int binId: 0
52
    property int positionOffset: 0
53
    property var parentTrack
54
55
    property int trackIndex //Index in track repeater
    property int clipId     //Id of the clip in the model
56
57
58
    property int trackId: -1 // Id of the parent track in the model
    property int fakeTid: -1
    property int fakePosition: 0
59
    property int originalTrackId: -1
60
    property int originalX: x
61
62
    property int originalDuration: clipDuration
    property int lastValidDuration: clipDuration
63
    property int draggedX: x
64
    property bool selected: false
65
    property bool isLocked: parentTrack && parentTrack.isLocked == true
66
    property bool hasAudio
67
68
    property bool canBeAudio
    property bool canBeVideo
69
    property string hash: 'ccc' //TODO
70
    property double speed: 1.0
71
    property color borderColor: 'black'
72
    property bool forceReloadThumb
73
    property bool isComposition: false
74
    property var groupTrimData
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
75
    width : clipDuration * timeScale;
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
76
    opacity: dragProxyArea.drag.active && dragProxy.draggedItem == clipId ? 0.8 : 1.0
77

78
79
    signal trimmingIn(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedIn(var clip, bool shiftTrim, bool controlTrim)
80
    signal initGroupTrim(var clip)
81
82
    signal trimmingOut(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedOut(var clip, bool shiftTrim, bool controlTrim)
83

84
85
    onIsGrabbedChanged: {
        if (clipRoot.isGrabbed) {
86
            grabItem()
87
88
89
        }
    }

90
91
92
93
94
    function grabItem() {
        clipRoot.forceActiveFocus()
        mouseArea.focus = true
    }

95
96
    function clearAndMove(offset) {
        controller.requestClearSelection()
97
98
        controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true)
        controller.requestAddToSelection(clipRoot.clipId)
99
100
    }

101
    onClipResourceChanged: {
102
        if (itemType == ProducerType.Color) {
103
            color: Qt.darker(getColor(), 1.5)
104
105
        }
    }
106
    ToolTip {
107
        visible: mouseArea.containsMouse && !dragProxyArea.pressed
108
109
110
111
112
113
114
115
116
        font.pixelSize: root.baseUnit
        delay: 1000
        timeout: 5000
        background: Rectangle {
            color: activePalette.alternateBase
            border.color: activePalette.light
        }
        contentItem: Label {
            color: activePalette.text
117
            text: label.text + ' (' + timeline.simplifiedTC(clipRoot.inPoint) + '-' + timeline.simplifiedTC(clipRoot.outPoint) + ')'
118
119
120
        }
    }

121
122
    onKeyframeModelChanged: {
        console.log('keyframe model changed............')
123
124
125
        if (effectRow.keyframecanvas) {
            effectRow.keyframecanvas.requestPaint()
        }
126
127
    }

Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
128
129
    onClipDurationChanged: {
        width = clipDuration * timeScale;
130
131
132
133
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
            // Duration changed, we may need a different number of repeaters
            thumbsLoader.item.reload()
        }
134
    }
135

136
137
138
    onModelStartChanged: {
        x = modelStart * timeScale;
    }
139
140
141
142
143
    onFakePositionChanged: {
        x = fakePosition * timeScale;
    }
    onFakeTidChanged: {
        if (clipRoot.fakeTid > -1 && parentTrack) {
144
145
146
147
148
149
150
            if (clipRoot.parent != dragContainer) {
                var pos = clipRoot.mapToGlobal(clipRoot.x, clipRoot.y);
                clipRoot.parent = dragContainer
                pos = clipRoot.mapFromGlobal(pos.x, pos.y)
                clipRoot.x = pos.x
                clipRoot.y = pos.y
            }
151
152
            clipRoot.y = Logic.getTrackById(clipRoot.fakeTid).y
        }
153
154
    }

155
    onForceReloadThumbChanged: {
156
        // TODO: find a way to force reload of clip thumbs
157
158
159
        if (thumbsLoader.item) {
            thumbsLoader.item.reload()
        }
160
161
    }

162
    onTimeScaleChanged: {
163
        x = modelStart * timeScale;
164
        width = clipDuration * timeScale;
165
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
166
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
167
            thumbsLoader.item.reload();
168
        }
169
170
171
    }
    onScrollXChanged: {
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
172
173
    }

Vincent Pinon's avatar
Vincent Pinon committed
174
    border.color: selected ? root.selectionColor : grouped ? root.groupColor : borderColor
175
    border.width: isGrabbed ? 8 : 1.5
176

177
178
179
180
181
    function updateDrag() {
        var itemPos = mapToItem(tracksContainerArea, 0, 0, clipRoot.width, clipRoot.height)
        initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
    }

182
    function getColor() {
183
184
185
        if (clipStatus == ClipState.Disabled) {
            return 'grey'
        }
186
        if (itemType == ProducerType.Color) {
187
188
189
            var color = clipResource.substring(clipResource.length - 9)
            if (color[0] == '#') {
                return color
190
            }
191
            return '#' + color.substring(color.length - 8, color.length - 2)
192
        }
193
        return isAudio? root.audioColor : root.videoColor
194
195
    }

196
/*    function reparent(track) {
197
        console.log('TrackId: ',trackId)
198
199
        parent = track
        height = track.height
200
        parentTrack = track
201
        trackId = parentTrack.trackId
202
        console.log('Reparenting clip to Track: ', trackId)
203
        //generateWaveform()
204
    }
205
*/
206
207
    property bool variableThumbs: (isAudio || itemType == ProducerType.Color || mltService === '')
    property bool isImage: itemType == ProducerType.Image
208
209
210
    property string baseThumbPath: variableThumbs ? '' : 'image://thumbnail/' + binId + '/' + (isImage ? '#0' : '#')
    property string inThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(inPoint * speed)
    property string outThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(outPoint * speed)
211

212
    DropArea { //Drop area for clips
213
214
215
        anchors.fill: clipRoot
        keys: 'kdenlive/effect'
        property string dropData
216
        property string dropSource
217
        property int dropRow: -1
218
219
        onEntered: {
            dropData = drag.getDataAsString('kdenlive/effect')
220
            dropSource = drag.getDataAsString('kdenlive/effectsource')
221
222
223
        }
        onDropped: {
            console.log("Add effect: ", dropData)
224
            if (dropSource == '') {
225
226
227
                // drop from effects list
                controller.addClipEffect(clipRoot.clipId, dropData);
            } else {
228
                controller.copyClipEffect(clipRoot.clipId, dropSource);
229
            }
230
            dropSource = ''
231
            dropRow = -1
232
            drag.acceptProposedAction
233
234
        }
    }
235
236
    MouseArea {
        id: mouseArea
237
        enabled: root.activeTool === 0
238
        anchors.fill: clipRoot
239
        acceptedButtons: Qt.RightButton
240
        hoverEnabled: root.activeTool === 0
241
        cursorShape: (trimInMouseArea.drag.active || trimOutMouseArea.drag.active)? Qt.SizeHorCursor : dragProxyArea.cursorShape
242
243
        onPressed: {
            root.stopScrolling = true
244
            if (mouse.button == Qt.RightButton) {
245
                if (timeline.selection.indexOf(clipRoot.clipId) == -1) {
246
                    controller.requestAddToSelection(clipRoot.clipId, true)
247
248
249
                }
                clipMenu.clipId = clipRoot.clipId
                clipMenu.clipStatus = clipRoot.clipStatus
250
                clipMenu.clipFrame = Math.round(mouse.x / timeline.scaleFactor)
251
252
253
254
255
                clipMenu.grouped = clipRoot.grouped
                clipMenu.trackId = clipRoot.trackId
                clipMenu.canBeAudio = clipRoot.canBeAudio
                clipMenu.canBeVideo = clipRoot.canBeVideo
                clipMenu.popup()
256
            }
257
        }
258
        Keys.onShortcutOverride: event.accepted = clipRoot.isGrabbed && (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Up || event.key === Qt.Key_Down || event.key === Qt.Key_Escape)
259
        Keys.onLeftPressed: {
260
261
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true);
262
263
        }
        Keys.onRightPressed: {
264
265
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart + offset, true, true, true);
266
        }
267
268
269
270
271
272
        Keys.onUpPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getNextTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
        Keys.onDownPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getPreviousTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
273
274
275
        Keys.onEscapePressed: {
            timeline.grabCurrent()
        }
276
        onPositionChanged: {
277
278
            var mapped = parentTrack.mapFromItem(clipRoot, mouse.x, mouse.y).x
            root.mousePosChanged(Math.round(mapped / timeline.scaleFactor))
279
        }
280
281
282
283
        onEntered: {
            var itemPos = mapToItem(tracksContainerArea, 0, 0, width, height)
            initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
        }
284

285
286
        onExited: {
            endDrag()
287
        }
288
        onWheel: zoomByWheel(wheel)
289

290
291
        Item {
            // Thumbs container
292
            anchors.fill: parent
293
294
295
296
297
298
299
300
301
302
303
304
305
306
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.topMargin: clipRoot.border.width
            anchors.bottomMargin: clipRoot.border.width
            clip: true
            Loader {
                id: thumbsLoader
                asynchronous: true
                visible: status == Loader.Ready
                anchors.fill: parent
                source: parentTrack.isAudio ? (timeline.showAudioThumbnails ? "ClipAudioThumbs.qml" : "") : itemType == ProducerType.Color ? "" : timeline.showThumbnails ? "ClipThumbs.qml" : ""
                onLoaded: {
                    item.reload()
                }
307
            }
308
        }
309

310
311
312
313
314
315
        Item {
            // Clipping container
            id: container
            anchors.fill: parent
            anchors.margins: 1.5
            clip: true
316

317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
            Rectangle {
                // text background
                id: labelRect
                color: clipRoot.selected ? 'darkred' : '#66000000'
                width: label.width + 2
                height: label.height
                visible: clipRoot.width > width / 2
                Text {
                    id: label
                    text: clipName + (clipRoot.speed != 1.0 ? ' [' + Math.round(clipRoot.speed*100) + '%]': '')
                    font.pixelSize: root.baseUnit * 1.2
                    anchors {
                        top: labelRect.top
                        left: labelRect.left
                        topMargin: 1
                        leftMargin: 1
                    }
                    color: 'white'
                    style: Text.Outline
                    styleColor: 'black'
                }
            }
            Rectangle {
                // Offset info
                id: offsetRect
                color: 'darkgreen'
                width: offsetLabel.width + radius
                height: offsetLabel.height
                radius: height/3
                x: labelRect.width + 4
                visible: labelRect.visible && positionOffset != 0
                MouseArea {
                    id: offsetArea
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    anchors.fill: parent
                    onClicked: {
                        clearAndMove(positionOffset)
                    }
                    ToolTip {
                        visible: offsetArea.containsMouse
                        font.pixelSize: root.baseUnit
                        delay: 1000
                        timeout: 5000
                        background: Rectangle {
                            color: activePalette.alternateBase
                            border.color: activePalette.light
                        }
                        contentItem: Label {
                            color: activePalette.text
367
                            text: positionOffset < 0 ? i18n("Offset: -%1", timeline.simplifiedTC(-positionOffset)) : i18n("Offset: %1", timeline.simplifiedTC(positionOffset))
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
                        }
                    }
                    Text {
                        id: offsetLabel
                        text: positionOffset
                        font.pixelSize: root.baseUnit * 1.2
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            topMargin: 1
                            leftMargin: 1
                        }
                        color: 'white'
                        style: Text.Outline
                        styleColor: 'black'
                    }
                }
            }
            Rectangle {
                // effects
                id: effectsRect
                color: '#555555'
                width: effectLabel.width + 2
                height: effectLabel.height
                x: labelRect.x
                anchors.top: labelRect.bottom
                visible: labelRect.visible && clipRoot.effectNames != ''
                Text {
                    id: effectLabel
                    text: clipRoot.effectNames
                    font.pixelSize: root.baseUnit * 1.2
                    anchors {
                        top: effectsRect.top
                        left: effectsRect.left
                        topMargin: 1
                        leftMargin: 1
                        // + ((isAudio || !settings.timelineShowThumbnails) ? 0 : inThumbnail.width) + 1
                    }
                    color: 'white'
                    //style: Text.Outline
                    styleColor: 'black'
                }
            }

            Repeater {
                model: markers
                delegate:
                Item {
                    anchors.fill: parent
                    Rectangle {
                        id: markerBase
                        width: 1
                        height: parent.height
420
                        x: clipRoot.speed < 0 ? clipRoot.clipDuration * timeScale + (Math.round(model.frame / clipRoot.speed) - (clipRoot.maxDuration - clipRoot.outPoint)) * timeScale : (Math.round(model.frame / clipRoot.speed) - clipRoot.inPoint) * timeScale;
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
                        color: model.color
                    }
                    Rectangle {
                        visible: mlabel.visible
                        opacity: 0.7
                        x: markerBase.x
                        radius: 2
                        width: mlabel.width + 4
                        height: mlabel.height
                        anchors {
                            bottom: parent.verticalCenter
                        }
                        color: model.color
                        MouseArea {
                            z: 10
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            cursorShape: Qt.PointingHandCursor
                            hoverEnabled: true
440
                            onDoubleClicked: timeline.editMarker(clipRoot.clipId, model.frame)
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
                            onClicked: timeline.position = (clipRoot.x + markerBase.x) / timeline.scaleFactor
                        }
                    }
                    Text {
                        id: mlabel
                        visible: timeline.showMarkers && parent.width > width * 1.5
                        text: model.comment
                        font.pixelSize: root.baseUnit
                        x: markerBase.x
                        anchors {
                            bottom: parent.verticalCenter
                            topMargin: 2
                            leftMargin: 2
                        }
                        color: 'white'
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
457
                }
458
459
460
461
462
463
464
465
466
467
            }

            KeyframeView {
                id: effectRow
                visible: clipRoot.showKeyframes && clipRoot.keyframeModel
                selected: clipRoot.selected
                inPoint: clipRoot.inPoint
                outPoint: clipRoot.outPoint
                masterObject: clipRoot
                kfrModel: clipRoot.keyframeModel
468
469
            }
        }
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501

        states: [
            State {
                name: 'locked'
                when: isLocked
                PropertyChanges {
                    target: clipRoot
                    color: root.lockedColor
                    opacity: 0.8
                    z: 0
                }
            },
            State {
                name: 'normal'
                when: clipRoot.selected === false
                PropertyChanges {
                    target: clipRoot
                    color: Qt.darker(getColor(), 1.5)
                    z: 0
                }
            },
            State {
                name: 'selected'
                when: clipRoot.selected === true
                PropertyChanges {
                    target: clipRoot
                    color: getColor()
                    z: 3
                }
            }
        ]

502
        Rectangle {
503
504
505
506
507
508
509
510
511
512
513
514
            id: compositionIn
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.leftMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
515
            enabled: !clipRoot.isAudio && dragProxy.draggedItem === clipRoot.clipId
516
            visible: clipRoot.width > 4 * width
517
            MouseArea {
518
519
                id: compInArea
                anchors.fill: parent
520
521
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
522
523
524
525
526
527
528
529
530
531
532
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
                }
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, 0)
                }
                onReleased: {
                    parent.opacity = 0
533
534
                }
                ToolTip {
535
                    visible: compInArea.containsMouse && !dragProxyArea.pressed
536
537
538
539
540
541
542
543
544
                    font.pixelSize: root.baseUnit
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Yuri Chornoivan's avatar
Yuri Chornoivan committed
545
                        text: i18n("Click to add composition")
546
547
548
549
                    }
                }
            }
        }
550
        Rectangle {
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
            id: compositionOut
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.rightMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
            enabled: !clipRoot.isAudio  && dragProxy.draggedItem == clipRoot.clipId
            visible: clipRoot.width > 4 * width
            MouseArea {
                id: compOutArea
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
567
                anchors.fill: parent
568
569
570
571
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.opacity = 0.7
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
572
                }
573
574
575
                onExited: {
                    if (!pressed) {
                        parent.opacity = 0
576
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
577
                }
578
579
580
581
582
583
584
585
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, clipRoot.clipDuration - 1)
                }
                onReleased: {
                    parent.opacity = 0
                }
                ToolTip {
                    visible: compOutArea.containsMouse && !dragProxyArea.pressed
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
586
                    font.pixelSize: root.baseUnit
587
588
589
590
591
592
593
594
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Yuri Chornoivan's avatar
Yuri Chornoivan committed
595
                        text: i18n("Click to add composition")
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
596
597
                    }
                }
598
599
            }
        }
600

601

602
603
604
605
606
607
608
609
610
        TimelineTriangle {
            id: fadeInTriangle
            fillColor: 'green'
            width: Math.min(clipRoot.fadeIn * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
611
        }
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
        Rectangle {
            id: fadeInControl
            anchors.left: fadeInTriangle.width > radius? undefined : fadeInTriangle.left
            anchors.horizontalCenter: fadeInTriangle.width > radius? fadeInTriangle.right : undefined
            anchors.top: fadeInTriangle.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#FF66FFFF'
            border.width: 2
            border.color: 'green'
            enabled: !isLocked && !dragProxy.isComposition
            opacity: 0
            visible : clipRoot.width > 3 * width
            Drag.active: fadeInMouseArea.drag.active
            MouseArea {
                id: fadeInMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                drag.axis: Drag.XAxis
                drag.smoothed: false
                property int startX
                property int startFadeIn
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
645
                }
646
647
648
649
650
651
652
653
654
                onPressed: {
                    root.stopScrolling = true
                    startX = Math.round(parent.x / timeScale)
                    startFadeIn = clipRoot.fadeIn
                    parent.anchors.left = undefined
                    parent.anchors.horizontalCenter = undefined
                    parent.opacity = 1
                    fadeInTriangle.opacity = 0.5
                    // parentTrack.clipSelected(clipRoot, parentTrack) TODO
655
                }
656
657
658
                onReleased: {
                    root.stopScrolling = false
                    fadeInTriangle.opacity = 0.3
659
                    parent.opacity = 0
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
                    if (fadeInTriangle.width > parent.radius)
                        parent.anchors.horizontalCenter = fadeInTriangle.right
                    else
                        parent.anchors.left = fadeInTriangle.left
                    console.log('released fade: ', clipRoot.fadeIn)
                    timeline.adjustFade(clipRoot.clipId, 'fadein', clipRoot.fadeIn, startFadeIn)
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = Math.round(parent.x / timeScale) - startX
                        var duration = Math.max(0, startFadeIn + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (duration != clipRoot.fadeIn) {
                            timeline.adjustFade(clipRoot.clipId, 'fadein', duration, -1)
                            // Show fade duration as time in a "bubble" help.
676
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
677
678
679
                            bubbleHelp.show(clipRoot.x, parentTrack.y + clipRoot.height, s)
                        }
                    }
680
                }
681
            }
682
683
684
685
686
687
688
689
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeInMouseArea.containsMouse && !fadeInMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
690
                }
691
692
693
694
695
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
696
697
698
699
                }
            }
        }

700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
        TimelineTriangle {
            id: fadeOutCanvas
            fillColor: 'red'
            width: Math.min(clipRoot.fadeOut * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
            transform: Scale { xScale: -1; origin.x: fadeOutCanvas.width / 2}
        }
        Rectangle {
            id: fadeOutControl
            anchors.right: fadeOutCanvas.width > radius? undefined : fadeOutCanvas.right
            anchors.horizontalCenter: fadeOutCanvas.width > radius? fadeOutCanvas.left : undefined
            anchors.top: fadeOutCanvas.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#66FFFFFF'
            border.width: 2
            border.color: 'red'
            opacity: 0
            enabled: !isLocked && !dragProxy.isComposition
            Drag.active: fadeOutMouseArea.drag.active
            visible : clipRoot.width > 3 * width
            MouseArea {
                id: fadeOutMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                property int startX
                property int startFadeOut
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
742
                    }
743
                }
744
745
746
747
748
749
750
751
752
                drag.smoothed: false
                onPressed: {
                    root.stopScrolling = true
                    startX = Math.round(parent.x / timeScale)
                    startFadeOut = clipRoot.fadeOut
                    parent.anchors.right = undefined
                    parent.anchors.horizontalCenter = undefined
                    parent.opacity = 1
                    fadeOutCanvas.opacity = 0.5
753
                }
754
755
756
757
758
759
760
761
                onReleased: {
                    fadeOutCanvas.opacity = 0.3
                    parent.opacity = 0
                    root.stopScrolling = false
                    if (fadeOutCanvas.width > parent.radius)
                        parent.anchors.horizontalCenter = fadeOutCanvas.left
                    else
                        parent.anchors.right = fadeOutCanvas.right
762
763
764
765
766
                    var duration = clipRoot.fadeOut
                    if (duration > 0) {
                        duration += 1
                    }
                    timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, startFadeOut)
767
768
769
770
771
772
773
774
775
776
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = startX - Math.round(parent.x / timeScale)
                        var duration = Math.max(0, startFadeOut + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (clipRoot.fadeOut != duration) {
                            timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, -1)
                            // Show fade duration as time in a "bubble" help.
777
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
778
779
                            bubbleHelp.show(clipRoot.x + clipRoot.width, parentTrack.y + clipRoot.height, s)
                        }
780
                    }
781
782
                }
            }
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeOutMouseArea.containsMouse && !fadeOutMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
798
799
            }
        }
800
    }
801
802
803

    Rectangle {
        id: trimIn
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
804
        anchors.left: clipRoot.left
805
806
        anchors.leftMargin: 0
        height: parent.height
807
        enabled: !isLocked
808
        width: root.baseUnit / 3
809
810
811
812
        color: isAudio? 'green' : 'lawngreen'
        opacity: 0
        Drag.active: trimInMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
813
        visible: trimInMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
814

815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
        ToolTip {
            visible: trimInMouseArea.containsMouse && !trimInMouseArea.pressed
            font.pixelSize: root.baseUnit
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
                text: i18n("In:%1\nPosition:%2", timeline.simplifiedTC(clipRoot.inPoint),timeline.simplifiedTC(clipRoot.modelStart))
            }
        }

830
831
832
833
834
835
        MouseArea {
            id: trimInMouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: parent
            drag.axis: Drag.XAxis
836
            drag.smoothed: false
837
            property bool shiftTrim: false
838
            property bool controlTrim: false
839
            property bool sizeChanged: false
840
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
841
842
            onPressed: {
                root.stopScrolling = true
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
843
                clipRoot.originalX = clipRoot.x
844
                clipRoot.originalDuration = clipDuration
845
                parent.anchors.left = undefined
846
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
847
                controlTrim = mouse.modifiers & Qt.ControlModifier
848
849
850
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
851
                parent.opacity = 0
852
853
854
855
            }
            onReleased: {
                root.stopScrolling = false
                parent.anchors.left = clipRoot.left
856
                if (sizeChanged) {
857
                    clipRoot.trimmedIn(clipRoot, shiftTrim, controlTrim)
858
859
                    sizeChanged = false
                }
860
861
862
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
863
                    var delta = Math.round((trimIn.x) / timeScale)
864
                    if (delta !== 0) {
865
866
867
                        if (delta < -modelStart) {
                            delta = -modelStart
                        }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
868
                        var newDuration =  clipDuration - delta
869
                        sizeChanged = true
870
                        clipRoot.trimmingIn(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
871
                    }
872
873
                }
            }
874
            onEntered: {
875
876
877
                if (!pressed) {
                    parent.opacity = 0.5
                }
878
879
880
881
            }
            onExited: {
                parent.opacity = 0
            }
882
883
884
885
        }
    }
    Rectangle {
        id: trimOut
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
886
        anchors.right: clipRoot.right
887
888
        anchors.rightMargin: 0
        height: parent.height
889
        width: root.baseUnit / 3
890
891
        color: 'red'
        opacity: 0
892
        enabled: !isLocked
893
894
        Drag.active: trimOutMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
895
        visible: trimOutMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
896

897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
        ToolTip {
            visible: trimOutMouseArea.containsMouse && !trimOutMouseArea.pressed
            font.pixelSize: root.baseUnit
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
                text: i18n("Out: ") + timeline.simplifiedTC(clipRoot.outPoint)
            }
        }
        
912
913
914
915
        MouseArea {
            id: trimOutMouseArea
            anchors.fill: parent
            hoverEnabled: true
916
            property bool shiftTrim: false
917
            property bool controlTrim: false
918
            property bool sizeChanged: false
919
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
920
921
            drag.target: parent
            drag.axis: Drag.XAxis
922
            drag.smoothed: false
923
924
925

            onPressed: {
                root.stopScrolling = true
926
                clipRoot.originalDuration = clipDuration
927
                parent.anchors.right = undefined
928
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
929
                controlTrim = mouse.modifiers & Qt.ControlModifier
930
931
932
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
933
                parent.opacity = 0
934
935
936
937
            }
            onReleased: {
                root.stopScrolling = false
                parent.anchors.right = clipRoot.right
938
                if (sizeChanged) {
939
                    clipRoot.trimmedOut(clipRoot, shiftTrim, controlTrim)
940
941
                    sizeChanged = false
                }
942
943
944
945
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
                    var newDuration = Math.round((parent.x + parent.width) / timeScale)
946
                    if (newDuration != clipDuration) {
947
                        sizeChanged = true
948
                        clipRoot.trimmingOut(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
949
                    }
950
951
                }
            }
952
953
954
955
956
            onEntered: {
                if (!pressed) {
                    parent.opacity = 0.5
                }
            }
957
958
959
            onExited: parent.opacity = 0
        }
    }
960

961
        /*MenuItem {
962
            id: mergeItem
Yuri Chornoivan's avatar
Yuri Chornoivan committed
963
            text: i18n("Merge with next clip")
964
965
966
            onTriggered: timeline.mergeClipWithNext(trackIndex, index, false)
        }
        MenuItem {
Yuri Chornoivan's avatar
Yuri Chornoivan committed
967
            text: i18n("Rebuild Audio Waveform")
968
            onTriggered: timeline.remakeAudioLevels(trackIndex, index)
969
        }*/
970
        /*onPopupVisibleChanged: {
971
972
973
974
975
            if (visible && application.OS !== 'OS X' && __popupGeometry.height > 0) {
                // Try to fix menu running off screen. This only works intermittently.
                menu.__yOffset = Math.min(0, Screen.height - (__popupGeometry.y + __popupGeometry.height + 40))
                menu.__xOffset = Math.min(0, Screen.width - (__popupGeometry.x + __popupGeometry.width))
            }
976
        }*/
977
}